这篇文章主要讲解了“CSS3如何实现绚丽的动画效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3如何实现绚丽的动画效果”吧！
举例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | <!DOCTYPE HTML> <html> <head> <title>一个绚丽的CSS3动画效果</title> <style type="text/css"> body{background:#000;} h2 { 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> <h2>php中文网</h2> </body> </html> |
效果如图：
分析：
看到这么牛逼的效果，相信小伙伴们都惊呆了吧！
这个例子综合了CSS3的很多技术，使用到了CSS3中的文字阴影text-shadow、变形效果transform、过渡效果transition以及动画效果animation等。
感谢各位的阅读，以上就是“CSS3如何实现绚丽的动画效果”的内容了，经过本文的学习后，相信大家对CSS3如何实现绚丽的动画效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
