动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成) - 小火柴的蓝色理想

×

目录

[1]漂浮的白云 [2]旋转的星球 [3]正方体合成

前面的话

　　前面介绍过动画animation的详细用法，本文主要介绍动画animation的三个效果

 

漂浮的白云

【效果演示】

【简要介绍】

　　漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果

【主要代码】

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in1"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in2"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

源码查看

 

旋转的星球

【效果演示】

【简要介绍】

　　旋转的星球主要通过rotate()旋转函数来实现。实际上，蓝色的地球和黑色的月球并没有发生旋转，只是其父级旋转形成的视觉上的旋转效果

【代码演示】

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sunline"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sun"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="earthline"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="earth"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="moon"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

源码查看 

 

正方体合成

【效果演示】

【简要介绍】

　　该效果主要通过设置计算后的延迟时间来达到正方体的各个边顺序动画的效果。一次动画结束后，通过触发animationend事件重置animation-name来实现重复动画的效果

【代码演示】

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="list"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="list"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>

list.addEventListener('animationend',<span style="color: #0000ff;">function</span><span style="color: #000000;">(e){
    e </span>= e ||<span style="color: #000000;"> event;
    </span><span style="color: #0000ff;">var</span> target = e.target ||<span style="color: #000000;"> e.srcElement;
    </span><span style="color: #0000ff;">if</span>(target.nodeName == 'UL'<span style="color: #000000;">){
        list.style.animationName </span>= 'none'<span style="color: #000000;">;
        </span><span style="color: #0000ff;">var</span> children = list.getElementsByTagName('li'<span style="color: #000000;">);
        </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i = 0; i ){
            children[i].style.animationName = 'none'<span style="color: #000000;">;
        }
        setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            list.style.animationName </span>= 'rotate'<span style="color: #000000;">;
            </span><span style="color: #0000ff;">var</span> children = list.getElementsByTagName('li'<span style="color: #000000;">);
            </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i = 0; i ){
                children[i].style.animationName = 'in' + (i+1<span style="color: #000000;">);
            }        
        },</span>100<span style="color: #000000;">);        
    }
},</span><span style="color: #0000ff;">false</span>);

源码查看