css酷炫涟漪特效animation

Celeste ·

更新时间:2024-09-20

· 967 次阅读

在这里插入图片描述


		02
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			body {
				overflow: hidden;
			}
			.container {
				width: 100vw;
				height: 100vh;
				background-color: #000000;
				display: flex;
				/* flex-direction: column;/* 切换交叉轴项目 */
				flex-wrap: wrap;
				/* flex-flow:direction wrap */
			}
			.box {
				width: 50vw;
				height: 50vh;
				border: 0.0625rem solid #ffffff;
				border-left: none;
				border-top: none;
			}
			.lianyi {
				display: inline-block;
				border: 0.07rem solid #ffffff;
				position: absolute;
			}
			.one {
				border-radius: 50%;
				width: 25vh;
				height: 25vh;
				margin: calc(25vh / 2) calc((50vw - 25vh) / 2);
				border-color: red greenyellow pink orange;
				animation: one 3s ease-in 0s infinite alternate;
			}
			@keyframes one {
				from {
					width: 1vh;
					height: 1vh;
					margin: calc(50vh / 2) calc(50vw / 2);
					transform: rotate(0deg);
				}
				to {
					width: 25vh;
					height: 25vh;
					margin: calc(25vh / 2) calc((50vw - 25vh) / 2);
					transform: rotate(720deg);
				}
			}
			.one_f {
				border-radius: 50%;
				width: 20vh;
				height: 20vh;
				transform: translate(12.5vh, 0vh);
				border-color: red greenyellow pink orange;
				animation: one_f 3s ease-in 0s infinite alternate;
			}
			@keyframes one_f {
				from {
					width: 1vh;
					height: 1vh;
					margin: calc(50vh / 2) calc(50vw / 2);
					transform: rotate(60deg);
				}
				to {
					width: 20vh;
					height: 20vh;
					margin: calc(30vh / 2) calc((50vw - 20vh) / 2);
					transform: rotate(660deg);
				}
			}
			.one_s {
				border-radius: 50%;
				width: 15vh;
				height: 15vh;
				transform: translate(12.5vh, 0vh);
				border-color: red greenyellow pink orange;
				animation: one_s 3s ease-in 0s infinite alternate;
			}
			@keyframes one_s {
				from {
					width: 1vh;
					height: 1vh;
					margin: calc(50vh / 2) calc(50vw / 2);
					transform: rotate(120deg);
				}
				to {
					width: 15vh;
					height: 15vh;
					margin: calc(35vh / 2) calc((50vw - 15vh) / 2);
					transform: rotate(520deg);
				}
			}
			.one_t {
				border-radius: 50%;
				width: 10vh;
				height: 10vh;
				transform: translate(12.5vh, 0vh);
				border-color: red greenyellow pink orange;
				animation: one_t 3s ease-in 0s infinite alternate;
			}
			@keyframes one_t {
				from {
					width: 1vh;
					height: 1vh;
					margin: calc(50vh / 2) calc(50vw / 2);
					transform: rotate(180deg);
				}
				to {
					width: 10vh;
					height: 10vh;
					margin: calc(40vh / 2) calc((50vw - 10vh) / 2);
					transform: rotate(460deg);
				}
			}
			.square {
				border-radius: 0;
			}
			.rotate {
				border-radius: 50%;
				width: 25vh;
				height: 25vh;
				margin: calc(25vh / 2) calc((50vw - 25vh) / 2);
				animation: roate .5s ease-in 0.1s infinite;
				border-width: 0.06rem;
				position: absolute;
			}
			@keyframes roate {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.rotate_f {
				border-radius: 50%;
				width: 20vh;
				height: 20vh;
				margin: calc(30vh / 2) calc((50vw - 20vh) / 2);
				animation: roate_f .5s ease-in 0.2s infinite;
				border-width: 0.06rem;
				position: absolute;
			}
			@keyframes roate_f {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.rotate_s {
				border-radius: 50%;
				width: 15vh;
				height: 15vh;
				margin: calc(35vh / 2) calc((50vw - 15vh) / 2);
				animation: roate_s .5s ease-in 0.3s infinite;
				position: absolute;
			}
			@keyframes roate_s {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.rotate_t {
				border-radius: 50%;
				width: 10vh;
				height: 10vh;
				margin: calc(40vh / 2) calc((50vw - 10vh) / 2);
				animation: roate_t .5s ease-in 0.4s infinite;
				position: absolute;
			}
			@keyframes roate_t {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.rotate_l {
				border-radius: 50%;
				width: 5vh;
				height: 5vh;
				margin: calc(45vh / 2) calc((50vw - 5vh) / 2);
				animation: roate_l .5s ease-in 0.5s infinite;
				position: absolute;
			}
			@keyframes roate_l {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.scale {
				border-radius: 50%;
				width: 25vh;
				height: 25vh;
				margin: calc(25vh / 2) calc((50vw - 25vh) / 2);
				animation: scale .5s ease-in 0.5s infinite;
				border-width: 0.06rem;
				position: absolute;
			}
			@keyframes scale {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.scale_f {
				border-radius: 50%;
				width: 20vh;
				height: 20vh;
				margin: calc(30vh / 2) calc((50vw - 20vh) / 2);
				animation: scale_f .8s ease-in 0.4s infinite;
				border-width: 0.06rem;
				position: absolute;
			}
			@keyframes scale_f {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.scale_s {
				border-radius: 50%;
				width: 15vh;
				height: 15vh;
				margin: calc(35vh / 2) calc((50vw - 15vh) / 2);
				animation: scale_s .8s ease-in 0.3s infinite;
				position: absolute;
			}
			@keyframes scale_s {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.scale_t {
				border-radius: 50%;
				width: 10vh;
				height: 10vh;
				margin: calc(40vh / 2) calc((50vw - 10vh) / 2);
				animation: scale_t .8s ease-in 0.2s infinite;
				position: absolute;
			}
			@keyframes scale_t {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.scale_l {
				border-radius: 50%;
				width: 5vh;
				height: 5vh;
				margin: calc(45vh / 2) calc((50vw - 5vh) / 2);
				animation: scale_l .8s ease-in 0s infinite;
				position: absolute;
			}
			@keyframes scale_l {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.scale_z {
				border-radius: 50%;
				width: 2vh;
				height: 2vh;
				margin: calc(48vh / 2) calc((50vw - 2vh) / 2);
				animation: scale_z .8s ease-in 0s infinite;
				position: absolute;
			}
			@keyframes scale_z {
				0% {
					transform: scale(.8);
					opacity: 1;
				}
				100% {
					transform: scale(1);
					opacity: 0;
				}
			}
			.boss {
				width: 25vh;
				height: 25vh;
				margin: calc((100vh - 25vh) / 2) calc((100vw - 25vh) / 2);
				position: absolute;
				display: inline-block;
				border: 0.0625rem solid #ffffff;
				border-radius: 50%;
				opacity: 0;
			}
			.I {
				animation: I 2s ease 0s infinite;
			}
			@keyframes I {
				from {
					opacity: 1;
					width: 1vh;
					height: 1vh;
					margin: calc((100vh - 1vh) / 2) calc((100vw - 1vh) / 2);
				}
				to {
					opacity: 0;
					width: 25vh;
					height: 25vh;
				}
			}
			.II {
				animation: II 2s ease 0.4s infinite;
			}
			@keyframes II {
				from {
					opacity: 1;
					width: 1vh;
					height: 1vh;
					margin: calc((100vh - 1vh) / 2) calc((100vw - 1vh) / 2);
				}
				to {
					opacity: 0;
					width: 25vh;
					height: 25vh;
				}
			}
			.III {
				animation: III 2s ease 0.8s infinite;
			}
			@keyframes III {
				from {
					opacity: 1;
					width: 1vh;
					height: 1vh;
					margin: calc((100vh - 1vh) / 2) calc((100vw - 1vh) / 2);
				}
				to {
					opacity: 0;
					width: 25vh;
					height: 25vh;
				}
			}
			.V {
				animation: V 2s ease 1.2s infinite;
			}
			@keyframes V {
				from {
					opacity: 1;
					width: 1vh;
					height: 1vh;
					margin: calc((100vh - 1vh) / 2) calc((100vw - 1vh) / 2);
				}
				to {
					opacity: 0;
					width: 25vh;
					height: 25vh;
				}
			}
			.IV {
				animation: IV 2s ease 1.6s infinite;
			}
			@keyframes IV {
				from {
					opacity: 1;
					width: 1vh;
					height: 1vh;
					margin: calc((100vh - 1vh) / 2) calc((100vw - 1vh) / 2);
				}
				to {
					opacity: 0;
					width: 25vh;
					height: 25vh;
				}
			}
			.IIV {
				animation: IIV 2s ease 2s infinite;
			}
			@keyframes IIV {
				from {
					opacity: 1;
					width: 1vh;
					height: 1vh;
					margin: calc((100vh - 1vh) / 2) calc((100vw - 1vh) / 2);
				}
				to {
					opacity: 0;
					width: 25vh;
					height: 25vh;
				}
			}