CSS特效013：背景色彩不停流动效果

CSS常用示例100+专栏目录

文章目录

css实战中，怎么绘制背景色彩不停流动效果呢？ 这是从网上学习来的示例，主要background-position在不同阶段的相对位置值，背景色采用线性方式，位置的不同就会才生偏移，从而形成了流动效果。

效果图

演示图片不如代码生成的流畅。

源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [e-mail]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-18
*/
<template>
	<div class="container">
		<div class="top">
			<h3>背景色彩不停流动效果</h3>
			<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<div class="dajianshi"></div>
	</div>
</template>

<style scoped>
	.container {
		width: 1000px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid green;
		position: relative;
	}

	.top {
		margin: 0 auto 0px;
		padding: 10px 0;
		background: cornflowerblue;
		color: #fff;
	}

	.dajianshi {
		width: 420px;
		height: 210px;
		margin: 100px auto;
		background: linear-gradient(145deg, #dae, #00f, #0f0, #f0f, #f00, #ff0);
		background-size: 200% 200%;
		animation: gradient 8s ease infinite;
	}

	@keyframes gradient {
		0% {
			background-position: 0 15%;
		}

		50% {
			background-position: 100% 100%;
		}

		100% {
			background-position: 0 15%;
		}
	}
</style>

CSS基础知识点

结尾语

CSS的应用无处不在，希望某个片段就能帮助你，欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》，
《 leaflet示例教程100+ 》，
《 Cesium示例教程100+》，
《MapboxGL示例教程100+》。