过渡背景色,用关键帧@keyframe技术实现炫酷的背景色

效果展示:

背景色会逐渐的变换

 

 

 代码展示:

<template>
	<view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page {
	    width: 100%;
	    height: 100%;
	    background: linear-gradient(
			135deg,
	        hsl(170deg, 80%, 70%),
	        hsl(190deg, 80%, 70%),
	        hsl(250deg, 80%, 70%),
	        hsl(320deg, 80%, 70%)
			);
	    background-size: 200% 200%;
	    animation: gradient-move 15s ease alternate infinite;
	}
	 
	@keyframes gradient-move {
	    0% {
	        background-position: 0% 0%;
	    }
	    100% {
	        background-position: 100% 100%;
	    }
	}
</style>