本篇文章给大家带来的内容是关于一个绚丽的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></h1></body></html>
效果如图：
分析：
看到这么牛逼的效果，相信小伙伴们都惊呆了吧！
这个例子综合了css3的很多技术，使用到了css3中的文字阴影text-shadow、变形效果transform、过渡效果transition以及动画效果animation等。
以上就是对一个绚丽的css3动画效果是如何实现的？（代码实例）的全部介绍，如果您想了解更多有关css3视频教程，请关注。
以上就是一个绚丽的css3动画效果是如何实现的？（代码实例）的详细内容。