【css酷炫效果】纯CSS实现大风车旋转效果
想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492004
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
clike
<div class="radar-scan"></div>css样式
clike
.radar-scan {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
#000 0deg,
#000 20deg,
transparent 20deg,
transparent 40deg,
#000 40deg,
#000 60deg,
transparent 60deg,
transparent 80deg,
#000 80deg,
#000 100deg,
transparent 100deg,
transparent 120deg,
#000 120deg,
#000 140deg,
transparent 140deg,
transparent 160deg,
#000 160deg,
#000 180deg,
transparent 180deg,
transparent 200deg,
#000 200deg,
#000 220deg,
transparent 220deg,
transparent 240deg,
#000 240deg,
#000 260deg,
transparent 260deg,
transparent 280deg,
#000 280deg,
#000 300deg,
transparent 300deg,
transparent 320deg,
#000 320deg,
#000 340deg,
transparent 340deg,
transparent 360deg
);
animation: radar-rotation 4s linear infinite;
}
@keyframes radar-rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}完整代码
基础版
clike
<!DOCTYPE html>
<html lang="en">
<head>
<title>页面特效</title>
<style type="text/css">
.radar-scan {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
#000 0deg,
#000 20deg,
transparent 20deg,
transparent 40deg,
#000 40deg,
#000 60deg,
transparent 60deg,
transparent 80deg,
#000 80deg,
#000 100deg,
transparent 100deg,
transparent 120deg,
#000 120deg,
#000 140deg,
transparent 140deg,
transparent 160deg,
#000 160deg,
#000 180deg,
transparent 180deg,
transparent 200deg,
#000 200deg,
#000 220deg,
transparent 220deg,
transparent 240deg,
#000 240deg,
#000 260deg,
transparent 260deg,
transparent 280deg,
#000 280deg,
#000 300deg,
transparent 300deg,
transparent 320deg,
#000 320deg,
#000 340deg,
transparent 340deg,
transparent 360deg
);
animation: radar-rotation 4s linear infinite;
}
@keyframes radar-rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="radar-scan"></div>
</body>
</html>进阶版（彩色版）
clike
<!DOCTYPE html>
<html lang="en">
<head>
<title>页面特效</title>
<style type="text/css">
.radar-scan {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
#e61e1e 0deg,
#000 20deg,
transparent 20deg,
transparent 40deg,
#e61e1e 40deg,
#000 60deg,
transparent 60deg,
transparent 80deg,
#e61e1e 80deg,
#000 100deg,
transparent 100deg,
transparent 120deg,
#e61e1e 120deg,
#000 140deg,
transparent 140deg,
transparent 160deg,
#e61e1e 160deg,
#000 180deg,
transparent 180deg,
transparent 200deg,
#e61e1e 200deg,
#000 220deg,
transparent 220deg,
transparent 240deg,
#e61e1e 240deg,
#000 260deg,
transparent 260deg,
transparent 280deg,
#e61e1e 280deg,
#000 300deg,
transparent 300deg,
transparent 320deg,
#e61e1e 320deg,
#000 340deg,
transparent 340deg,
transparent 360deg
);
animation: radar-rotation 4s linear infinite;
}
@keyframes radar-rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="radar-scan"></div>
</body>
</html>效果图
