wave footer
<body>
<footer>
<div class="wave">
<div class="w wave1"></div>
<div class="w wave2"></div>
<div class="w wave3"></div>
</div>
<ul class="social_icon">
<li>
<a href="#">
<ion-icon name="musical-notes-outline"></ion-icon>
</a>
</li>
<li>
<a href="#">
<ion-icon name="sunny-outline"></ion-icon>
</a>
</li>
<li>
<a href="#">
<ion-icon name="telescope-outline"></ion-icon>
</a>
</li>
</ul>
<ul class="menu">
<li><a href="#">music</a></li>
<li><a href="#">sunshine</a></li>
<li><a href="#">look</a></li>
</ul>
<p>copyright: Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</footer>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
/*初始化 start*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,select,button,textarea,p,blockquote,table,th,td { margin:0; padding:0; border: 0;}
body { background:#fff; color:#333; font-size:14px; line-height: 1; font-family: Verdana, Arial, Helvetica, sans-serif; -webkit-text-size-adjust:100%;}
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var, i { font-style:normal; font-weight:normal;}
a,a:hover { color:#333; text-decoration:none; }
img { border:none; vertical-align:middle}
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; outline: none; resize: none;}
table { border-collapse:collapse;border-spacing:0}
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }
/*初始化 end*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
align-items: flex-end;
min-height: 100vh;
background-color: #333;
}
footer{
position: relative;
width: 100%;
background-color: #2283ff;
height: 200px;
padding: 20px 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
footer .social_icon, footer .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
}
footer .social_icon li a{
font-size: 20px;
color: #fff;
margin: 0 10px;
display: inline-block;
transition: .3s;
}
footer .social_icon li a:hover{
transform: translateY(-10px);
}
footer .menu li a{
font-size: 14px;
color: #fff;
margin: 0 10px;
display: inline-block;
opacity: 0.75;
}
footer .menu li a:hover{
opacity: 1;
}
footer p{
color: #fff;
text-align: center;
margin-top: 15px;
margin-bottom: 10px;
font-size: 14px;
}
footer .w{
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 30px;
background-image: url(../img/wave.png);
background-size: 1000px 30px;
}
footer .wave1{
z-index: 1000;
opacity: 1;
bottom: 0;
animation: waving 10s linear infinite;
}
footer .wave2{
z-index: 999;
opacity: 0.5;
bottom: 5px;
animation: waving2 10s linear infinite;
}
footer .wave3{
z-index: 998;
opacity: 0.7;
bottom: 10px;
animation: waving2 6s linear infinite;
}
@keyframes waving{
0%{
/*
与.w background-size: 1000px同步;
否则当动画background-position-x为0时会突然跳转
*/
background-position-x: 1000px;
}
100%{
background-position-x: 0px;
}
}
@keyframes waving2{
0%{
background-position-x: 0px;
}
100%{
background-position-x: 1000px;
}
}
wave.png
网友评论