无聊写的一个小Demo，方便自己以后使用
-
-
<html lang=“en”>
-
<head>
-
<meta charset=“UTF-8”>
-
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
-
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
-
<title>水波浪Demo </title>
-
</head>
-
<style>
-
body {
-
margin: 0;
-
padding: 0;
-
}
-
-
#container {
-
width: 100vw;
-
height: 100vh;
-
overflow: hidden;
-
}
-
.wave-wrapper{
-
width: 100%;
-
height: 80px;
-
position: relative;
-
}
-
.wave {
-
width: 100%;
-
height: 60px;
-
position: absolute;
-
}
-
-
.wave1 {
-
bottom: 20px;
-
background: url( ’./img/wave.png’);
-
background-position: 0 0;
-
opacity: 0.4;
-
animation: moveLeft 7s linear infinite;
-
}
-
-
.wave2 {
-
bottom: 10px;
-
background: url( ’./img/wave.png’);
-
background-position: 0 0;
-
opacity: 0.6;
-
animation: moveRight 10s linear infinite;
-
}
-
-
.wave3 {
-
bottom: 0;
-
background: url( ’./img/wave.png’);
-
background-position: 0 0;
-
opacity: 1;
-
animation: moveLeft 15s linear infinite;
-
}
-
-
.content-wrapper {
-
width: 100%;
-
height: calc(100vh - 60px);
-
background-color: #009fd9;
-
}
-
-
@ keyframes moveLeft {
-
0% {
-
background-position-x: 0;
-
}
-
100% {
-
background-position-x: 1920px;
-
}
-
}
-
@ keyframes moveRight {
-
0% {
-
background-position-x: 0;
-
}
-
100% {
-
background-position-x: - 1920px;
-
}
-
}
-
</style>
-
<body>
-
<div id=“container”>
-
<div class=“wave-wrapper”>
-
<div class=“wave wave1”> </div>
-
<div class=“wave wave2”> </div>
-
<div class=“wave wave3”> </div>
-
</div>
-
<div class=“content-wrapper”> </div>
-
</div>
-
</body>
-
</html>
图片需要自己准备一张类似下图的均匀的png图片，也可以去下载我的。点击下载 （csdn更新积分制度后好坑啊）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
