下面是引自一位前端大牛的一個代碼示例，我們通過這個實例給大家展示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> 學習網</h1>
</body>
</html>
在浏覽器預覽效果如下：
分析：
看到這麼牛逼的效果，相信小伙伴們都驚呆了吧！
這個例子綜合了CSS3的很多技術，使用到了CSS3中的文字陰影text-shadow、變形效果transform、過渡效果transition以及動畫效果animation等。大家學了 學習網的CSS3教程，同樣能做出這樣的效果。
相信小伙伴們跟我當初學習CSS3的心情一樣，期待的眼光中帶有點小激動吧。那就趕緊進入CSS3的學習吧。