全屏背景梯度变化动画的SCSS代码

SCSS Animated Gradient Mixin 使用linear-gradient和animation实现的渐变动画背景。给人以天气变化和阵风掠过的视觉效果。

scss, template, gradient

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2318
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import 'https://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans';

$base-spacing-unit: 24px;
$half-spacing-unit: $base-spacing-unit / 2;

//////
//
// Mixin - Animated Gradient Background
//
// @include background-gradient-animation(
// 	rgba(255,255,255,0.4), // color one
// 	rgba(255,255,255,1), // color two
// 	rgba(255,255,255,0.4), // colour three
// 	135deg, // background angle
// 	30s, // length
// 	infinite // iteration
// );
//
/////

@mixin background-gradient-animation($colour-one, $colour-two, $colour-three, $angle, $length, $iteration) {
	background: $colour-one;

background: linear-gradient($angle, $colour-one 0%, $colour-two 50%, $colour-three 100%);
	background-size: 500% 500%;
	animation: animation-background-gradient $length ease $iteration;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	margin: 0 auto;
}

//
// Animation - Background Gradient
//

@keyframes animation-background-gradient {

0% {
		background-position: 0% 5%;
	}

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

100% {
		background-position: 0% 5%;
	}

}

body {
	background: rgb(29,30,25);
}

h1,
h2,
h3 {
	font-family: 'Bree Serif', serif;	
}

.container--width {
	max-width: 1200px;
	margin: 0 auto;
}

.content {
	color: white;
	padding: $base-spacing-unit * 2;
}

//
// Hero
//

.hero {
	position: relative;
	overflow: hidden;
	color: white;
	display: inline-block;
	width: 100%;

&__background-image {
		overflow: hidden;
		background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b');
		background-size: cover;
		background-position: center bottom;
		position: absolute;
		width: 100%;
		height: 100%;
	}

&__background-overlay {

@include background-gradient-animation(
			rgba(0,0,0,0.8), // color one
			transparent, // color two
			rgba(0,0,0,0.8), // colour three
			135deg, // bckground angle
			30s, // length
			infinite // iteration
		);

//opacity: 0.8;
		
	}
	
	&__background-overlay--full-colour {
		@include background-gradient-animation(
			#E2007C, // color one
			#11A0AF, // color two
			#E7CA00, // colour three
			135deg, // bckground angle
			30s, // animation length
			infinite // iteration
		);
	}

&__content-container {
		position: relative;
		text-align: center;
		font-family: 'Open Sans', sans-serif;
		padding: ($base-spacing-unit * 6) 0;

pointer-events: none;
	}

&__title {
		font-size: 48px;
		font-family: 'Bree Serif', serif;
	}

}

HTML

<div class="hero__content-container">
            <div class="hero__content container--width padding--sides">
                <h1 class="hero__title">Animated Gradient Mixin</h1>
                <p>The background of this hero area is a subtle example, but you can plug in any colours you see fit.</p>
            </div>
        </div>

</div>

<div class="content">
    <div class="container--width">
        <div class="grid">
            <div class="grid__item lap-and-up-one-half">
                <h3>Code</h3>
                <pre>
					<code>
@mixin background-gradient-animation($colour-one, $colour-two, $colour-three, $angle, $length, $iteration) {
	background: $colour-one;
	background: linear-gradient($angle, $colour-one 0%, $colour-two 52%, $colour-three 100%);
	background-size: 500% 500%;
	animation: animation-background-gradient $length ease $iteration;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	margin: 0 auto;
}

@keyframes animation-background-gradient {

0% {
		background-position: 0% 5%;
	}
	
	50% {
		background-position: 100% 95%;
	}
	
	100% {
		background-position: 0% 5%;
	}
	
}
					</code>
				</pre>
            </div>

<h3>Useage</h3>
                <pre>
					<code>
@include background-gradient-animation(
	rgba(255,255,255,0.4), // colour one
	rgba(255,255,255,1), // colour two
	rgba(255,255,255,0.4), // colour three
	135deg, // background angle
	30s, // animation length
	infinite // iteration
);
					</code>
				</pre>

<h3>Compiled</h3>
                <pre>
					<code>
background: rgba(0, 0, 0, 0.8);
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, transparent 50%, rgba(0, 0, 0, 0.8) 100%);
background-size: 500% 500%;
animation: animation-background-gradient 30s linear infinite;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
					</code>
				</pre>
            </div>
        </div>
    </div>
</div>

<div class="hero__content-container">
            <div class="hero__content container--width padding--sides">
                <h1 class="hero__title margin-double--ends padding-double--ends">Full Colour Example</h1>
            </div>
        </div>

</div>

SCSS Animated Gradient Mixin 使用linear-gradient和animation实现的渐变动画背景。给人以天气变化和阵风掠过的视觉效果。

scss, template, gradient

编辑器支持Emmet

快捷键

SCSS Animated Gradient Mixin 使用linear-gradient和animation实现的渐变动画背景。给人以天气变化和阵风掠过的视觉效果。

scss, template, gradient

HTML5全屏菜单和SVG变形动画背景

使用SVG和CSS3制作的纸飞机飘摇页面背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：