Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:100vh;
	background:#000;
}
.circle {
	position:relative;
	width:600px;
	height:600px;
	filter:url(#wavy) blur(1px);
}
.circle::before {
	content:"";
	position:absolute;
	top:100px;
	left:100px;
	right:100px;
	bottom:100px;
	border:20px solid #fff;
	box-shadow:0 0 50px #0f0,inset 0 0 50px #0f0;
	border-radius:50%;
	-webkit-box-reflect:below 10px linear-gradient(transparent,transparent,#0002);
	animation:animate 5s linear infinite;
}
.circle::after {
	content:"";
	position:absolute;
	top:100px;
	left:100px;
	right:100px;
	bottom:100px;
	border:20px solid #fff;
	box-shadow:0 0 10px #fff,inset 0 0 10px #fff;
	border-radius:50%;
}
.circle:nth-child(2):before {
	animation-delay:-2.5s;
}
@keyframes animate {
	0% {
	box-shadow:0 0 50px #0f0,inset 0 0 50px #0f0;
	filter:hue-rotate(0deg);
}
20% {
	box-shadow:0 0 60px #0f0,inset 0 0 60px #0f0;
}
40% {
	box-shadow:0 0 40px #0f0,inset 0 0 40px #0f0;
}
60% {
	box-shadow:0 0 80px #0f0,inset 0 0 80px #0f0;
}
80% {
	box-shadow:0 0 100px #0f0,inset 0 0 100px #0f0;
}
100% {
	box-shadow:0 0 50px #0f0,inset 0 0 50px #0f0;
	filter:hue-rotate(360deg);
}
}svg {
	width:0;
	height:0;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

svg炫酷效果

更新时间:2022-05-19 13:57:37

0