AI visual effects motion

ai-visual-effects-motion.markdown

AI visual effects motion

A Pen by UU on CodePen.

License.

index.slim

div.area.final
	div.box.visuals
		.box.visual.c1.ani
			.box
				- 15.times do
					.circle
		.box.visual.c2.ani
			.box
				- 15.times do
					.circle
		.box.visual.d3.ani
			.box.p3d
				- 45.times do
					.circle

	div
		button#btn-play Play
		button#btn-stop Stop

script.js

console.clear();

// 動畫元件
var ai_visual = $(".visual");
var ai_box = $(".visual .box");
var ai_circle = $(".circle");

// 開始
$("#btn-play").on("click", function () {
	// 播放展開動畫
	ai_visual.addClass("load");
	// 播放輪播動畫
	setTimeout(function () {
		ai_visual.addClass("ani").removeClass("load");
	}, 200);
});

// 結束
$("#btn-stop").on("click", function () {
	ai_box.each(function () {
		$(this).css("transform", $(this).css("transform"));
		// $(this).css("webkitTransform", $(this).css("webkitTransform"));
	});
	
	ai_circle.each(function () {
		$(this).css("border-color", $(this).css("border-color"));
		$(this).css("transform", $(this).css("transform"));
		// $(this).css("webkitTransform", $(this).css("webkitTransform"));
	});
	
	ai_visual.removeClass("ani");
	
	requestAnimationFrame(function () {
		ai_box.add(ai_circle).removeAttr("style");
	});
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

style.sass

$size : 100px
$speed-a: 1s
$speed-b: 2s
$speed-c: 5s
$speed-d: 7s
$speed-e: 10s
$speed-f: 15s
//起始顏色
$color: #F00
//比照html數量
$num: 45
$border-radius: 115% 140% 145% 110%/125% 140% 110% 125%
// 70% 80% 90% 70%/90% 90% 80% 80%
// 115% 140% 145% 110%/125% 140% 110% 125%

*
	box-sizing: border-box
	margin: 0
body
	display: flex
	flex-direction: column
	flex-wrap: wrap
	align-content: center
	justify-content: center
	background-color: black
	.area
		display: flex
	.area > .box
		position: relative
		padding: 16px
		width: #{$size + 32px}
		height: #{$size + 32px}
		margin: 0.5rem
	.box, .circle
		position: absolute
		height: $size
		width: $size
		text-align: center
		transition: 0.6s ease-in
	.circle
		border-radius: 50%
	.txt
		position: absolute
		top: 0
		left: 0
		color: #666
	.p3d
		transform-style: preserve-3d
.opacity
	border: 1px solid #fff
	animation: opacity 5s infinite alternate
	@keyframes opacity
		from
			opacity: 0
		to
			opacity: 0.25
.change-color
	animation: change-color 1s infinite alternate
	@keyframes change-color
		from
			filter: hue-rotate(30deg)
		to
			filter: hue-rotate(-30deg)
// A
*
	:is(.a1, .a2, .a3, .a4, .a5) .circle
		background: linear-gradient(#0ff,#f0f)
	.a1
		&.ani
			.circle
				animation: a-x $speed-f linear infinite
				@keyframes a-x
					to
						transform: rotateX(360deg)
	.a2
		&.ani
			.circle
				animation: a-y $speed-f linear infinite
				@keyframes a-y
					to
						transform: rotateY(360deg)
	.a3
		&.ani
			.circle
				animation: a-z $speed-f linear infinite
				@keyframes a-z
					to
						transform: rotateZ(360deg)
	.a4
		&.ani
			.circle
				animation: a-xyz $speed-f linear infinite
				@keyframes a-xyz
					to
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
	.a5
		.circle
			background: linear-gradient(#0ff, transparent, #f0f)
			background-size: 100% 200%
		&.ani
			.circle
				animation: a5-circle $speed-b linear infinite alternate
				@keyframes a5-circle
					from
						background-position: 100% 0%
					to
						background-position: 0% 100%
// B
*
	:is(.b1, .b2, .b3, .b4) .circle
		background: linear-gradient(#0ff,#f0f)
	.b1
		.circle:nth-child(1)
			background: #0ff
		.circle:nth-child(2)
			background: #f0f
		&.ani
			.circle:nth-child(1)
				animation: b1 $speed-f linear infinite
			.circle:nth-child(2)
				animation: b1 $speed-f 1s linear infinite
			@keyframes b1
				to
					transform: rotateX(360deg) rotateY(360deg) rotateZ(720deg)
	.b4
		&.ani
			.x
				animation: b4-x 1s linear infinite alternate
				@keyframes b4-x
					to
						transform: rotateX(30deg)
			.y
				animation: b4-y 2s linear infinite alternate
				@keyframes b4-y
					to
						transform: rotateY(30deg)
			.z
				animation: b4-z 10s linear infinite
				@keyframes b4-z
					to
						transform: rotateZ(360deg)
// C
*
	:is(.c1, .c2, .c3, .c4) .circle
		border: 1px solid rgba(0,0,0,0)
	.c1
		&.ani
			.box
				animation: c1-box $speed-c linear infinite alternate
				@keyframes c1-box
					to
						transform: rotateZ(360deg)
			.circle
				@for $i from 1 through 15
					&:nth-child(#{$i})
						border-color: adjust-hue($color, 160deg)
						animation: c1-circle $speed-a linear #{$i * 0.05}s infinite alternate
						opacity: $i * 0.04
					$color: adjust-hue($color, 10deg)
				@keyframes c1-circle
					0%
						transform: rotateX(0deg) rotateY(0deg)
					25%
						transform: rotateX(0deg) rotateY(25deg)
					100%
						transform: rotateX(25deg) rotateY(0deg)
	.c2
		&.ani
			.box
				animation: c2-box $speed-d linear infinite
				@keyframes c2-box
					to
						transform: rotateZ(-360deg)
			.circle
				@for $i from 1 through 15
					&:nth-child(#{$i})
						border-color: adjust-hue($color, 140deg)
						animation: c2-circle $speed-b linear #{$i * 0.075}s infinite alternate
						opacity: $i * 0.05
					$color: adjust-hue($color, 6deg)
				@keyframes c2-circle
					0%
						transform: rotateX(0deg) rotateY(0deg)
					25%
						transform: rotateX(15deg) rotateY(15deg)
					50%
						transform: rotateX(0deg) rotateY(30deg)
					75%
						transform: rotateX(30deg) rotateY(10deg)
					100%
						transform: rotateX(10deg) rotateY(0deg)
	.c3
		&.ani
			.box
				animation: c3-box $speed-d linear infinite
				@keyframes c3-box
					to
						transform: rotateZ(-360deg)
			.circle
				@for $i from 1 through 15
					&:nth-child(#{$i})
						border-color: adjust-hue($color, 140deg)
						animation: c3-circle $speed-a linear #{$i * 0.1}s infinite alternate
						opacity: $i * 0.03
					$color: adjust-hue($color, 6deg)
				@keyframes c3-circle
					to
						transform: rotateY(30deg)
	.c4
		&.ani
			.box
				animation: c4-box $speed-d linear infinite
				@keyframes c4-box
					to
						transform: rotateZ(360deg)
			.circle
				@for $i from 1 through 15
					&:nth-child(#{$i})
						border-color: adjust-hue($color, 120deg)
						// border-color: #0ff
						animation: c4-circle $speed-a linear #{$i * 0.05}s infinite alternate
						// animation: c2-circle $speed-a linear #{$i * 0.1}s infinite alternate
						opacity: $i * 0.05
					$color: adjust-hue($color, 6deg)
				@keyframes c4-circle
					0%
						transform: rotateX(0deg) rotateY(0deg)
					25%
						transform: rotateX(0deg) rotateY(30deg)
					100%
						transform: rotateX(30deg) rotateY(0deg)
// D
*
	:is(.d1, .d2, .d3, .d4, .d5) .circle
		border: 1px solid rgba(0,0,0,0)
	.d1
		&.ani
			.box
				animation: d1-box $speed-d linear infinite
				@keyframes d1-box
					from
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
			.circle
				// 迴圈建立多筆
				@for $i from 1 through $num
					&:nth-child(#{$i})
						border-color: adjust-hue($color, 60deg)
						animation: d1-circle $speed-d linear #{$i * 0.04}s infinite alternate
						opacity: $i * 0.01
					$color: adjust-hue($color, 4deg)
				@keyframes d1-circle
					from
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
	.d2
		&.ani
			.box
				animation: d2-box $speed-d linear infinite
				@keyframes d2-box
					from
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
			.circle
				// 迴圈建立多筆
				@for $i from 1 through $num
					&:nth-child(#{$i})
						border-color: adjust-hue($color, 40deg)
						animation: d2-circle #{$i * 0.025 + 6}s linear #{$i * 0.03}s infinite alternate
						opacity: $i * 0.009
					$color: adjust-hue($color, 4deg)
				@keyframes d2-circle
					from
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
	.d3
		&.ani
			.box
				animation: d3-box $speed-e linear infinite
				@keyframes d3-box
					from
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
			.circle
				$color: #F06
				@for $i from 1 through $num
					&:nth-child(#{$i})
						border-color: $color
						animation: d3-circle $speed-d linear #{$i * 0.04}s infinite alternate
						opacity: $i * 0.01
					$color: adjust-hue($color, 7deg)
				@keyframes d3-circle
					from
						transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg)
	.d4
		&.ani
			.box
				animation: d4-box $speed-d linear infinite
				@keyframes d4-box
					from
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
			.circle
				@for $i from 1 through $num
					&:nth-child(#{$i})
						border-color: $color
						animation: d4-circle $speed-d linear #{$i * 0.04}s infinite
						opacity: $i * 0.006
					$color: adjust-hue($color, 7deg)
				@keyframes d4-circle
					to
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
	.d5
		&.ani
			.box
				animation: d5-box $speed-e linear infinite
				@keyframes d5-box
					to
						transform: rotateZ(360deg)
			.circle
				$color: #F06
				@for $i from 1 through $num
					&:nth-child(#{$i})
						border-color: $color
						animation: d5-circle $speed-d linear #{$i * 0.04}s infinite alternate
						opacity: $i * 0.006
					$color: adjust-hue($color, 7deg)
				@keyframes d5-circle
					0%
						transform: rotateX(0deg) rotateY(0deg)
					25%
						transform: rotateX(0deg) rotateY(30deg)
					100%
						transform: rotateX(30deg) rotateY(0deg)
// E
*
	.e1
		&.ani
			.box
				animation: d3-box $speed-e linear infinite
				@keyframes d3-box
					from
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
			.circle
				$color: #f0f
				// 迴圈建立多筆
				@for $i from 1 through 15
					&:nth-child(#{$i})
						border: unset
						background: linear-gradient($color, transparent, transparent)
						animation: d1-circle $speed-d linear #{$i * 0.1}s infinite alternate
						opacity: $i * 0.03
					$color: adjust-hue($color, -10deg)
				@keyframes d1-circle
					from
						transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg)
	.e3
		&.ani
			.box
				animation: d3-box $speed-e linear infinite
				@keyframes d3-box
					from
						transform: rotateX(-360deg) rotateY(-360deg) rotateZ(-360deg)
			.circle
				$color: #f0f
				// 迴圈建立多筆
				@for $i from 1 through 15
					&:nth-child(#{$i})
						border: unset
						background: linear-gradient($color, transparent)
						animation: e3-circle $speed-d linear #{$i * 0.3}s infinite alternate
						opacity: $i * 0.03
					$color: adjust-hue($color, -6deg)
				@keyframes e3-circle
					from
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
	.e5
		&.ani
			.box
				animation: d5-box $speed-d linear infinite
				@keyframes d5-box
					from
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
			.circle
				$color: #f0f
				// 迴圈建立多筆
				@for $i from 1 through 15
					&:nth-child(#{$i})
						border: unset
						background: linear-gradient(#0ff, transparent, #f0f)
						background-size: 100% 200%
						animation: e5-circle $speed-c linear #{$i * 0.05}s infinite alternate
						opacity: $i * 0.03
					$color: adjust-hue($color, -8deg)
				@keyframes e5-circle
					from
						background-position: 100% 0%
					to
						background-position: 0% 100%
						transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)

			
.final
	flex-direction: column
	align-items: center
	justify-content: center
	height: 100vh
	.box.visuals
		display: flex
		align-items: center
		justify-content: center
		width: 200px
		height: 200px
		padding: 0
		:is(.c1, .c2).ani
			.circle
				border-radius: $border-radius
		.visual
			width: 50px
			height: 50px
			opacity: 0
			transition: 0.4s ease-in
			.box, .circle
				width: 100%
				height: 100%
		.visual.ani
			width: 200px
			height: 200px
			opacity: 100
			transition: 0.4s ease-out
	
	button
		padding: 0.5rem 1rem
		border: 0
		margin: 2rem 0.5rem 0
		background-color: #222
		color: #aaa