第一章 初识CSS3

< > 1-1什么是CSS3？

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello CSS3</title>
<link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello CSS3</h1>
</body>
</html>
body{
    background:#000;
    }
  
h1 {
    text-align:center;
    color:#fff;
    font-size:48px;
   font-family: 'Fruktur', cursive;
   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);    
      }
    }

@-moz-keyframes run {
      0% {
        -moz-transform:rotateX(-5deg) rotateY(0);    

      }
    50% {
        -moz-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% {
        -moz-transform:rotateX(5deg) rotateY(360deg);    
      }
    }

@-webkit-keyframes run {
      0% {
        -webkit-transform:rotateX(-5deg) rotateY(0);    

      }
    50% {
        -webkit-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% {
        -webkit-transform:rotateX(5deg) rotateY(360deg);    
      }
    }
@-ms-keyframes run {
      0% {
        -ms-transform:rotateX(-5deg) rotateY(0);    

      }
    50% {
        -ms-transform:rotateX(0) rotateY(180deg);    
        
      }
      100% {
        -ms-transform:rotateX(5deg) rotateY(360deg);    
      }
    }


</style>

相信CSS3的时代马上就要到来了！



posted @ 2017-10-18 15:33  罪恩徒斯  阅读(115)  评论(0)    收藏  举报