【css酷炫效果】纯CSS实现大风车旋转效果
- 缘
- 创作背景
- html结构
- css样式
- 完整代码
- 基础版
- 进阶版（彩色版）
- 效果图
想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492004
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
<div class="radar-scan"></div>
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);}
}
完整代码
基础版
<!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>进阶版（彩色版）
<!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>效果图
