线性渐变做的小风扇

马黑黑

马黑黑

改变大小，只需修改一下CSS变量 --ss 的值，定位则请修改其 left 和 top 值：

1. <style>
   
2. .fan {
   
3.         --ss: 60px;
   
4.         left: 0px; top: 0px;
   
5.         width: var(--ss);
   
6.         height: var(--ss);
   
7.         background: linear-gradient(transparent 46%,green 47%, transparent 54%),
   
8.          linear-gradient(90deg,transparent 46%,green 47%, transparent 54%);
   
9.         border: calc(var(--ss) / 10) solid darkgreen;
   
10.         border-radius: 50%;
    
11.         position: relative;
    
12.         cursor: pointer;
    
13.         animation: rot .2s linear infinite;
    
14. }
    
15. @keyframes rot { to { transform: rotate(1turn); } }
    
16. </style>
    
17. 
    
18. <div class="fan"></div>

复制代码

马黑黑

需要关联音乐的，请加入如下JS代码：

1. <script>
   
2. let flag = true;
   
3. let fan = document.querySelector(".fan");
   
4. let au = document.createElement("audio");
   
5. au.src = "音乐地址";
   
6. au.autoplay = flag;
   
7. au.loop = true;
   
8. fan.appendChild(au);
   
9. if(!flag) fan.style.animationPlayState = "paused";
   
10. fan.onclick = function(){
    
11.         flag ? (this.style.animationPlayState = "paused",au.pause(),flag = false) :
    
12.          (this.style.animationPlayState = "running",au.play(),flag = true);
    
13. }
    
14. </script>

复制代码

红影

原来里面是个转动的十字，转得快了，就跟风扇似的了

红影

仅仅用渐变就能做出它们，很巧妙

马黑黑

红影 发表于 2022-4-22 21:09
仅仅用渐变就能做出它们，很巧妙

原理在这里：

• background: linear-gradient(transparent 46%,green 47%, transparent 54%),
•          linear-gradient(90deg,transparent 46%,green 47%, transparent 54%);
  

控制好渐变颜色的位置，加上角度，就能产生一个十字架

马黑黑

红影 发表于 2022-4-22 21:08
原来里面是个转动的十字，转得快了，就跟风扇似的了

对的，这是障眼法

红影

马黑黑 发表于 2022-4-22 21:56
原理在这里：

嗯嗯，仔细看了以后看明白了，在后面做帖子的时候又加了两条线，感觉停止音乐时候更好看点。

红影

马黑黑 发表于 2022-4-22 21:56
对的，这是障眼法

是啊，开始时完全没反应过来

马黑黑

红影 发表于 2022-4-23 09:42
是啊，开始时完全没反应过来

不过你另外添加了两条就更完美了

马黑黑

红影 发表于 2022-4-23 09:41
嗯嗯，仔细看了以后看明白了，在后面做帖子的时候又加了两条线，感觉停止音乐时候更好看点。

当然更好看。不过风扇还有单扇叶的

红影

马黑黑 发表于 2022-4-23 09:50
当然更好看。不过风扇还有单扇叶的

对对，也有单扇叶的

马黑黑

红影 发表于 2022-4-23 12:04
对对，也有单扇叶的

我见过不少单扇叶的风扇，有装饰作用的，有搅动空气的，也有坏了的

加林森

学习学习

红影

马黑黑 发表于 2022-4-23 12:35
我见过不少单扇叶的风扇，有装饰作用的，有搅动空气的，也有坏了的

哈哈，最后这“也有坏了的”好玩

马黑黑

红影 发表于 2022-4-23 20:10
哈哈，最后这“也有坏了的”好玩

嗯，断了扇叶只剩下一片的