《
使用CSS3实现鼠标悬停动画》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233NH013.htm
transform-origin: 形变核心点设定
text-shadow: 0px 1px 3px black;
以上赋值分辨代表 X轴偏移，Y轴偏移，阴影扩散尺寸，色彩。应用到按钮、题目等处有很好的浮雕效果，同样的作风在 Mac OS X, iPhone 体系界面中有大批运用。
到这里，所有的工作都实现了,使用CSS+XHTML制作的下拉菜单(代码)，挺简单吧？下面进入具体剖析阐明。
-webkit-transition: all 0.2s ease-out;
-webkit-transition 是一个神奇的属性，它定义了动画过程的类型、时间、时间轴曲线。all 表现对所有变更应用动画，包含 transform, opacity; 后面两项是时间跟时间轴曲线，可以有如下赋值：
兼容阅读器: Chrome 2.0, Safari 3.1
以上 demo 来自 Transition Timing Functions, 展现了 transition 时光把持的强盛，而且上面的 transform 是能够多重叠加的,使用CSS 3新技术 完美实现圆角效果，配合 transition, 能做些什么大家设想一下吧！
上图是一个鼠标悬停动画的例子，如果将以下代码应用到全局 CSS 中，则所有带链接的图片都会有如上图动画：
a img {
opacity: 0.8;
-webkit-transition: all 0.2s ease-out;
}
a:hover img {
,使用Combres合并对js、css文件的请求;opacity: 1;
-moz-transform: scale(1.05) rotate(2deg);
-webkit-transform: scale(1,你需要了解的21个CSS惊人技巧.05) rotate(2deg);
}
如果要求仅应用于 class=",你究竟要做什么样的网站？;logo" 的图片，则将取舍器改为：
a img.logo {...}
a:hover img.logo {...}
假如请求利用于 id="footer" 的 div 下所有图片，则将抉择器改为：
#footer a img {,你知道CSS样式中“大于号”的作用吗...}
#footer a:hover img {...}
transition: 进程动画设定
default » linear » ease-in » ease-out » ease-in-out » cubic-bezier »
transform: 形变目的值设定
这是一个较为普遍支撑的属性，前面早已不了私有前缀(-moz, -webkit). 应用也很简略，让畸形状况的图片略微透显明示，鼠标悬停的时候恢复不透明，更加醒目,你真的了解web标准margin吗。它同样可以在时间轴上受 transition 节制，尝尝看这个示例。
使用CSS3实现鼠标悬停动画
text-shadow: 文字暗影
我搜寻了一些相干材料，将如何用 CSS 实现鼠标悬停动画后果的方式收拾本钱文。目前，能准确显示这些非正式 CSS 属性的浏览器还十分有限，不外可以确信的是，不能显示动画的浏览器不会受到不良影响，那么就让优良的浏览器物尽其用吧。
兼容浏览器: 除了 IE
opacity: 不透明度
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
上面的例子仅仅应用了 transform: rotate, 在鼠标悬停的时候逆时针旋转。除了 rotate, 还有 scale, translate, skew,你的财宝在哪里 也谈网络时代的业余与专业, matrix 等用法，想要深刻把玩可参考Animation Using CSS Transforms.
兼容浏览器: Firefox 3.5,你的网站真的值得提高排名吗, Chrome 2.0, Safari 3.1
结语 限于篇幅，本文示例所用的 CSS 不明文列出，有兴致可以查看页面源代码，就嵌在注释中。 目前 CSS3 还在草案阶段，良多属性还有私有属性前缀，能兼容新属性的浏览器在用户比例上也还是少数。话说回来，谁指望 IE Trident? 屁股都要笑掉。 Gecko 真的已经落伍 WebKit 好多了，CSS, JS, 而且还没算上 WebKit 在iPhone, Android 等挪动平台的成绩。Gecko 在这方面基础仍是零吧。 Tag：动画 鼠标 ,
你的网站在百度短网址缩短有安全隐患吗？; 实现 使用
兼容浏览器: Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 3.1
兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1
--> [
网站建设之]使用CSS3实现鼠标悬停动画
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
默认值在对象的正中，X Y 值均为 50%. 更改数值可移动形变中央。下面两个例子，左边是 100% 100%(右下角), 右边是 0%, 100%(左下角):
(责任编辑：网站建设)
使用CSS3实现鼠标悬停动画相关文章