论坛 › 欢乐水吧 › 风火轮？

马黑黑 发表于 2022-4-24 22:30

风火轮？

本帖最后由 马黑黑 于 2022-4-24 22:37 编辑 <br /><br /><style>
.mBox {
        --w: 50px; /* 尺寸 */
        margin: auto;
        margin-top: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--w);
        height: var(--w);
        cursor: pointer;
        position: relative;
        animation: rot 2s linear infinite;
}
.mBox span {
        position: absolute;
        width: inherit;
        height: inherit;
        display: block;
        border: 1px solid deeppink;
}
.mBox span:nth-child(1) { transform: rotate(0deg); }
.mBox span:nth-child(2) { transform: rotate(120deg); }
.mBox span:nth-child(3) { transform: rotate(240deg); }
.mBox span:nth-child(4) { width: 8px; height: 8px; border-radius: 50%; }

@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="mBox"><span></span><span></span><span></span><span></span></div>

<script>
let mBox = document.querySelector(".mBox");
let au = document.createElement("audio");
let flag = true;
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/23/86e2083757b6e60a6f16f84f9e897f6c.mp3";
au.autoplay = flag;
au.loop = true;
au.style.display = "none";
mBox.appendChild(au);
if(!flag) mBox.style.animationPlayState = "paused";
mBox.onclick = function(){
        flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
}
</script>

马黑黑 发表于 2022-4-24 22:31

本帖最后由 马黑黑 于 2022-4-24 22:37 编辑

代码：
<style>
.mBox {
      --w: 50px; /* 尺寸 */
      margin: auto;
      margin-top: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--w);
      height: var(--w);
      cursor: pointer;
      position: relative;
      animation: rot 2s linear infinite;
}
.mBox span {
      position: absolute;
      width: inherit;
      height: inherit;
      display: block;
      border: 1px solid deeppink;
}
.mBox span:nth-child(1) { transform: rotate(0deg); }
.mBox span:nth-child(2) { transform: rotate(120deg); }
.mBox span:nth-child(3) { transform: rotate(240deg); }
.mBox span:nth-child(4) { width: 8px; height: 8px; border-radius: 50%; }

@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="mBox"><span></span><span></span><span></span><span></span></div>

<script>
let mBox = document.querySelector(".mBox");
let au = document.createElement("audio");
let flag = true;
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/23/86e2083757b6e60a6f16f84f9e897f6c.mp3";
au.autoplay = flag;
au.loop = true;
au.style.display = "none";
mBox.appendChild(au);
if(!flag) mBox.style.animationPlayState = "paused";
mBox.onclick = function(){
      flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
}
</script>

马黑黑 发表于 2022-4-24 22:33

尺寸修改这句： --w: 50px; /* 尺寸 */

定位把如下两句删掉并增加 left与 top：

margin: auto;
margin-top: 100px;

例如：

left: 100px;
top: 100px;

加林森 发表于 2022-4-24 22:38

来学习

红影 发表于 2022-4-24 23:07

漂亮，又可以做新的按钮了{:4_187:}

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

红影 发表于 2022-4-24 23:07
漂亮，又可以做新的按钮了

按钮也来越多了{:4_170:}

红影 发表于 2022-4-24 23:11

还可以把上次的径向渐变加进来，更像风火轮了{:4_173:}

马黑黑 发表于 2022-4-24 23:14

红影 发表于 2022-4-24 23:11
还可以把上次的径向渐变加进来，更像风火轮了

这个你试试

红影 发表于 2022-4-25 22:47

马黑黑 发表于 2022-4-24 23:09
按钮也来越多了

万物皆可按钮{:4_173:}

红影 发表于 2022-4-25 22:48

马黑黑 发表于 2022-4-24 23:14
这个你试试

我配色配不好，试一下：

<style>
.mBox1 {
        --w: 60px; /* 尺寸 */
        margin: auto;
        margin-top: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--w);
        height: var(--w);
        cursor: pointer;
        position: relative;

        animation: rot 2s linear infinite;
}
.mBox1 span {
        position: absolute;
        width: inherit;
        height: inherit;
        display: block;
      background-color: #fff;
      background-image: radial-gradient(circle, red , #FFC125 4px, #F4A460 20px, red);
       
}
.mBox1 span:nth-child(1) { transform: rotate(0deg); }
.mBox1 span:nth-child(2) { transform: rotate(120deg); }
.mBox1 span:nth-child(3) { transform: rotate(240deg); }
.mBox1 span:nth-child(4) { width: 8px; height: 8px; border-radius: 50%; }

@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="mBox1"><span></span><span></span><span></span><span></span></div>

红影 发表于 2022-4-25 22:50

马黑黑 发表于 2022-4-24 23:14
这个你试试

哈哈，试完发现不像风火轮，更像齿轮了{:4_170:}

马黑黑 发表于 2022-4-25 23:14

红影 发表于 2022-4-25 22:50
哈哈，试完发现不像风火轮，更像齿轮了

我估计也是

马黑黑 发表于 2022-4-25 23:14

红影 发表于 2022-4-25 22:48
我配色配不好，试一下：




也还看得过去

马黑黑 发表于 2022-4-25 23:15

红影 发表于 2022-4-25 22:47
万物皆可按钮

差不多是酱紫

红影 发表于 2022-4-26 21:15

马黑黑 发表于 2022-4-25 23:14
我估计也是

反正不管是什么，只是看看有颜色的效果如何{:4_173:}

红影 发表于 2022-4-26 21:16

马黑黑 发表于 2022-4-25 23:15
差不多是酱紫

饿呢，现在发现音乐跟什么都可以关联的，只要语句里设置了。

马黑黑 发表于 2022-4-26 21:16

红影 发表于 2022-4-26 21:15
反正不管是什么，只是看看有颜色的效果如何

挺好挺好

马黑黑 发表于 2022-4-26 21:17

红影 发表于 2022-4-26 21:16
饿呢，现在发现音乐跟什么都可以关联的，只要语句里设置了。

当然。物联网，怎么能忽略了音乐

红影 发表于 2022-4-27 11:08

马黑黑 发表于 2022-4-26 21:16
挺好挺好

感觉这个也可以当风车{:4_173:}

红影 发表于 2022-4-27 11:10

马黑黑 发表于 2022-4-26 21:17
当然。物联网，怎么能忽略了音乐

就是，没有黑黑关联不了的东东{:4_173:}

查看完整版本: 风火轮？