页脚波浪滚动css3

效果：

解析：

代码里面我做了fooer列表部分，用了font-awesome图标，这个不影响。

波浪效果主要是用animation实现的。

元素wave-list1相对定位，其他三个绝对定位。

波浪图写入两次是为了避免动画效果结束之后出现间断，对第二张图设置延迟，这样当wave-list1的x轴从-100%到0时，wave-list1开始移动，避免空白。

wave-list3、wave-list4同理。

代码：

<!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;
    }
    .footer-content>div div{
        width: 30%;
        display: inline-block;
        vertical-align: top;
    }
    .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{
        line-height: 24px;
    }
    .contact-msg li i{
            font-size: 14px;
            width: 14px;
              text-align: center;
               margin-right: 7px;
    }
    .contact-msg li span{
        display: inline-block;
        width: calc(100% - 45px);
        vertical-align: top;
        line-height: 1.5em;
    }
    .footer-center ul{
        padding:0;
        margin: 0;
        width: 300px;
    }
    .footer-center li{
        list-style-type: none;
        display: flex;
        margin: 10px 0;
    }
    .footer-center li i{
        margin-right: 10px;
        width: 16px;
        text-align: center;
    }

</style>
<body>

    <footer>
        <div class="wave-box">
            <div class="wave-list1">
                <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200925093321wave_02.png">
            </div>
            <div class="wave-list2">
                <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200925093321wave_02.png">
            </div>
            <div class="wave-list3">
                <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200925093313wave_01.png">
            </div>
            <div class="wave-list4">
                <img src="https://images.cnblogs.com/cnblogs_com/71yishen/1812324/o_200925093313wave_01.png">
            </div>
        </div>
        <div class="footer-content">
            <div>
                <div class="footer-left">
                    <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 class="footer-center">
                    <h3>CONTACT INFO</h3>    
                    <ul>
                        <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>
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                            <span>tengxun@qq.com</span></li>
                        <li>
                            <i class="fa fa-map" aria-hidden="true"></i>      
                            <span class="footer-add-text">Beijing China Beijing China Beijing China</span>                             
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </footer>
</body>
</html>

 

posted @ 2020-09-02 16:49  以深  阅读(334)  评论(0)  编辑  收藏  举报
TOP