本文转载自:钻芒博客
https://www.zmki.cn/5105.html
效果如图:
![[7b2美化]柒比贰 魔改系列|7B2-分类封面添加波浪效果&每日诗词_第1张图片](http://img.e-com-net.com/image/info8/7d56994de4f34d569cf968b68cd1b738.gif)
代码:
首先在style.css样式表里添加波浪样式
/*浪来了*/
.lang {
overflow: hidden;
width: 100%; position: absolute; left: 0; margin-top: -55px; } .lang__1 { background: url(https://dl.zhutix.net/2019/08/wave_01.png) repeat-x; width: 7000px; height: 60px; animation: langs 18s infinite cubic-bezier(0.04, 1.07, 0.65, 0.05); position: absolute; top: 8px; } .lang__2 { background: url(https://dl.zhutix.net/2019/08/wave_02.png) repeat-x; width: 7000px; height: 60px; animation: langs 12s infinite linear; position: relative; top: 0; } .lang__3 { background: url(https://dl.zhutix.net/2019/08/wave_03.png) repeat-x; width: 7000px; height: 60px; animation: langs 18s infinite linear; position: absolute; top: 0; } .lang__4 { background: url(https://dl.zhutix.net/2019/08/wave_04.png) repeat-x; width: 7000px; height: 60px; animation: langs 12s infinite linear; position: relative; top: 0; } .lang__5 { background: url(https://dl.zhutix.net/2019/08/wave_05.png) repeat-x; width: 7000px; height: 60px; animation: langs 18s infinite linear; position: absolute; top: 0; } .lang__6 { background: url(https://dl.zhutix.net/2019/08/wave_06.png) repeat-x; width: 7000px; height: 60px; animation: langs 12s infinite linear; position: relative; top: 0; } .author .lang { margin-top: -132px; } .footer .lang { margin-top: -55px; } @keyframes langs { 0% { margin-left: 0; } 100% { margin-left: