アニメーションアニメーションの３つの応用（浮かぶ白い雲、回転する惑星、立方体合成）_html/css_WEB-ITnose

× 目次 [1] 浮かぶ白い雲 [2] 回転する惑星 [3] 立方体合成

前の言葉

この記事ではアニメーションの3つの効果を中心に以前紹介しました。アニメーション

白い雲が浮かぶ

【エフェクトデモンストレーション】

【簡単な紹介】

白い雲が浮かぶは、主に遠くの白い雲と近くの白い雲を通して三次元の浮遊効果を実現します。遠景と近景にそれぞれ2枚の背景画像を使用し、背景の位置を変えることで白い雲の動きの効果を、異なるアニメーション時間を設定することでインターレースの浮遊効果を実現しています

[メインコード]

.box{    position: relative;    height: 300px;    width: 500px;}    .in1,.in2{    position: absolute;    height: 100%;    width: 100%;    background-size:cover;    animation: move 100s infinite linear alternate;}@keyframes move{    100%{background-position: 500% 0;}}.in1{    background-image: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud.png');   }.in2{    background-image: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud1.png');    animation-duration: 10s;}

<div class="box">    <div class="in1"></div>    <div class="in2"></div></div>

ソースコードを見る

回転惑星

【効果デモ】

【簡単な紹介】

回転惑星は主に、 rotate() 回転関数。実際、青い地球と黒い月は回転せず、親の回転によって引き起こされる視覚的な回転効果にすぎません

[コードのデモ]

.box{    transform: scale(0.5);    position: relative;    padding: 1px;    height: 300px;    width: 300px;}    .sunline{    position:relative;    height: 400px;    width: 400px;    border: 2px solid black;    border-radius: 50%;    margin: 50px 0 0 50px;    display: flex;    animation: rotate 10s infinite linear;}.sun{    height: 100px;    width: 100px;    margin: auto;    background-color: red;    border-radius: 50%;    box-shadow: 5px 5px 10px red,-5px -5px 10px red,5px -5px 10px red,-5px 5px 10px red;}.earthline{    position: absolute;    right: 0;    top: 50%;    height: 200px;    width: 200px;    margin: -100px -100px 0 0;    border: 1px solid black;    border-radius: 50%;    display: flex;    animation: rotate 2s infinite linear;}.earth{    margin: auto;    height: 50px;    width: 50px;    background-color: blue;    border-radius: 50%;}.moon{    position: absolute;    left: 0;    top: 50%;    height: 20px;    width: 20px;    margin: -10px 0 0 -10px;    background-color: black;    border-radius: 50%;}@keyframes rotate{    100%{transform:rotate(360deg);}}

<div class="box">    <div class="sunline">        <div class="sun"></div>        <div class="earthline">            <div class="earth"></div>            <div class="moon"></div>        </div>    </div></div>

ソースコードを表示

キューブ合成

【エフェクトデモンストレーション】

【簡単な紹介】

このエフェクトは主に、計算された遅延時間を設定することで、立方体の各面の連続アニメーションのエフェクトを実現します。アニメーションが終了したら、animationend イベントをトリガーしてアニメーション名をリセットし、アニメーションを繰り返す効果を実現します

[コードのデモ]

ul{    margin: 0;    padding: 0;    list-style: none;}.box{    height: 100px;    width: 100px;    perspective: 500px;    margin: 50px 0 0 50px;}    .list{    position: relative;    height: 100px;    width: 100px;    background-color: blue;    transform-style: preserve-3d;    transform-origin: 0 0 0;    animation: rotate 1s  10s 3 both linear;}.in{    position: absolute;    height: 100px;    width: 100px;}.list .in:nth-child(6){    background-color: pink;    transform-origin: top;    animation: in6 2s both;}.list .in:nth-child(5){    background-color: lightgreen;    transform-origin: right;    animation: in5 2s 2s both;}.list .in:nth-child(4){    background-color: lightblue;    transform-origin: bottom;    animation: in4 2s 4s both;}.list .in:nth-child(3){    background-color: lightcoral;    transform-origin: left;    animation: in3 2s 6s both;}.list .in:nth-child(2){    background-color: lightcyan;    animation: in2 2s 8s both;}.list .in:nth-child(1){background-color: lightsalmon;}.box:hover .list{animation-play-state: paused;}.box:hover .in{animation-play-state: paused;}@keyframes in6{100%{transform: rotateX(90deg);}}@keyframes in5{100%{transform: rotateY(90deg);}}@keyframes in4{100%{transform: rotateX(-90deg);}}@keyframes in3{100%{transform: rotateY(-90deg);}}@keyframes in2{100%{transform: translateZ(100px);}}@keyframes rotate{100%{transform: rotate3d(1,1,1,360deg);}}

<div class="box">    <ul class="list" id="list">        <li class="in"></li>        <li class="in"></li>        <li class="in"></li>        <li class="in"></li>        <li class="in"></li>        <li class="in"></li>    </ul></div>

list.addEventListener('animationend',function(e){    e = e || event;    var target = e.target || e.srcElement;    if(target.nodeName == 'UL'){        list.style.animationName = 'none';        var children = list.getElementsByTagName('li');        for(var i = 0; i < children.length;i++){            children[i].style.animationName = 'none';        }        setTimeout(function(){            list.style.animationName = 'rotate';            var children = list.getElementsByTagName('li');            for(var i = 0; i < children.length;i++){                children[i].style.animationName = 'in' + (i+1);            }                },100);            }},false);

ソースコードを表示する