div+css实现雷达扫描动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现雷达扫描动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html {
height: 100%;
display: grid;
place-items: center;
background: #020;
}
.circle {
width: 60vmin;
height: 60vmin;
border-radius: 50%;
--border-size: 3px;
--border-angle: 0turn;
--grid-bg: radial-gradient(
transparent 69%,
limegreen 69%,
limegreen 70%,
transparent 70%
);
--line-bg: transparent 50%, limegreen 50%, transparent 50.5%;
background-image: conic-gradient(from var(--border-angle), transparent 10%, #0d0a 99%, limegreen 99.5%), linear-gradient(0deg, var(--line-bg)), linear-gradient(45deg, var(--line-bg)), linear-gradient(90deg, var(--line-bg)), linear-gradient(135deg, var(--line-bg)), var(--grid-bg), var(--grid-bg), var(--grid-bg);
background-size: cover, cover, cover, cover, cover, 25% 25%, 50% 50%, 75% 75%;
background-position: center cent.........完整代码请登录后点击上方下载按钮下载查看
网友评论0