<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>页脚液态冒泡特效</title>
<link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.min.css" />
</head>
<style>
body{
margin: 0;
padding: 0;
font-family: "kaiti";
}
footer{
margin-top: 400px;
}
.footer-content{
background-color: pink;
}
.footer-content>div{
max-width: 1200px;
margin: 0 auto;
padding:50px 0;
}
.contact-msg{
width: 300px;
list-style-type: none;
margin: 0;
padding:0;
}
.contact-msg li{
margin: 10px 0;
}
.wave-box img{
display: block;
width: 100%;
}
.wave-box{
position: relative;
overflow: hidden;
}
.wave-list1{
animation: yidong 10s infinite linear;
}
.wave-list2{
position: absolute;
top: 0;
animation: yidong 10s 5s infinite linear;
transform:translateX(100%);
}
@keyframes yidong{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}
.wave-list3{
position: absolute;
top: 0;
animation: yidong1 10s linear, yidong 20s 10s infinite linear;
}
.wave-list4{
position: absolute;
top: 0;
animation: yidong 20s infinite linear;
transform:translateX(100%);
}
@keyframes yidong1{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-100%);
}
}
.contact-msg li i{
display: inline-block;
text-align: center;
width: 16px;
margin-right: 7px;
vertical-align: middle;
}
.contact-msg li span{
display: inline-block;
width: calc(100% - 35px);
vertical-align: top;
margin-top: 5px;
line-height: 1.5em;
}
</style>
<body>
<footer>
<div class="wave-box">
<div class="wave-list1">
<img src="../images/wave_02.png">
</div>
<div class="wave-list2">
<img src="../images/wave_02.png">
</div>
<div class="wave-list3">
<img src="../images/wave_01.png">
</div>
<div class="wave-list4">
<img src="../images/wave_01.png">
</div>
</div>
<div class="footer-content">
<div>
<h3>CONTACT INFO</h3>
<ul class="contact-msg">
<li>
<i class="fa fa-phone" aria-hidden="true"></i>
<span>+0086-123 3333 3333</span></li>
<li>
<i class="fa fa-fax" aria-hidden="true"></i>
<span>+0086-123 3333 3333</span></li>
<li class="li-tips">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>tengxun@qq.com</span></li>
<li class="li-tips">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span class="footer-add-text">Beijing China Beijing China Beijing China</span>
</li>
</ul>
</div>
</div>
</footer>
</body>
</html>
原文：https://www.cnblogs.com/71yishen/p/13602596.html