一个绚丽的CSS3动画效果是如何实现的?(代码实例)

作者 : 轩寒 本文共2116个字,预计阅读时间需要6分钟 发布时间: 2022-06-14 共108人阅读
也想出现在这里? 联系我们

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

下面是引自一位前端大牛的一个代码示例,我们通过这个实例给大家展示CSS3的牛逼效果:

举例:

<!DOCTYPE HTML> <html> <head>        <title>一个绚丽的CSS3动画效果</title>     <style  type="text/css">         body{background:#000;}         h1         {             text-align:center;             color:#fff;             font-size:48px;             text-shadow: 1px 1px 1px #ccc,                        0 0 10px #fff,                        0 0 20px #fff,                        0 0 30px #fff,                        0 0 40px #ff00de,                        0 0 70px #ff00de,                        0 0 80px #ff00de,                        0 0 100px #ff00de,                        0 0 150px #ff00de;             transform-style: preserve-3d;             -moz-transform-style: preserve-3d;             -webkit-transform-style: preserve-3d;               -ms-transform-style: preserve-3d;                          -o-transform-style: preserve-3d;                           animation: run  ease-in-out 9s infinite;             -moz-animation: run  ease-in-out 9s infinite ;              -webkit-animation: run  ease-in-out 9s infinite;                -ms-animation: run  ease-in-out 9s infinite;                -o-animation: run  ease-in-out 9s infinite;           }         @keyframes run         {             0% {transform:rotateX(-5deg) rotateY(0);}             50%             {                 transform:rotateX(0) rotateY(180deg);                   text-shadow: 1px  1px 1px #ccc,                            0 0 10px #fff,                            0 0 20px #fff,                            0 0 30px #fff,                            0 0 40px #3EFF3E,                            0 0 70px #3EFFff,                            0 0 80px #3EFFff,                            0 0 100px #3EFFee,                            0 0 150px #3EFFee;             }             100% {transform:rotateX(5deg) rotateY(360deg);}         }         @-webkit-keyframes run         {             0% {transform:rotateX(-5deg) rotateY(0);}             50%             {                 transform:rotateX(0) rotateY(180deg);                   text-shadow: 1px  1px 1px #ccc,                            0 0 10px #fff,                            0 0 20px #fff,                            0 0 30px #fff,                            0 0 40px #3EFF3E,                            0 0 70px #3EFFff,                            0 0 80px #3EFFff,                            0 0 100px #3EFFee,                            0 0 150px #3EFFee;             }             100% {transform:rotateX(5deg) rotateY(360deg);}         }         @-moz-keyframes run         {             0% {transform:rotateX(-5deg) rotateY(0);}             50%             {                 transform:rotateX(0) rotateY(180deg);                   text-shadow: 1px  1px 1px #ccc,                            0 0 10px #fff,                            0 0 20px #fff,                            0 0 30px #fff,                            0 0 40px #3EFF3E,                            0 0 70px #3EFFff,                            0 0 80px #3EFFff,                            0 0 100px #3EFFee,                            0 0 150px #3EFFee;             }             100% {transform:rotateX(5deg) rotateY(360deg);}         }         @-ms-keyframes run         {             0% {transform:rotateX(-5deg) rotateY(0);}             50%             {                 transform:rotateX(0) rotateY(180deg);                   text-shadow: 1px  1px 1px #ccc,                            0 0 10px #fff,                            0 0 20px #fff,                            0 0 30px #fff,                            0 0 40px #3EFF3E,                            0 0 70px #3EFFff,                            0 0 80px #3EFFff,                            0 0 100px #3EFFee,                            0 0 150px #3EFFee;             }             100% {transform:rotateX(5deg) rotateY(360deg);}         }     </style> </head> <body>     <h1>5G云资源分享网</h1> </body> </html>

效果如图:

1593263014-718b3695c035dce
1593263014-718b3695c035dce

分析:

看到这么牛逼的效果,相信小伙伴们都惊呆了吧!

这个例子综合了CSS3的很多技术,使用到了CSS3中的文字阴影text-shadow、变形效果transform、过渡效果transition以及动画效果animation等。

版权免责声明

① 本站VIP源码资源永久免费下载 www.wayu.cn;
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理;
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负;
④ 如果你有源码需要出售,可以联系小编,或者点击 投稿
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解;
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需;
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源;
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)。


站哈源码网 » 一个绚丽的CSS3动画效果是如何实现的?(代码实例)

发表评论

Copyright© 2022 by-站哈源码网 & 站内部分资源收集于网络,若侵犯了您的合法权益,请联系站长删除!
在 0.548 秒钟有 43 次查询。