CSS3新属性transition-property transform box-shadow

最新推荐文章于 2023-10-11 13:34:16 发布

前端是工作也是生活

最新推荐文章于 2023-10-11 13:34:16 发布

阅读量1.7k

点赞数 1

分类专栏： css3 web设计 css 文章标签： CSS3

本文链接：https://blog.csdn.net/u010634899/article/details/9039505

版权

web设计同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

css3

4 篇文章 0 订阅

订阅专栏

先看效果图：

正常显示：

鼠标经过时候的效果：

<!DOCTYPE html>

<head>

<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>

<p>请测试css3</p>

</div>

<p>请测试css3</p>

</div>

<p>请测试css3</p>

</div>

<p>请测试css3</p>

</div>

<p>请测试css3</p>

</div>

</body>

</html>

前端是工作也是生活

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新属性transition-property transform box-shadow

先看效果图：正常显示：鼠标经过时候的效果：CSS3新属性2013-05-21.test li:hover{border-color:#999;background-color:#bbb;color:#999;}.text{ margin:5px;float:left; background:
复制链接

扫一扫