波浪效果实现

最新推荐文章于 2024-09-16 23:39:36 发布

黑无常De上帝

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量326

点赞数

分类专栏： CSS专栏文章标签： css3 css 动画

本文链接：https://blog.csdn.net/qq_30228701/article/details/121995612

版权

CSS专栏专栏收录该内容

24 篇文章 0 订阅

订阅专栏

HTML
注意：bolang.png这张图片在设计的时候，头尾要能连接起来（就是要对称，效果会比较好）。

<!--波浪效果-->
<div class="waveEffect">
	<div class="waveContent"></div>
	<div class="wavePic">
		<div class="waveImg"></div>
	</div>
</div>

SCSS

.waveEffect{
        width:100%;
        overflow:hidden;

        .waveContent{
            width:100%;
            position:relative;
            z-index:1;
            height:940px;
            margin:0 auto;
            //padding-top:100px;
        }
        .wavePic{
            position: relative;
            z-index: 3;
            width: 100%;
            color: #999;
            margin-top: -140px;
            background: url(../../../assets/img/cms/bolang.png) repeat-x 0 0;
            -webkit-animation: 8s linear 0s none infinite wavePicRoll;
            -moz-animation: 8s linear 0s none infinite wavePicRoll;
            animation: 8s linear 0s none infinite wavePicRoll;
        }
        .waveImg{
            height: 200px;
            background: url(../../../assets/img/cms/bolang.png) repeat-x 330px 0;
            -webkit-animation: 10s linear 0s none infinite waveImgRoll;
            -moz-animation: 10s linear 0s none infinite waveImgRoll;
            animation: 10s linear 0s none infinite waveImgRoll;
        }

        @-webkit-keyframes wavePicRoll{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -1920px 0;
            }
        }
        @-moz-keyframes wavePicRoll{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -1920px 0;
            }
        }
        @keyframes wavePicRoll{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -1920px 0;
            }
        }

        @-webkit-keyframes waveImgRoll{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: 1920px 0;
            }
        }
        @-moz-keyframes waveImgRoll{
            0%{
                background-position:0 0;
            }
            100%{
                background-position: 1920px 0;
            }
        }
        @keyframes waveImgRoll{
            0%{
                background-position:0 0;
            }
            100%{
                background-position: 1920px 0;
            }
        }
}