美文网首页
CSS3动画

CSS3动画

作者: AnnQi | 来源:发表于2017-09-01 20:46 被阅读0次

动画属性

动画属性.png

Demo 小实例

代码布局
<div class="boxOne">
    <ul class="imgBox">
        <li class="img img1"></li>
        <li class="img img2"></li>
        <li class="img img3"></li>
        <li class="img img4"></li>
    </ul>
    <div class="boxTwo">
        <ul class="iconBox">
            <li><div class="icon icon1"></div></li>
            <li><div class="icon icon2"></div></li>
            <li><div class="icon icon3"></div></li>
            <li><div class="icon icon4"></div></li>
        </ul>
    </div>
</div>
代码样式清单:
<style>
        *{margin: 0;padding: 0}
        li{
            list-style: none;
        }
        .boxOne{
            margin: 0 auto;
            width:247px;
            height: 350px;
            position: relative;
        }
        .imgBox,.img{
            width:247px;
            height: 350px;
        }
        .img + .img{
            opacity:0;
        }
        .img{
            width:100%;
            position:absolute;
            animation-timing-function: linear;
            animation-name:fade;
            animation-iteration-count: infinite;
            background-size:100%;
        }

        /*设置动画,请根据实际需要修改秒数*/
        .img,.icon{
            animation-duration: 20s;
        }
        .img1,.icon1{
            animation-delay: -1s;
        }
        .img2,.icon2{
            animation-delay:3s;
        }
        .img3,.icon3{
            animation-delay:7s;
        }
        .img4,.icon4{
            animation-delay: 11s;
        }
        @keyframes fade {
          0%{
              opacity:0;
              z-index:3;
          }
           5%{
             opacity:1;
              z-index: 2;
         }
         20%{
            opacity:1;
             z-index:1;
          }
         50%{
             opacity:0;
             z-index:0;
         }     
        100%{
             opacity:0;
              z-index:0;
         }
     }

        /*设置背景,响应式请利用媒体查询根据断点修改路径*/
        .img1{
            background-image: url("images/image_1.png");
        }
        .img2{
            background-image: url("images/image_2.png");
        }
        .img3{
            background-image: url("images/image_3.png");
        }
        .img4{
            background-image: url("images/image_4.png");
        }

        .iconBox:after {
            content: "";
            display: table;
            clear: both;
        }
        /*设置轮播焦点的位置*/
        .boxTwo{
            position:absolute;
            z-index:7;
            bottom: 4%;
            left: 40%;

        }
        .boxTwo li{
            width:10px;
            height:10px;
            border-radius:50%;
            float:left;
            margin-right:10px;
            background:#fff;
        }
        .icon{
            width:100%;
            height:100%;
            border-radius:inherit;
            animation-timing-function: linear;
            animation-name:fade;
            animation-iteration-count: infinite;
        }

        .icon2,.icon3,.icon4{
            opacity: 0;
        }
        
        /*设置当前图片焦点的颜色*/
        .icon{
            background: #51B1D9;
        }
    </style>

相关文章

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

  • CSS3 动画

    CSS3 动画CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。 ...

  • CSS3 动画

    动画属性 动画(animation)是CSS3新增的属性,动画属性可以为元素创建动画,CSS3以前在网页上实现动画...

  • css3动画

    css3动画 CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的...

  • 纯CSS3绘制的逼真,呆萌,超酷的CSS3动画

    纯CSS3人物行走动画 逼真炫酷CSS3动画 CSS3实在是太强大了,今天分享的CSS3动画非常神奇,它可以模拟人...

  • 关于js动画和css3动画的差异性你了解吗?请简单谈一下

    css3动画:css3之后添加了transform动画计算函数,所以实现动画更为简单方便,并且transform矩...

  • 过度动画

    css3过度动画 css3都有哪些新增的东西 : 过度,动画,阴影,圆角; transition : width ...

  • 动画知识点

    css3过度动画 css3都有哪些新增的东西 : 过度,动画,阴影,圆角; transition : width ...

网友评论

      本文标题:CSS3动画

      本文链接:https://www.haomeiwen.com/subject/medkjxtx.html