Home >Web Front-end >CSS Tutorial >How to achieve a gorgeous CSS3 animation effect? (code example)
How to achieve a gorgeous CSS3 animation effect? (code example)
- 云罗郡主forward
- 2018-10-22 17:01:011677browse
The content of this article is about how to achieve a gorgeous CSS3 animation effect? (Code example) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The following is a code example quoted from a front-end expert. We use this example to show you the awesome effect of CSS3:
Example:
<!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>The effect is as follows Picture:
Analysis:
I believe all the friends will be shocked when they see such an awesome effect!
This example combines many technologies of CSS3 and uses text-shadow, deformation effect transform, transition effect transition and animation effect animation in CSS3.
The above is how to achieve a gorgeous CSS3 animation effect? (Code examples) full introduction, if you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of How to achieve a gorgeous CSS3 animation effect? (code example). For more information, please follow other related articles on the PHP Chinese website!