首页 > 代码库 > CSS3动画（二）：波浪效果
CSS3动画（二）：波浪效果
实现效果
如图所示：
首先得准备三张图，一张是浅黄色的背景图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>
CSS3动画（二）：波浪效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。