Heim > Artikel > Web-Frontend > Wie erzielt man einen wunderschönen CSS3-Animationseffekt? (Codebeispiel)

Wie erzielt man einen wunderschönen CSS3-Animationseffekt? (Codebeispiel)

云罗郡主nach vorne: 2018-10-22 17:01:011575Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man einen wunderschönen CSS3-Animationseffekt erzielt. (Codebeispiel) hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Das Folgende ist ein Codebeispiel, zitiert von einem Frontend-Experten. Wir verwenden dieses Beispiel, um Ihnen den tollen Effekt von CSS3 zu zeigen:

Beispiel:

<!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>

Der Effekt ist wie folgt Bild:

Wie erzielt man einen wunderschönen CSS3-Animationseffekt? (Codebeispiel)

Analyse:

So einen tollen Effekt zu sehen, wird sicher jeder schockieren!

Dieses Beispiel kombiniert viele Technologien von CSS3 und verwendet Textschatten, Transformation, Übergang und Animation in CSS3.

Wie erzielt man oben einen wunderschönen CSS3-Animationseffekt? (Codebeispiele) Vollständige Einführung. Wenn Sie mehr über CSS3-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie erzielt man einen wunderschönen CSS3-Animationseffekt? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:绿叶学习网. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Detaillierte grafische Erklärung der Unterschiede zwischen RGBA, RGB und Deckkraft in CSSNächster Artikel：Detaillierte grafische Erklärung der Unterschiede zwischen RGBA, RGB und Deckkraft in CSS

In Verbindung stehende Artikel

Mehr sehen