CSS3如何实现绚丽的动画效果

这篇文章主要讲解了“CSS3如何实现绚丽的动画效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3如何实现绚丽的动画效果”吧！

创新互联，专注为中小企业提供官网建设、营销型网站制作、成都响应式网站建设、展示型成都网站设计、成都网站制作等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

举例：

100

101

102

103

104

105

106

107

108

109

一个绚丽的CSS3动画效果

body{background:#000;}

{

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);}

}

php中文网

效果如图：

CSS3如何实现绚丽的动画效果

分析：

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

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

感谢各位的阅读，以上就是“CSS3如何实现绚丽的动画效果”的内容了，经过本文的学习后，相信大家对CSS3如何实现绚丽的动画效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

网站标题：CSS3如何实现绚丽的动画效果
网站URL：http://cqcxhl.com/article/goegop.html

重庆分公司，新征程启航

CSS3如何实现绚丽的动画效果

php中文网

其他资讯