CSS3浏览器兼容

最新推荐文章于 2023-03-10 17:56:15 发布

weixin_34167819

最新推荐文章于 2023-03-10 17:56:15 发布

阅读量132

点赞数

原文链接：http://www.cnblogs.com/SunnyYYN/p/6905814.html

版权

不同的浏览器需要不同的前缀
-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);
      }
    }

转载于:https://www.cnblogs.com/SunnyYYN/p/6905814.html

weixin_34167819

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3浏览器兼容

不同的浏览器需要不同的前缀-webkit chrome和safari-moz firefox-ms ie-o opera　　一个炫酷标题效果：HTML：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Ty...
复制链接

扫一扫