波涛滚动动画效果css样式_css画大海波涛-CSDN博客

本文链接：https://blog.csdn.net/cxwtsh123/article/details/104942148

本文详细介绍如何使用CSS动画创建动态波浪效果。通过定义关键帧动画和利用背景平移，实现波浪翻滚的视觉效果。具体包括动画CSS设置、HTML结构及样式应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

波涛效果图，入下图所示，实际动画效果是利用css animate不断左右平移波浪图，使其看起来像是在翻滚
在这里插入图片描述

1.动画css，此处用了三个波浪图，用两个动画效果进行交替移动展现

	@keyframes trains{
		from{background-position:0}
		to{background-position:-100% 0}
	}
	@keyframes trains2{
		from{background-position:0}
		to{background-position:100% 0}
	}

2.html内的波浪标签与图片img

<div class="training_activity_list_header_ware"></div>

/images/prac/training_1.png：

/images/prac/training_2.png

/images/prac/training_3.png（此图为白色，可能看不见，同行可F12查看此图download下来）

3.对当前div标签设置动画css样式

.training_activity_list_header_ware::before {
    content: '';
    width: 4000px;
    height: 113px;
    left: 0;
    bottom: 0;
    position: absolute;
    background: url(/images/prac/training_2.png) repeat-x;
    animation: trains 30s linear infinite;
}

.training_activity_list_header_ware::after {
    content: '';
    width: 4000px;
    height: 102px;
    left: 0;
    bottom: 0;
    position: absolute;
    background: url(/images/prac/training_3.png) repeat-x;
    animation: trains 15s linear infinite;
}

.training_activity_list_header_ware {
    width: 4000px;
    height: 170px;
    background: url(/images/prac/training_1.png) repeat-x;
    animation: trains2 30s linear infinite;
    position: absolute;
    z-index: -1;
}

.training_activity_list_header {
    width: 100%;
    height: 170px;
    overflow: hidden;
    position: relative;
}