在学习CSS3语法之前，先来看一个例子，让小伙伴们感受一下CSS3究竟有多强大。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></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的冰山一角，小伙伴们还可以到绿叶学习网首页看看各种“爆裂”效果。