css酷炫涟漪特效animation

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02</title>
		<style type="text/css">
			* {
				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;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<span class="lianyi one"></span>
				<span class="lianyi one_f"></span>
				<span class="lianyi one_s"></span>
				<span class="lianyi one_t"></span>
			</div>
			<div class="box">
				<span class="lianyi one square"></span>
				<span class="lianyi one_f square"></span>
				<span class="lianyi one_s square"></span>
				<span class="lianyi one_t square"></span>
			</div>
			<div class="box">
				<span class="lianyi rotate"></span>
				<span class="lianyi rotate_f"></span>
				<span class="lianyi rotate_s"></span>
				<span class="lianyi rotate_t"></span>
				<span class="lianyi rotate_l"></span>
			</div>
			<div class="box">
				<span class="lianyi scale"></span>
				<span class="lianyi scale_f"></span>
				<span class="lianyi scale_s"></span>
				<span class="lianyi scale_t"></span>
				<span class="lianyi scale_l"></span>
				<span class="lianyi scale_z"></span>
			</div>
			<div class="boss I"></div>
			<div class="boss II"></div>
			<div class="boss III"></div>
			<div class="boss V"></div>
			<div class="boss IV"></div>
			<div class="boss IIV"></div>
		</div>
	</body>
</html>

发布了109 篇原创文章 · 获赞 131 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 黑客帝国 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览