如何利用css实现圆形效果?(代码实例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于如何利用css实现圆形效果?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

之前我们知道,CSS3动画效果由3大部分组成:变形、过渡和动画。前2章,我们已经对变形效果和过渡效果进行详细地讲解。这一章我们来讲解CSS3中“真正”的动画效果。

在CSS3中,动画效果使用animation属性来实现。animation属性和transition属性功能是相同的,都是通过改变元素的“属性值”来实现动画效果。但是这两者又有很大的区别:transition属性只能通过指定属性的开始值与结束值,然后在这两个属性值之间进行平滑过渡来实现动画效果,因此只能实现简单的动画效果。animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。

上面这段话非常有价值,里面涉及新手最容易混淆的问题“animation属性和transition属性有什么区别”中的答案。刚刚开始可能看不懂,但是看完这一章一定要回来好好看看!

先来一个例子,让大家感受一下CSS3动画效果的神奇。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS3动画</title>     <style type="text/css">         div         {             width:100px;             height:100px;             border-radius:50px;             background-color:red;         }         @-webkit-keyframes mycolor         {             0%{background-color:red;}             30%{background-color:blue;}             60%{background-color:yellow;}             100%{background-color:green;}         }         div:hover         {             -webkit-animation-name:mycolor;             -webkit-animation-duration:5s;             -webkit-animation-timing-function:linear;         }     </style> </head> <body>     <div></div> </body> </html>

在浏览器预览效果如下:

如何利用css实现圆形效果?(代码实例)

分析:

大家可以看到了,这里有一个div元素,其背景色为红色,当鼠标指针移动到div元素上时,元素的背景色将经历从红色到蓝色、从蓝色到黄色、从黄色回到红色这样的一系列变化。

大家试想一下,如果让你使用CSS3过渡transition属性,你可以实现得了么?当然不行。因为transition属性只能实现一个变化效果。我们可以这样理解,transition属性只能实现简单的动画(一个),而animation属性却可以实现复杂的动画(一系列)。

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 如何利用css实现圆形效果?(代码实例)

发表评论

提供最优质的资源集合

立即查看 了解详情