介绍 & lt; !DOCTYPE HTML>
& lt; html>
& lt; head>
& lt; title>一个绚丽的CSS3动画效果& lt;/title>
& lt;风格类型=拔谋?css"比;
身体{背景:# 000;}
h2
{
text-align:中心;
颜色:# fff;
字体大小:48 px;
文本阴影:1 px 1 px 1 px # ccc,
0 0 10 px # fff,
0 0 20 px # fff,
30 0 0 px # fff,
40 0 0 px # ff00de,
0 0 70 px # ff00de,
0 0 80 px # ff00de,
0 0 100 px # ff00de,
0 0 150 px # ff00de;
传输格式:preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
动画:运行ease-in-out 9 s无限;
-moz-animation:运行ease-in-out 9 s无限;
-webkit-animation:运行ease-in-out 9 s无限;
-ms-animation:运行ease-in-out 9 s无限;
-o-animation:运行ease-in-out 9 s无限;
}
@keyframes运行
{
0%{变换:rotateX(5度)rotateY (0);}
50%
{
变换:rotateX (0) rotateY(180度);
文本阴影:1 px 1 px 1 px # ccc,
0 0 10 px # fff,
0 0 20 px # fff,
30 0 0 px # fff,
40 0 0 px # 3 eff3e,
0 0 70 px # 3 effff,
0 0 80 px # 3 effff,
0 0 100 px # 3 effee,
0 0 150 px # 3 effee;
}
100%{变换:rotateX(5度)rotateY(360度);}
}
@-webkit-keyframes运行
{
0%{变换:rotateX(5度)rotateY (0);}
50%
{
变换:rotateX (0) rotateY(180度);
文本阴影:1 px 1 px 1 px # ccc,
0 0 10 px # fff,
0 0 20 px # fff,
30 0 0 px # fff,
40 0 0 px # 3 eff3e,
0 0 70 px # 3 effff,
0 0 80 px # 3 effff,
0 0 100 px # 3 effee,
0 0 150 px # 3 effee;
}
100%{变换:rotateX(5度)rotateY(360度);}
}
@-moz-keyframes运行
{
0%{变换:rotateX(5度)rotateY (0);}
50%
{
变换:rotateX (0) rotateY(180度);
文本阴影:1 px 1 px 1 px # ccc,
0 0 10 px # fff,
0 0 20 px # fff,
30 0 0 px # fff,
40 0 0 px # 3 eff3e,
0 0 70 px # 3 effff,
0 0 80 px # 3 effff,
0 0 100 px # 3 effee,
0 0 150 px # 3 effee;
}
100%{变换:rotateX(5度)rotateY(360度);}
}
@-ms-keyframes运行
{
0%{变换:rotateX(5度)rotateY (0);}
50%
{
变换:rotateX (0) rotateY(180度);
文本阴影:1 px 1 px 1 px # ccc,
0 0 10 px # fff,
0 0 20 px # fff,
30 0 0 px # fff,
40 0 0 px # 3 eff3e,
0 0 70 px # 3 effff,
0 0 80 px # 3 effff,
0 0 100 px # 3 effee,
0 0 150 px # 3 effee;
}
100%{变换:rotateX(5度)rotateY(360度);}
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; h2> & lt;/h2>
& lt;/body>
& lt;/html>
这篇文章将为大家详细讲解有关CSS3实现动画效果的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
举例:
关于CSS3实现动画效果的案例就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
