HTML动画，花飘动效果

2018-06-14 阅读：3069 分类：前端标签： style

html代码

<div id="banner">
        <img src="images/2018/fiveActive/banner_01.jpg" alt="">
        <a href="javascript:void(0)" onclick="openS();return false;" class="btn">
            <img src="images/2018/fiveActive/btn1_03.png" alt="">
        </a>
        <div class="hua hua1"><img src="images/2018/fiveActive/hua1.png" alt=""></div>
        <div class="hua hua2"><img src="images/2018/fiveActive/hua2.png" alt=""></div>
        <div class="hua hua3"><img src="images/2018/fiveActive/hua4.png" alt=""></div>
</div>

css代码：

/*banner*/
#banner {
        width: 100%;
    position: relative;
    overflow: hidden;
}

#banner > img {
        width: 100%;
    min-height: 340px;
}
#banner .btn{
    width:21%;
    position: absolute;
    left:39.5%;
    bottom:-10%;
    z-index:3;
}
.hua{
    position: absolute;
}
.hua1{
    width:5%;
    animation: dong1 6s linear  infinite ;
    -webkit-animation:dong1 6s linear infinite  ;
    -o-animation:dong1 6s linear  infinite ;
    -moz-animation:dong1 6s linear  infinite ;
}
.hua2{
    width:3%;
    animation: dong2 7s linear  infinite ;
    -webkit-animation:dong2 7s linear  infinite ;
    -o-animation:dong2 7s linear infinite  ;
    -moz-animation:dong2 7s linear  infinite ;
}
.hua3{
    width:6%;
    animation: dong3 8s linear  infinite ;
    -webkit-animation:dong3 8s linear infinite  ;
    -o-animation:dong3 8s linear infinite  ;
    -moz-animation:dong3 8s linear  infinite ;
}
/*动画一*/
@keyframes dong1{
    0% {left: 83%;top: 0;}
    20% {left: 70%;top: 11%;}
    40% {left: 54%;top: 25%;}
    60% {left: 37%;top: 36%;}
    80% {left: 16%;top: 46%;}
    100% {left: -10%;top: 54%;}
}
@-webkit-keyframes dong1{
    0% {left: 83%;top: 0;}
    20% {left: 70%;top: 11%;}
    40% {left: 54%;top: 25%;}
    60% {left: 37%;top: 36%;}
    80% {left: 16%;top: 46%;}
    100% {left: -10%;top: 54%;}
}
@-moz-keyframes dong1{
    0% {left: 83%;top: 0;}
    20% {left: 70%;top: 11%;}
    40% {left: 54%;top: 25%;}
    60% {left: 37%;top: 36%;}
    80% {left: 16%;top: 46%;}
    100% {left: -10%;top: 54%;}
}
@-o-keyframes dong1{
    0% {left: 83%;top: 0;}
    20% {left: 70%;top: 11%;}
    40% {left: 54%;top: 25%;}
    60% {left: 37%;top: 36%;}
    80% {left: 16%;top: 46%;}
    100% {left: -10%;top: 54%;}
}
/*动画二*/
@keyframes dong2{
    0% {left: 98%;top: 23%;}
    10% {left: 92%;top: 33%;}
    20% {left: 85%;top: 42%;}
    30% {left: 76.5%;top: 50%;}
    40% {left: 68%;top: 58%;}
    50% {left: 59%;top: 67%;}
    60% {left: 48%;top: 74.6%;}
    70% {left: 37%;top: 83%;}
    80% {left: 24%;top: 88%;}
    90% {left: 12%;top: 94%;}
    100% {left: -5%;top: 98%;}
}
@-webkit-keyframes dong2{
    0% {left: 98%;top: 23%;}
    10% {left: 92%;top: 33%;}
    20% {left: 85%;top: 42%;}
    30% {left: 76.5%;top: 50%;}
    40% {left: 68%;top: 58%;}
    50% {left: 59%;top: 67%;}
    60% {left: 48%;top: 74.6%;}
    70% {left: 37%;top: 83%;}
    80% {left: 24%;top: 88%;}
    90% {left: 12%;top: 94%;}
    100% {left: -5%;top: 98%;}
}
@-moz-keyframes dong2{
    0% {left: 98%;top: 23%;}
    10% {left: 92%;top: 33%;}
    20% {left: 85%;top: 42%;}
    30% {left: 76.5%;top: 50%;}
    40% {left: 68%;top: 58%;}
    50% {left: 59%;top: 67%;}
    60% {left: 48%;top: 74.6%;}
    70% {left: 37%;top: 83%;}
    80% {left: 24%;top: 88%;}
    90% {left: 12%;top: 94%;}
    100% {left: -5%;top: 98%;}
}
@-o-keyframes dong2{
    0% {left: 98%;top: 23%;}
    10% {left: 92%;top: 33%;}
    20% {left: 85%;top: 42%;}
    30% {left: 76.5%;top: 50%;}
    40% {left: 68%;top: 58%;}
    50% {left: 59%;top: 67%;}
    60% {left: 48%;top: 74.6%;}
    70% {left: 37%;top: 83%;}
    80% {left: 24%;top: 88%;}
    90% {left: 12%;top: 94%;}
    100% {left: -5%;top: 98%;}
}

/*动画三*/
@keyframes dong3{
    0% {left: 39%;top: 75.8%;}
    50% {left: 18%;top: 86.5%;}
    100% {left: -10%;top: 96%;}
}
@-webkit-keyframes dong3{
    0% {left: 39%;top: 75.8%;}
    50% {left: 18%;top: 86.5%;}
    100% {left: -10%;top: 96%;}
}
@-moz-keyframes dong3{
    0% {left: 39%;top: 75.8%;}
    50% {left: 18%;top: 86.5%;}
    100% {left: -10%;top: 96%;}
}
@-o-keyframes dong3{
    0% {left: 39%;top: 75.8%;}
    50% {left: 18%;top: 86.5%;}
    100% {left: -10%;top: 96%;}
}