HTML动画,花飘动效果

2018-06-14   阅读:3584   类型:前端   分类:style    标签: 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%;}
}


腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/43.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×