一、前面的感慨 二、基础练习 – 实现旋转与盒投影效果 -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg); -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); 上面代码部分,首先应该知道的是webkit表示webkit核心的浏览器,是其私有属性,作用于chrome和Safari浏览器,moz是Firefox浏览器的私有属性。 上面代码在Safari浏览器下的表现如下: 如果您当前浏览器为Safari3.5+,或是chrome,Safari,您可以狠狠地点击这里:基础旋转投影效果demo 三、使用transition给单个图片添加悬停动画 .pic{ display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center; background:white; border:1px solid #bfbfbf; -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg); -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -webkit-transition:all 0.5s ease-in; } .pic:hover,.pic:focus,.pic:active{ border-color:#9a9a9a; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); } 代码部分最关键的就是:-webkit-transition:all 0.5s ease-in;目前而言,transition仅webkit核心的浏览器支持,所以此效果仅在chrome或是Safari下有。 熟悉flash显示与动画编程的应该知道,这里的过渡类型的含义与flash中缓动类型(远不及flash丰富)是一致的: 额外的些知识:timing-funciton的几种过度类型都是基于cubic-bezier的某些特定数值。比如ease-in-out的类型它也可以写成cubic-bezier(0.42, 0, 0.58, 1.0)。参见这里http://www./TR/css3-transitions/#transition-timing-function_tag。 所以, 如果您当前浏览器为Safari3.5+,或是chrome,Safari,您可以狠狠地点击这里:单张图片的鼠标悬停旋转动画demo 四、多张美女图的transition旋转效果 核心的CSS代码与上面的一致,多的就是种图片的绝对定位布局了。这里不多说。 如果您当前浏览器为Safari3.5+,或是chrome,Safari,您可以狠狠地点击这里:多张图片的鼠标悬停旋转动画demo 五、单张图片的旋转拉近动画效果 如果您当前浏览器为Safari3.5+,或是chrome,Safari,您可以狠狠地点击这里:单张图片的旋转悬浮效果demo 核心的CSS代码如下: .pic{ display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center; background:white; border:1px solid #bfbfbf; -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg); -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -webkit-transition:all 0.5s ease-in; } .pic:hover,.pic:focus,.pic:active{ border-color:#9a9a9a; -webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -moz-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -webkit-transform:rotate(0deg) scale(1.05); -moz-transform:rotate(0deg) scale(1.05); transform:rotate(0deg) scale(1.05); } 对比三和五部分的CSS代码,您会发现,这里的CSS的hover部分发生了些变化,首先增加的盒阴影样式, 六、最后的图片墙悬浮超酷动画 七、最后自己的些总结 关于transition,如果您有兴趣,可以去w3c去看一看,里面有相对比较详细的介绍:http://www./TR/css3-transitions/ 总之,CSS3中蕴含的潜力无限,等着您我挖掘探寻了…… 原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.] |
|