论坛 › 欢乐水吧 › 车轱辘还是小风扇？

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

车轱辘还是小风扇？

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

<script>
let flag = true;
let fan = document.querySelector(".fan");
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/21/5d862db01b08a4bf0eac35a6f3b934a4.mp3";
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 19:59

原创代码：
<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>

<script>
let flag = true;
let fan = document.querySelector(".fan");
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/21/5d862db01b08a4bf0eac35a6f3b934a4.mp3";
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 20:05

<div class="fan" style="--ss: 40px;"></div>

马黑黑 发表于 2022-4-22 20:06

<div class="fan" style="--ss:30px;"></div>

马黑黑 发表于 2022-4-22 20:07

尺寸可以修改，--ss 值建议不要低于 30px

梦油 发表于 2022-4-22 20:44

黑黑朋友晚上好！夏天做电扇小图时离不开的素材啊。

大猫咪 发表于 2022-4-22 20:47

这个非常棒， 收藏学习   老黑在帖子里可以换颜色不    晚上好{:4_191:}{:4_179:}

马黑黑 发表于 2022-4-22 20:50

大猫咪 发表于 2022-4-22 20:47
这个非常棒， 收藏学习   老黑在帖子里可以换颜色不    晚上好

去看看我的代码笔：https://codepen.io/mahh2022/pen/MWrRbgb

马黑黑 发表于 2022-4-22 20:51

梦油 发表于 2022-4-22 20:44
黑黑朋友晚上好！夏天做电扇小图时离不开的素材啊。

嗯，天热了

大猫咪 发表于 2022-4-22 20:51

马黑黑 发表于 2022-4-22 20:50
去看看我的代码笔：https://codepen.io/mahh2022/pen/MWrRbgb

嗯嗯好的   谢谢老黑{:4_179:}

马黑黑 发表于 2022-4-22 20:52

大猫咪 发表于 2022-4-22 20:51
嗯嗯好的   谢谢老黑

感谢支持

大猫咪 发表于 2022-4-22 20:55

马黑黑 发表于 2022-4-22 20:52
感谢支持

应该谢谢老黑   有你真好   {:4_179:}{:4_191:}

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

大猫咪 发表于 2022-4-22 20:55
应该谢谢老黑   有你真好

{:4_190:}

梦油 发表于 2022-4-22 21:08

马黑黑 发表于 2022-4-22 20:51
嗯，天热了

是啊，黑黑朋友。你想得真周到，这样的知识和素材正是当前所需要的啊。

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

我倒是觉得做车轱辘挺好的{:4_173:}

加林森 发表于 2022-4-22 21:43

老黑的这个制作真漂亮。又一个新的播放器。{:4_199:}

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

加林森 发表于 2022-4-22 21:43
老黑的这个制作真漂亮。又一个新的播放器。

这个好玩吧

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

红影 发表于 2022-4-22 21:37
我倒是觉得做车轱辘挺好的

嗯嗯

加林森 发表于 2022-4-22 21:57

马黑黑 发表于 2022-4-22 21:55
这个好玩吧

嗯嗯，我正在制作，准备加入图片进去。该在上面地方加入呢？

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

梦油 发表于 2022-4-22 21:08
是啊，黑黑朋友。你想得真周到，这样的知识和素材正是当前所需要的啊。

嗯嗯，说得对

查看完整版本: 车轱辘还是小风扇？