CSS3效果:波浪效果

2018-06-24 01:22:15来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

实现效果

如图所示:

首先得准备三张图,一张是浅黄色的背景图loading_bg.png,一张是深红色的图loading.png,最后一张为bolang.png。

css代码

body{background:#ffe894;}
.loading_bg{width:113px; height:111px;background:url(loading_bg.png) no-repeat left top;margin:30px auto;}
.loading{width:113px; height:111px;position:relative; -webkit-mask-image:url(loading.png);}
.show{
    width:120px; height:187px; position:absolute; left:0; top:40px;
    animation:sploosh 3s ease-in-out both infinite; 
    -webkit-animation:sploosh 3s ease-in-out both infinite;
    background-image: url(bolang.png);
}
.show_01{-webkit-animation-delay: -0.8s;  animation-delay: -0.8s; opacity:0.2;}
.show_02{-webkit-animation-delay: -1.6s;  animation-delay: -1.6s; opacity:0.4;}
.show_03{-webkit-animation-delay: -2.4s;  animation-delay: -2.4s; opacity:0.6;}
.show_04{-webkit-animation-delay: -3.2s;  animation-delay: -3.2s; opacity:0.8;}

@-webkit-keyframes sploosh{
  0% {background-position: 0 bottom;}
  100% {background-position: 200px bottom;}
}
@keyframes sploosh{
  0% {background-position: 0 bottom;}
  100% {background-position: 200px bottom;}
}

html代码

<div class="loading_bg">
    <div class="loading">
        <div class="show_01 show"></div>
        <div class="show_02 show"></div>
        <div class="show_03 show"></div>
        <div class="show_04 show"></div>
    </div>
</div>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:flex兼容性问题

下一篇:2017年最好的6个WEB前端开发手册下载