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%;} }
文章评论(0)