Sass制作简单绚丽小球效果

Sass简单介绍

Sass是CSS的预处理器，在CSS的基础上增加了嵌套、变量、混合等功能，极大提高了开发者的开发效率。
而SCSS是Sass的新版本，其语法兼容了CSS3，且完全继承了Sass的各种功能。

基本用法

// Sass
.bigbox
	width: 100%;
	.smallbox
		margin-top: 20px;

// 生成
.bigbox{
	width: 100%;
}
.bigbox .smallbox{
	margin-top: 20px;
}

// SCSS
.bigbox{
	width: 100%;
	.smallbox{
		margin-top: 20px;
	}
}

// 生成结果和上面相同

更多教程请见 Sass中文文档

小球效果

在sublime中创建多个div标签

<!-- 
	安装了Emmet插件的可以用快捷键
	.content > .point * 100
-->
<div class="content">
	<!-- 创建100个point -->
	<div class="point"></div>
	<div class="point"></div>
	<div class="point"></div>
	<div class="point"></div>
</div>

然后是scss部分

/* 定义变量：point的数量 */
$n: 100;

/* 定义函数：返回一个颜色值 */
@function randomColor($maxR:255, $maxG:255, $maxB:255){
	@return rgba(random($maxR), random($maxG), random($maxB), random(100)/100);
}

body{
	margin: 0;
	padding: 0;
	background-color: #000;
	overflow: hidden;

	.content{
		width: 200px;
		height: 200px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotateY(0deg) rotateZ(0deg);
		transform-style: preserve-3d;
		animation: rotateBox 4s linear infinite;

		.point{
			position: absolute;
			top: 95px;
			left: 49%;
			background: #ddd;
			border-radius: 50%;
			width: 20px;
			height: 20px;

			@for $i from 1 through $n {
				$rot-x: random(360) + deg;
				$rot-y: random(360) + deg;
				$radius: 100px;

				&:nth-child(#{$i}){
					transform: rotateX($rot-x) rotateY($rot-y) translateZ($radius);
					background-color: randomColor();
					
					animation: point#{$i} 10s linear infinite $i*2ms;
				}

				@keyframes point#{$i} {
					0% {
						transform: rotateX($rot-x) rotateY($rot-y) translateZ($radius);
						background-color: randomColor(255, 255, 255);
					}
					20%, 40%{
						transform: rotateX($rot-x) rotateY($rot-y) translateZ($radius*$i/15);
						filter: blur(2px);
					}
					40%, 60%{
						transform: rotateX($rot-x) rotateY($rot-y) translateZ($radius*2);
						background-color: randomColor(255, 255, 255);
						filter: blur(6px);
					}
					60%, 80%{
						transform: rotateX($rot-x) rotateY($rot-y) translateZ($radius*$i/15);
						filter: blur(2px);
					}
					80%, 100%{
						transform: rotateX($rot-x) rotateY($rot-y) translateZ($radius);
						filter: blur(0px);
					}
				}
			}
		}
		/* 饶中心旋转 */
		@keyframes rotateBox {
			to{
				transform: translate(-50%, -50%) rotateY(360deg) rotateZ(360deg);
			}
		}
	}
}

虽然总是莫名感觉奇怪，也没有想过冗余什么的问题，不过还是挺好看的哈哈哈。