简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

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

WBOY
发布： 2016-05-20 16:50:49
原创
1582 人浏览过
×
目录
[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>);
登录后复制

源码查看

相关标签：
动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成) - 小火柴的蓝色理想
来源：php.cn
上一篇：select跳转 - cag2050 下一篇：史上最全前端面试题(含答案) - 1565783227
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
2
1793
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
10
1935
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
1649
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
1552
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
1586
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！