CSS3浏览器兼容

不同的浏览器需要不同的前缀
-webkit     chrome和safari
-moz        firefox
-ms         ie
-o          opera

　　一个炫酷标题效果：

HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello YYN</title>
<link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
<link href="css/new_file.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello CSS3</h1>
</body>
</html>

CSS:

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);
      }
    }

会做饭的技术男

发布了1 篇原创文章 · 获赞 2 · 访问量 1万+

私信关注

猜你喜欢