今天小编跟大家讲解下有关CSS3新属性transition-property transform box-shadow实例学习 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3新属性transition-property transform box-shadow实例学习 的相关资料，希望小伙伴们看了有所帮助。
先看效果图： 正常显示： 鼠标经过时候的效果： 复制代码代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/> <title>CSS3新属性2013-05-21</title> <style> .test li:hover{border-color:#999;background-color:#bbb;color:#999;} .text{ margin:5px;float:left; background:#FFF; height:250px; width:200px; border:1px solid #CCC; transition-property:all; transition-duration:.5s; transition-timing-function:ease-out;-moz-transition-property:all;-ms-transition-property:all;-o-transition-property:all;-webkit-transition-property:all;-moz-transition-duration:.5s;-ms-transition-duration:.5s;-o-transition-duration:.5s;-webkit-transition-duration:.5s;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;-webkit-transition-timing-function:ease-in;} .text:hover{ box-shadow:0 0 10px #CCCCCC;-moz-box-shadow:0 0 10px #CCCCCC;-ms-box-shadow:0 0 10px #CCCCCC;-o-box-shadow:0 0 10px #CCCCCC;-webkit-box-shadow:0 0 10px #CCCCCC; transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);-webkit-transform:scale(1.2);} </style> </head> <body> <div class="text"> <p>请测试css3</p> </div> <div class="text"> <p>请测试css3</p> </div> <div class="text"> <p>请测试css3</p> </div> <div class="text"> <p>请测试css3</p> </div> <div class="text"> <p>请测试css3</p> </div> </body> </html>来源：爱蒂网
