Background Gradient Color Animations



Cuối tuần custom tông màu Gradient cho anh em làm background và thêm chuyển động Slide

1. HTML

							

Background Gradient Animations

2. CSS

							@keyframes slide {
			0% {
				background-position-x: 0%;
			}
			100% {
				background-position-x: 600vw;
			}
		}
		*{ 
			margin: 0;
			padding: 0;
			border: 0;
		}
		body {
			font-family: 'filson-soft';
			margin: 0;
			overflow: hidden;
			color: white;
			text-align: center;
		}
		
		.bg{
			height: 800px;
			line-height: 400px;
		}

		.section1 {
			height: 100%;
			background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, lime 14.28%, cyan 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
			background-size: 600vw 600vw;
			-webkit-animation: 'slide' 10s infinite linear forwards;
			padding-top: 200px;
		}

		.title {
			font-size: 8vw;
			line-height: 8vw;
		}						

3. JAVASCRIPT

													

Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.