当前位置：首页 > news >正文

【css酷炫效果】纯CSS实现大风车旋转效果

news 来源：原创 2025/5/18 16:19:19

【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>