html扫描动画效果,HTML5 简单的雷达扫描动画（带目标物）

CSS

语言：

CSSSCSS

确定

* {

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

#radar {

position: relative;

width: 300px;

height: 300px;

margin: auto;

background: #222;

overflow: hidden;

border: 2px solid #8ba892;

-webkit-border-radius: 300px;

border-radius: 300px;

-webkit-background-clip: padding-box;

background-clip: padding-box;

}

#radar:before,

#radar:after {

content: '';

background: rgba(139, 168, 146, 0.15);

position: absolute;

margin: auto;

left: 0;

top: 0;

bottom: 0;

right: 0;

}

#radar:before {

width: 1px;

}

#radar:after {

height: 1px;

}

#radar i {