div+css实现隧道穿越动画圈圈效果代码-html代码-BFW代码库

div+css实现隧道穿越动画圈圈效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现隧道穿越动画圈圈效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
	width: 100vw;
	height: 100vh;
	background-color: #354259;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	display: flex;
}

.rings {
	--border-width: 2px;
	--border-style: solid;
	--animation-duration: 4s;
	--animation-count: infinite;
	--animation-direction: normal;
	--animation-fill-mode: both;
	position: relative;
	width: 400px;
	aspect-ratio: 1/1;
}

.rings > .ring {
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1/1;
	border-width: var(--border-width);
	border-style: var(--border-style);
	border-radius: 50%;
	transform-origin: center;
	-webkit-animation-duration: var(--animation-duration);
	        animation-duration: var(--animation-duration);
	-webkit-animation-delay: calc(0.4s * var(--delay));
	        animation-delay: calc(0.4s * var(--delay));
	-webkit-animation-iteration-count: var(--animation-count);
	        animation-iteration-count: var(--animation-count);
	-webkit-animation-direction: var(--animation-direction);
	        animation-direction: var(--animation-direction);
	-webkit-animation-fill-mode: var(--animation-fill-mode);
	        animation-fill-mode: var(--animation-fill-mode);
	filter: opacity(0);
	will-change: transform;
	overflow: hidden;
}

.rings > .ring:nth-child(even) {
	border-color: #9adcff;
}

.rings > .ring:nth-child(odd) {
	border-color: #ffb2a6;
}

.rings > .ring:first-child {
	width: 50px;
	margin: -25px 0 0 -25px;
}

.rings > .ring:nth-child(2) {
	width: 64px;
	margin: -32px 0 0 -32px;
}

.rings > .ring:nth-child(3) {
	width: 78px;
	margin: -39px 0 0 -39px;
}

.rings > .ring:nth-child(4) {
	width: 92px;
	margin: -46px 0 0 -46px;
}

.rings > .ring:nth-child(5) {
	width: 104px;
	margin: -52px 0 0 -52px;
}

.rings > .ring:nth-child(6) {
	width: 118px;
	margin: -59px 0 0 -59px;
}

.anim-zoomIn {
.........完整代码请登录后点击上方下载按钮下载查看