HTML之动画

来源：互联网发布：淘宝如何改最低折扣编辑：程序博客网时间：2024/05/29 18:09

1.关键帧动画

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            .div2{                margin: 100px 200px;                width: 200px;                height: 200px;                background: black;                position: relative;                animation: move 5s infinite;            }            .div1{                height: 100px;                width: 100px;                margin: 200px auto;                line-height: 100px;            }            @keyframes move{                /*from{left: 0px;top: 0px;}                to{left: 500px;top: 0px;background: white;}*/                0%{                    left: 0px;top: 0px;                }                25%{                    left: 500px;top: 0px;background:  white;                }                50%{                    left: 500px;top: 500px;background:  white;                }                75%{                    left: 0px;top: 500px;background:  white;                }                100%{                    left: 0px;top: 0px;background:  white;                }            }            /*@keyframes:关键帧;            move:动画名称;            {}需要改变的样式;            from/0%:开始值;            to/100%:结束值;*/        </style>    </head>    <body>        <div class="div1"><img src="img/mp33341098_1443159964766_1_th.jpeg"/></div>        <div class="div2"><img src="img/ATWJ$F_Z)MZE%W[[AD37{FU.jpg"/></div>    </body></html>

2.animation

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            @keyframes changcolor{                from{                    background: dodgerblue;                    margin-left: 0px;                    transform: rotateZ(0deg);                }                to{                    background: blueviolet;                    margin-left: 700px;                    transform: rotateZ(360deg);                }            }            div{                text-align: center;                font-family: "微软雅黑";                font-size: 30px;                height: 100px;                width: 300px;                /*animation: changcolor 0.5s infinite;*/                /*动画名称*/                animation-name: changcolor;                /*动画持续时间*/                animation-duration: 1s;                /*动画结束后的状态  指停留原地还是返回到初始位置*/                animation-fill-mode:  forwards;                /*动画的延迟时间*/                animation-delay: 0.5s;                /*运动的速度曲线*/                animation-timing-function: ease-in;                /*动画是否执行*/                animation-play-state: paused;                /*动画循环执行的次数*/                animation-iteration-count: 3;                /*动画是否反向播放*/                animation-direction: alternate;                animation: changcolor 1s 0.5s;            }            div:hover{                animation-play-state: running;            }        </style>    </head>    <body>        <div>同城交友加V</div>    </body></html>

3.动画中的属性

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            .big{                width: 600px;                border: 1px solid dodgerblue;            }            #div1,#div2,#div3,#div4,#div5{                text-align: center;                line-height: 100px;                font-family: "微软雅黑";                width: 100px;                height: 100px;                background: cornflowerblue;                color: white;                position: relative;                /*infinite持续播放*/                animation: move 5s infinite;            }            #div1{                animation-timing-function: linear;            }            #div2{                animation-timing-function: ease;            }            #div3{                animation-timing-function: ease-in;            }            #div4{                animation-timing-function: ease-out;            }            #div5{                animation-timing-function: ease-in-out;            }            @keyframes move{                from{left: 0;}                to{left: 500px;}            }        </style>    </head>    <body>        <div class="big">            <div id="div1">linear</div>            <div id="div2">ease</div>            <div id="div3">ease-in</div>            <div id="div4">ease-out</div>            <div id="div5">ease-in-out</div>        </div>    </body></html>

4.应用第三方动画库

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            div{                width: 200px;                height: 100px;                background: dodgerblue;            }            .div1{                margin: 0 100px;                animation-delay: 0.5s;                animation-iteration-count: 3;                animation-direction: alternate;            }        </style>        <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>    </head>    <body>        <div class="animated hinge div1">        </div>    </body></html>

5.圆圈加载

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            .loader{                margin: 0 auto;                width: 30%;                height: 200px;                border: 1px solid black;            }            .loader-1{                position: relative;                top: 40%;                left: 50%;                /*border: 1px solid;*/            }            .loader-1 i{                display: block;                width: 15px;                height: 15px;                border-radius: 50%;                background: dodgerblue;                position: absolute;            }            .loader-1 i:nth-child(1){                top: 25px;                left: 0;                animation: loading 1s ease 0s infinite;            }            .loader-1 i:nth-child(2){                top: 17px;                left: 17px;                animation: loading 1s ease -0.12s infinite;            }            .loader-1 i:nth-child(3){                top: 0px;                left: 25px;                animation: loading 1s ease -0.24s infinite;            }            .loader-1 i:nth-child(4){                top: -17px;                left: 17px;                animation: loading 1s ease -0.36s infinite;            }            .loader-1 i:nth-child(5){                top: -25px;                left: 0px;                animation: loading 1s ease -0.48s infinite;            }            .loader-1 i:nth-child(6){                top: -17px;                left: -17px;                animation: loading 1s ease -0.6s infinite;            }            .loader-1 i:nth-child(7){                top: 0px;                left: -25px;                animation: loading 1s ease -0.72s infinite;            }            .loader-1 i:nth-child(8){                top: 17px;                left: -17px;                animation: loading 1s ease -0.84s infinite;            }            @keyframes loading{                50%{                    transform: scale(0.4);opacity: 0.3;                }                100%{                    transform: scale(1);opacity: 1;                }            }        </style>    </head>    <body>        <div class="loader">            <div class="loader-1">                <i></i>                <i></i>                <i></i>                <i></i>                <i></i>                <i></i>                <i></i>                <i></i>            </div>        </div>    </body></html>

6.动画条

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            .loader{                margin: 0 auto;                width: 30%;                height: 200px;                border: 1px solid dodgerblue;                text-align: center;                line-height: 200px;            }            .loader-2 i{                display: inline-block;                width: 4px;                height: 50px;                border-radius: 2px;                background: dodgerblue;                margin: 0 1px;            }            .loader-2 i:nth-child(1){                animation: loading 1s ease-in 0.1s infinite;            }            .loader-2 i:nth-child(2){                animation: loading 1s ease-in 0.2s infinite;            }            .loader-2 i:nth-child(3){                animation: loading 1s ease-in 0.3s infinite;            }            .loader-2 i:nth-child(4){                animation: loading 1s ease-in 0.4s infinite;            }            .loader-2 i:nth-child(5){                animation: loading 1s ease-in 0.5s infinite;            }            @keyframes loading{                0%{                    transform: scaleY(1);                }                50%{                    transform: scaleY(0.4);opacity: 1;                }                100%{                    transform: scaleY(1);opacity: 1;                }            }        </style>    </head>    <body>        <div class="loader">            <div class="loader-2">                <i></i>                <i></i>                <i></i>                <i></i>                <i></i>            </div>        </div>    </body></html>

具体代码实现的现象，请用火狐浏览器打开查看。

阅读全文

0 0