css 雷达扫描图"/>
css 雷达扫描图
html 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css 雷达扫描</title><style>* {margin: 0;padding: 0;}body {background: #000000;height: 100vh;display: flex;align-items: center;overflow: hidden;}.radar {left: calc(50% - 250px);width: 500px;height: 500px;overflow: hidden;background: repeating-radial-gradient(transparent 0, transparent 27px, #43769e 27px, #43769e 30px),linear-gradient(90deg, transparent 49.75%, #43768e 49.75%, #43769e 50.25%, transparent 50.25%),linear-gradient(transparent 49.75%, #43768e 49.75%, #43769e 50.25%, transparent 50.25%);border-radius: 50%;position: absolute;}.radar::before {content: '';position: absolute;width: 250px;height: 250px;top: 0;right: 50%;background: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, rgba(107, 183, 208, 1) 100%);border-radius: 100% 0 0 0;}@keyframes scanning {to {transform: rotate(360deg);}}.radar::before {animation: scanning 5s linear infinite;transform-origin: right bottom;}.radar::after {content: '';width: 10px;height: 10px;opacity: 0.5;position: absolute;left: 50%;top: 50%;background: rgba(107, 183, 208, 1);border-radius: 50%;transform: translate(-50%, -50%);animation: scale 5s ease-in infinite;}@keyframes scale {60%, 100% {width: 800px;height: 800px;opacity: 0;}}.avatar {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 70px;height: 70px;border-radius: 50%;border: 2px solid #ffffff;z-index: 666;}.girl {position: absolute;left: calc(50% + var(--l));top: calc(50% + var(--t));transform: translate(-50%, -50%) scale(var(--i));width: 50px;height: 50px;border-radius: 50%;object-fit: cover;border: 2px solid #ff2972;transform-origin: center;z-index: 999;animation: upDown 5s infinite linear;animation-delay: calc(var(--d) * 5s);}@keyframes upDown {20% {transform: translate(-50%, -50%) scale(calc(var(--i) * 1.4));box-shadow: 0 0 10px #ff2972, 0 0 30px #ff2972, 0 0 50px #ff2972;}50%, 100% {transform: translate(-50%, -50%) scale(var(--i));box-shadow: none;}}</style>
</head>
<body>
<div class="radar"><img src="=1812506584,4117485459&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=285" alt=""class="avatar"><img src="=3546753962,2515344656&fm=253&fmt=auto&app=138&f=JPEG?w=505&h=500" alt=""class="girl" style="--i:0.5;--l:50px;--t:130px;--d:0.05;"><img src="=2237881411,1442959134&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""class="girl" style="--i:0.6;--l:130px;--t:50px;--d:0.28"><img src="=3959851551,53095557&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""class="girl" style="--i:0.9;--l:50px;--t:50px;--d:0.36"><img src="=3519458463,1887460190&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""class="girl" style="--i:0.7;--l:-50px;--t:90px;--d:0.55"><img src="=1893304700,1248298429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""class="girl" style="--i:0.7;--l:-80px;--t:-50px;--d:0.80">
</div>
</body>
</html>
更多推荐
css 雷达扫描图
发布评论