css光环走光动画效果代码
代码语言:html
所属分类:动画
代码描述:css光环走光动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.circle {
background: black;
position: relative;
z-index: 0;
filter: contrast(1.3) brightness(2);
}
.circle:before {
content: "";
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
position: absolute;
border-radius: 50%;
border: 25px solid #00b7ff;
box-sizing: border-box;
z-index: 0;
}
.circle:after {
content: "";
top: 32px;
left: 32px;
right: 32px;
bottom: 32px;
position: absolute;
border-radius: 50%;
border: 21px solid rgba(198, 247, 255, 0.6);
box-sizing: border-box;
z-index: 0;
filter: blur(12.5px);
}
.circle .noise {
mix-blend-mode: multiply;
z-index: 1;
position: relative;
}
.animated {
-webkit-animation: 6s bgPos ease-in-out infinite alternate;
animation: 6s bgPos ease-in-out infinite alternate;
}
@-webkit-keyframes bgPos {
from {
background-position: 0% 0%;
}
to {
background-position: 512px 512px;
}
}
@keyframes bgPos {
from {
background-position: 0% 0%;
}
to {
background-position: 512px 512px;
}
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.noise {
width: 450px;
height: 450px;
background-size: 200%;
background-image: url(data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0