波浪线 css
更新时间:2023-09-05 14:31:23
编辑:保利尼奥
浏览:790
<div class="index4_list2">
<div class="bg">
<img src="https://www.yuhucoldchain.com/Public/Home/images/bg_line.png" wi...
<div class="index4_list2">
<div class="bg">
<img src="https://www.yuhucoldchain.com/Public/Home/images/bg_line.png" width="100%">
<img src="https://www.yuhucoldchain.com/Public/Home/images/bg_line1.png" width="100%">
<img src="https://www.yuhucoldchain.com/Public/Home/images/bg_line3.png" width="100%">
</div>
<div class="box">
<ul class="list wow fadeIn" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeIn;">
<li>
<div class="dian_sum">
<div class="dian">
<img src="/Uploads/Temp/image/20210825/6126028fce394.png" width="32%">
</div>
<div class="dian" style="background-image: url('/Public/Home/images/banner_index1.png')">
<img src="https://www.yuhucoldchain.com/Uploads/Temp/image/20210825/6126028fce394.png" width="32%">
</div>
</div>
<div class="lans">
<div class="l1">创新</div>
<div class="l2">CREATIVITY</div>
</div>
</li><li>
<div class="dian_sum">
<div class="dian">
<img src="/Uploads/Temp/image/20210825/612602ddaddd2.png" width="32%">
</div>
<div class="dian" style="background-image: url('/Public/Home/images/banner_index1.png')">
<img src="https://www.yuhucoldchain.com/Uploads/Temp/image/20210825/6126028fce394.png" width="32%">
</div>
</div>
<div class="lans">
<div class="l1">简捷</div>
<div class="l2">AGILITY</div>
</div>
</li><li>
<div class="dian_sum">
<div class="dian">
<img src="/Uploads/Temp/image/20210825/612603bc44d14.png" width="32%">
</div>
<div class="dian" style="background-image: url('/Public/Home/images/banner_index1.png')">
<img src="https://www.yuhucoldchain.com/Uploads/Temp/image/20210825/6126028fce394.png" width="32%">
</div>
</div>
<div class="lans">
<div class="l1">品质</div>
<div class="l2">QUALITY</div>
</div>
</li><li>
<div class="dian_sum">
<div class="dian">
<img src="/Uploads/Temp/image/20210825/612603e3bef37.png" width="32%">
</div>
<div class="dian" style="background-image: url('/Public/Home/images/banner_index1.png')">
<img src="https://www.yuhucoldchain.com/Uploads/Temp/image/20210825/6126028fce394.png" width="32%">
</div>
</div>
<div class="lans">
<div class="l1">共享</div>
<div class="l2">SYNERGY</div>
</div>
</li>
</ul>
</div>
</div>
.index4_list2 {
position: relative;
overflow: hidden;
}
.index4_list2 .bg img {
width: 110%;
position: absolute;
bottom: 0;
left: -5%;
z-index: 3;
animation: line_animation 7s linear infinite;
}
.index4_list2 .bg img:nth-child(1) {
}
.index4_list2 .bg img:nth-child(2) {
animation-delay: .5s;
-webkit-animation-delay: .5s;
}
.index4_list2 .bg img:nth-child(3) {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
/*animation: quan 1.8s linear infinite;*/
@-webkit-keyframes line_animation {
0% {
bottom: 0;
left: -5%;
}
50% {
opacity: .88;
bottom: 5%;
left: 5%;
}
100% {
bottom: 0;
left: -5%;
}
}