css3应用animation特性完成酷炫实际效果(强烈推荐

日期：2021-01-20 类型：科技新闻我要分享

关键词：html网页制作，php网页制作，网页设计稿，网页编辑工具，学生网页设计模板

animation-name 动漫名字，能够有好几个值，用逗号分隔，表明关联了好几个动漫

animation-name特性为动漫特定1个名字

animation-name适配流行的访问器，但是還是必须加前缀去适配

animation-name有两个特性值，各自是keyframename和none

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    div{    
        width:800px;
        height:800px;
        margin:0 auto;    
    }
    .container{
        position: relative;
    }
    .inner, .middle, .outer, .pic{
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;        
    }
    .inner{
        background:url(source/circle_inner.jpg) center no-repeat;
        animation-name:circle_inner;
    }
    .middle{
        background:url(source/circle_middle.jpg) center no-repeat;
        animation-name:circle_middle;
    }
    .outer{
        background:url(source/circle_outer.jpg) center no-repeat;
        animation-name:circle_outer;
    }
    .pic{
        background:url(source/pic.jpg) center no-repeat;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="inner"></div>
        <div class="middle"></div>
        <div class="outer"></div>
        <div class="pic"></div>
    </div>
</body>
</html>

animation-duration 动漫不断時间默认设置是0

animation-timing-function 动漫時间涵数

animation-delay 动漫延迟时间時间

animation-delay 特性界定动漫何时刚开始，企业能够是秒（s）或毫秒（ms），容许负值，⑵s使动漫立刻刚开始，但会绕过2s进到动漫

animation-iteration-count 动漫循环系统次数

animation-iteration-count: number | infinite 默认设置为1

animation-direction: normal | reverse | alternate | alternate-reverse 一切正常；反方向；正反更替；总之更替

alternate 和 alternate-reverse ，假如animation-itreation-count 并不是设定成 infinite ，则只会实行1次就终止

animation-fill-mode 动漫延迟时间未实行时，或动漫实行结束后的滞留情况（动漫不可以设定为循环系统，不然没法终止）

animation-fill-mode: none | forwards | backwards | both 无完毕情况刚开始情况看状况

animation-play-state: running | paused 动漫运作情况：运作 | 中止

animation 简写

animation: name duration timing-function delay iteration-count direction fill-mode play-state

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    div{    
        width:800px;
        height:800px;
        margin:0 auto;    
    }
    .container{
        position: relative;
        -webkit-transform-style:preserve⑶d;
           -moz-transform-style:preserve⑶d;
            -ms-transform-style:preserve⑶d;
             -o-transform-style:preserve⑶d;
                transform-style:preserve⑶d;
    }
    .inner, .middle, .outer, .pic{
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;        
    }
    .container:hover div{
        -webkit-animation-play-state:paused;
           -moz-animation-play-state:paused;
            -ms-animation-play-state:paused;
             -o-animation-play-state:paused;
                animation-play-state:paused;
    }
    .inner{
        background:url(source/circle_inner.jpg) center no-repeat;    
        /*循环系统*/
        -webkit-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
           -moz-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
            -ms-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
             -o-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
                animation:circle_inner 10s ease-in-out 1s infinite alternate running;    
        /*不循环系统，填充实际效果*/
        /*-webkit-animation:circle_inner 10s ease-in-out 1s forwards running;
           -moz-animation:circle_inner 10s ease-in-out 1s forwards running;
            -ms-animation:circle_inner 10s ease-in-out 1s forwards running;
             -o-animation:circle_inner 10s ease-in-out 1s forwards running;
                animation:circle_inner 10s ease-in-out 1s forwards running;*/
    }
    .middle{
        background:url(source/circle_middle.jpg) center no-repeat;
        -webkit-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
           -moz-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
            -ms-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
             -o-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
                animation:circle_middle 10s ease-in-out 1s infinite alternate running;    
    }
    .outer{
        background:url(source/circle_outer.jpg) center no-repeat;
        -webkit-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
           -moz-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
            -ms-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
             -o-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
                animation:circle_outer 10s ease-in-out 1s infinite alternate running;    
    }
    .pic{
        background:url(source/pic.jpg) center no-repeat;
    }
    @keyframes circle_inner{
        0%{ transform:rotateX(0deg); }
        50%{ transform:rotateX(90deg); }
        100%{ transform:rotateX(360deg); }
    }
    @keyframes circle_middle{
        0%{ transform:rotateY(0deg); }
        50%{ transform:rotateY(90deg); }
        100%{ transform:rotateY(360deg); }
    }
    @keyframes circle_outer{
        0%{ transform:rotateZ(0deg); }
        50%{ transform:rotateZ(90deg); }
        100%{ transform:rotateZ(360deg); }
    }
</style>
</head>
<body>
    <div class="container">
        <div class="inner"></div>
        <div class="middle"></div>
        <div class="outer"></div>
        <div class="pic"></div>
    </div>
</body>
</html>

动漫特性提升：

用position-fixed替代background-attachment

带照片的元素放在伪元素中

will-change

适配性IE13+ 觉得能够舍弃了……

向下提醒箭头实际效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    div{    
        width:30px;
        height:30px;
        position: fixed;
        left:0;
        right:0;
        bottom:100px;
        margin:0 auto;    
        cursor:pointer;
        -webkit-transform:rotate(90deg);
           -moz-transform:rotate(90deg);
            -ms-transform:rotate(90deg);
             -o-transform:rotate(90deg);
                transform:rotate(90deg);
        -webkit-animation:upDown 2s ease-in-out infinite;
          -moz-animation:upDown 2s ease-in-out infinite;
           -ms-animation:upDown 2s ease-in-out infinite;
            -o-animation:upDown 2s ease-in-out infinite;
               animation:upDown 2s ease-in-out infinite;
    }
    @-webkit-keyframes upDown{
        0%{ bottom:100px; }
        50%{ bottom:80px; }
        100%{ bottom:100px; }
    }
    @-moz-keyframes upDown{
        0%{ bottom:100px; }
        50%{ bottom:80px; }
        100%{ bottom:100px; }
    }
    @-ms-keyframes upDown{
        0%{ bottom:100px; }
        50%{ bottom:80px; }
        100%{ bottom:100px; }
    }
    @-o-keyframes upDown{
        0%{ bottom:100px; }
        50%{ bottom:80px; }
        100%{ bottom:100px; }
    }
    @keyframes upDown{
        0%{ bottom:100px; }
        50%{ bottom:80px; }
        100%{ bottom:100px; }
    }
</style>
</head>
<body>
    <div>></div>
</body>
</html>

总结

以上所述是网编给大伙儿详细介绍的css3应用animation特性完成酷炫实际效果，期待对大伙儿有一定的协助！

上一篇：css3 flex完成div內容水平竖直垂直居中的几种方式返回下一篇：没有了