css3雷达扫描,css-动态雷达扫描效果

产品要一个“看起来”很厉害的页面展示，所以这个动态扫描诞生啦！

本篇实现的效果主要是用了csss3的@keyframes

@keyframes mymove

{

from {top:0px;}

to {top:200px;}

}

以下为完整示例

HTML：

css：

* {

box-sizing: border-box;

}

html {

height: 100%;

background-color: #111;

font-size: 10px;

}

body {

background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent);

background-size: 7rem 7rem;

background-position: -5.2rem -5.2rem;

width: 100%;

height: 100%;

position: relative;

padding: 0;

margin: 0;

font-size: 1.6rem;

}

.radar {

background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);

background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);

width: 75vw;

height: 75vw;

max-height: 75vh;

max-width: 75vh;

position: relative;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

border-radius: 50%;

border: 0.2rem solid #20ff4d;

overflow: hidden;

}

.radar:before {

content: ' ';

display: block;

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

animation: blips 5s infinite;

animation-timing-function: linear;

animation-delay: 1.4s;

}

.radar:after {

content: ' ';

display: block;

background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);

width: 50%;

height: 50%;

position: absolute;

top: 0;

left: 0;

animation: radar-beam 5s infinite;

animation-timing-function: linear;

transform-origin: bottom right;

border-radius: 100% 0 0 0;

}

@keyframes radar-beam {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

@keyframes blips {

14% {

background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

}

14.0002% {

background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

}

25% {

background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

}

26% {

background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

opacity: 1;

}

100% {

background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

opacity: 0;

}

}

最终效果

image.png

以上。