給我一朵浪花，還你一片波濤
css3的animation是個(gè)常用的屬性嚎花，以下我簡(jiǎn)單地實(shí)現(xiàn)了一個(gè)大海的波浪效果榆鼠，這次簡(jiǎn)單的實(shí)現(xiàn)用到了一個(gè)小小的波浪圖片素材卖宠，下次再實(shí)現(xiàn)純代碼版本旁理。
spindrift.png
//html部分只需要一個(gè)標(biāo)簽
<div class="sea"></div>
重點(diǎn)是css部分
html,body{
width:100%;
height:100%;
}
.sea{
height:100%;
width:100%;
background:url('https://upload-images.jianshu.io/upload_images/2280442-df376d3a7602168c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620') repeat-x;
background-color:#6EEFFF;
animation:mymove 2s linear infinite;
}
.sea:before{
content:'';
width:100%;
height:207px;
position:absolute;
left:0;
top:20px;
background:url('https://upload-images.jianshu.io/upload_images/2280442-df376d3a7602168c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620');
animation:mymove1 4s linear infinite;
opacity:0.6;
}
.sea:after{
content:'';
width:100%;
height:207px;
position:absolute;
left:0;
top:40px;
opacity:0.7;
background:url('https://upload-images.jianshu.io/upload_images/2280442-df376d3a7602168c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620');
animation:mymove1 3s linear infinite;
}
@keyframes mymove{
0%{
background-position:0 100px;
}
100%{
background-position:-620px 100px;
}
}
@-webkit-keyframes mymove{
0%{
background-position:0 100px;
}
100%{
background-position:-620px 100px;
}
}
@keyframes mymove1{
0%{
background-position:0 0;
}
100%{
background-position:-620px 0;
}
}
@-webkit-keyframes mymove1{
0%{
background-position:0 0;
}
100%{
background-position:-620px 0;
}
}
效果預(yù)覽：https://jsfiddle.net/xiaowoniu/qkg3o1f2/64/
關(guān)鍵詞：偽元素before，after撤师，css3 animation
spindrift.png
