本篇文章给大家带来的内容是关于一个绚丽的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>php中文网</h1></body></html>效果如图：
分析：
看到这么牛逼的效果，相信小伙伴们都惊呆了吧！
这个例子综合了CSS3的很多技术，使用到了CSS3中的文字阴影text-shadow、变形效果transform、过渡效果transition以及动画效果animation等。
