动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4708字，纯文字阅读大概需要7分钟。

内容图文

前面的话

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

漂浮的白云

【效果演示】

【简要介绍】

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

【主要代码】

.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;}

源码查看

旋转的星球

【效果演示】

【简要介绍】

　　旋转的星球主要通过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);}}

源码查看

正方体合成

【效果演示】

【简要介绍】

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

【代码演示】

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);}}

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);

源码查看

内容总结

以上是互联网集市为您收集整理的动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)_html/css_WEB-ITnose全部内容，希望文章能够帮你解决动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端