css3-12 transition+css或transform实现过渡动画

最新推荐文章于 2025-08-04 10:48:37 发布

转载最新推荐文章于 2025-08-04 10:48:37 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Renyi-Fan/p/9268776.html

本文介绍如何使用CSS3的transition属性结合transform实现平滑过渡动画效果，并提供了具体代码示例。

css3-12 transition+css或transform实现过渡动画

一、总结

一句话总结：首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。

1、哪些样式可以设置过渡动画？

transform加别的css

11     transition: width 2s, height 2s, transform 2s;

2、如何设置为hover里面的所有样式都执行过渡动画？

transition: all 1s ease 0s;

3、过渡动画如何实现？

首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。

 1         div{
 2             width:256px;
 3             height:256px;
 4             border:2px solid #999;
 5             overflow:hidden;
 6             transition:transform 2s;
 7         }
 8 
 9         div:hover{
10             transform:rotate(360deg);
11         }

二、transition+css或transform实现过渡动画

1、相关知识

不仅transform可以，其它css也可以

2、代码

 1         div{
 2             width:256px;
 3             height:256px;
 4             border:2px solid #999;
 5             overflow:hidden;
 6             transition:transform 2s;
 7         }
 8 
 9         div:hover{
10             transform:rotate(360deg);
11         }

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title>
 6 <style> 
 7 div {
 8     width: 100px;
 9     height: 100px;
10     background: red;
11     transition: width 2s, height 2s, transform 2s;
12 }
13 
14 div:hover {
15     width: 200px;
16     height: 200px;
17     transform: rotate(180deg);
18 }
19 </style>
20 </head>
21 <body>
22 <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
23 
24 <div>鼠标移动到 div 元素上，查看过渡效果。</div>
25 </body>
26 </html>

转载于:https://www.cnblogs.com/Renyi-Fan/p/9268776.html