html css 波浪,CSS进阶篇--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代码

这儿提供一个网盘下载地址，请点击：《CSS3动画：波浪效果》