首頁  >  文章  >  web前端  >  一個絢麗的CSS3動畫效果是如何實現的? (程式碼實例)

一個絢麗的CSS3動畫效果是如何實現的? (程式碼實例)

云罗郡主
云罗郡主轉載
2018-10-22 17:01:011615瀏覽

本篇文章帶給大家的內容是關於一個絢麗的CSS3動畫效果是如何實現的? (程式碼實例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

下面是引自一位前端大牛的一個程式碼範例,我們透過這個實例給大家展示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>php中文网</h1>
</body>
</html>

效果如圖:

一個絢麗的CSS3動畫效果是如何實現的? (程式碼實例)

分析:

看到這麼屌的效果,相信小夥伴們都驚呆了吧!

這個例子綜合了CSS3的許多技術,使用到了CSS3中的文字陰影text-shadow、變形效果transform、過渡效果transition以及動畫效果animation等。

以上就是對一個絢麗的CSS3動畫效果是如何實現的? (程式碼實例)的全部介紹,如果您想了解更多有關CSS3影片教學,請關注PHP中文網。


以上是一個絢麗的CSS3動畫效果是如何實現的? (程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:绿叶学习网。如有侵權,請聯絡admin@php.cn刪除