本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！一个绚丽的CSS3动画效果是如何实现的？（代码实例）
收藏 本篇文章给大家带来的内容是关于一个绚丽的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>
效果如图：
分析：
看到这么牛逼的效果，相信小伙伴们都惊呆了吧！
这个例子综合了CSS3的很多技术，使用到了CSS3中的文字阴影text-shadow、变形效果transform、过渡效果transition以及动画效果animation等。
