马黑黑 发表于 2022-4-22 19:54

线性渐变做的小风扇

<style>
.fan {
        --ss: 60px;
        left: 0px; top: 0px;
        width: var(--ss);
        height: var(--ss);
        background: linear-gradient(transparent 46%,green 47%, transparent 54%),
       linear-gradient(90deg,transparent 46%,green 47%, transparent 54%);
        border: calc(var(--ss) / 10) solid darkgreen;
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        animation: rot .2s linear infinite;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="fan"></div>

马黑黑 发表于 2022-4-22 19:55

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

<style>
.fan {
        --ss: 60px;
        left: 0px; top: 0px;
        width: var(--ss);
        height: var(--ss);
        background: linear-gradient(transparent 46%,green 47%, transparent 54%),
       linear-gradient(90deg,transparent 46%,green 47%, transparent 54%);
        border: calc(var(--ss) / 10) solid darkgreen;
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        animation: rot .2s linear infinite;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="fan"></div>

马黑黑 发表于 2022-4-22 19:56

本帖最后由 马黑黑 于 2022-4-22 20:01 编辑

需要关联音乐的，请加入如下JS代码：
<script>
let flag = true;
let fan = document.querySelector(".fan");
let au = document.createElement("audio");
au.src = "音乐地址";
au.autoplay = flag;
au.loop = true;
fan.appendChild(au);
if(!flag) fan.style.animationPlayState = "paused";
fan.onclick = function(){
      flag ? (this.style.animationPlayState = "paused",au.pause(),flag = false) :
         (this.style.animationPlayState = "running",au.play(),flag = true);
}
</script>

红影 发表于 2022-4-22 21:08

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

红影 发表于 2022-4-22 21:09

仅仅用渐变就能做出它们，很巧妙{:4_199:}

马黑黑 发表于 2022-4-22 21:56

红影 发表于 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:56

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

对的，这是障眼法

红影 发表于 2022-4-23 09:41

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




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

红影 发表于 2022-4-23 09:42

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

是啊，开始时完全没反应过来{:4_173:}

马黑黑 发表于 2022-4-23 09:49

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

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

马黑黑 发表于 2022-4-23 09:50

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

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

红影 发表于 2022-4-23 12:04

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

对对，也有单扇叶的{:4_173:}

马黑黑 发表于 2022-4-23 12:35

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

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

加林森 发表于 2022-4-23 13:01

学习学习

红影 发表于 2022-4-23 20:10

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

哈哈，最后这“也有坏了的”好玩{:4_189:}

马黑黑 发表于 2022-4-23 20:12

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

嗯，断了扇叶只剩下一片的
页: [1]
查看完整版本: 线性渐变做的小风扇