马黑黑 发表于 2022-4-19 20:58

夜明珠改一下能做音乐遥控器

<style>
.ball { /* 球体 */
        margin: auto; margin-top: 80px; width: 80px; height: 80px;
        background: olive linear-gradient(135deg,rgba(0,250,0,.85),rgba(30,250,60,.95));
        position: relative; border-radius: 50%;
        filter: drop-shadow(2px 2px 6px rgba(0,0,0,.7));
        transform: skew(2deg); cursor: pointer;
}
.ball::before, .ball::after { content: ''; position: absolute; } /* 伪元素：修饰 */
.ball::before { /* 伪元素一：高亮 */
        left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%;
        background: radial-gradient(circle at 35% 40%,rgba(255,255,255,.75),rgba(0,0,0,.15));
}
.ball::after { /* 伪元素二：外边框 */
        left: -30px; top: -30px; right: -30px; bottom: -30px;border: 10px solid #ccc;
        border-radius: 20%; transform: rotate(45deg);
}
.ball div { /* 子元素共2个：动画 */
        position: absolute; border: 10px solid rgba(0,0,0,.45); border-radius: 50%;
        border-color: green lightgreen green darkgreen;opacity: .55;
}
.ball div:nth-child(1) { left: -10px; top: -10px; right: -10px; bottom: -10px; animation: rot 4s linear infinite;}
.ball div:nth-child(2) { left: -20px; top: -20px; right: -20px; bottom: -20px;animation: rot 12s linear infinite; }
@keyframes rot { to { transform: rotate(1turn); } } /* 动画 转圈 */
</style>

<div class="ball">
        <div></div>
        <div></div>
</div>

<script>
let flag = true;
let ball = document.querySelector(".ball");
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/18/cb7a4bda166a1721b18c3829d27f9a50.mp3";
au.autoplay = flag;
au.loop= true;
au.style.display = "none"
ball.appendChild(au);
ball.onclick = function(){
        if(flag) {
                Array.from(this.children).forEach(function(item){item.style.animationPlayState = "paused"; });
                au.pause();
                flag = false;
        } else {
                Array.from(this.children).forEach(function(item){item.style.animationPlayState = "running"; });
                au.play();
                flag = true;
        }
}
</script>

马黑黑 发表于 2022-4-19 21:00

代码：
<style>
.ball { /* 球体 */
        margin: auto; margin-top: 80px; width: 80px; height: 80px;
        background: olive linear-gradient(135deg,rgba(0,250,0,.85),rgba(30,250,60,.95));
        position: relative; border-radius: 50%;
        filter: drop-shadow(2px 2px 6px rgba(0,0,0,.7));
        transform: skew(2deg); cursor: pointer;
}
.ball::before, .ball::after { content: ''; position: absolute; } /* 伪元素：修饰 */
.ball::before { /* 伪元素一：高亮 */
        left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%;
        background: radial-gradient(circle at 35% 40%,rgba(255,255,255,.75),rgba(0,0,0,.15));
}
.ball::after { /* 伪元素二：外边框 */
        left: -30px; top: -30px; right: -30px; bottom: -30px;border: 10px solid #ccc;
        border-radius: 20%; transform: rotate(45deg);
}
.ball div { /* 子元素共2个：动画 */
        position: absolute; border: 10px solid rgba(0,0,0,.45); border-radius: 50%;
        border-color: green lightgreen green darkgreen;opacity: .55;
}
.ball div:nth-child(1) { left: -10px; top: -10px; right: -10px; bottom: -10px; animation: rot 4s linear infinite;}
.ball div:nth-child(2) { left: -20px; top: -20px; right: -20px; bottom: -20px;animation: rot 12s linear infinite; }
@keyframes rot { to { transform: rotate(1turn); } } /* 动画 转圈 */
</style>

<div class="ball">
        <div></div>
        <div></div>
</div>

<script>
let flag = true;
let ball = document.querySelector(".ball");
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/18/cb7a4bda166a1721b18c3829d27f9a50.mp3";
au.autoplay = flag;
au.loop= true;
au.style.display = "none"
ball.appendChild(au);
ball.onclick = function(){
        if(flag) {
                Array.from(this.children).forEach(function(item){item.style.animationPlayState = "paused"; });
                au.pause();
                flag = false;
        } else {
                Array.from(this.children).forEach(function(item){item.style.animationPlayState = "running"; });
                au.play();
                flag = true;
        }
}
</script>不想要外边框的，删掉CSS外边框部分代码即可，即：

.ball::after { /* 伪元素二：外边框 */
        left: -30px; top: -30px; right: -30px; bottom: -30px;border: 10px solid #ccc;
        border-radius: 20%; transform: rotate(45deg);
}



加林森 发表于 2022-4-19 21:37

好漂亮的制作，谢谢老黑！{:4_190:}

红影 发表于 2022-4-19 21:41

嗯，也就是去掉after就可以了吧。和音乐关联了，真好{:4_187:}

绿叶清舟 发表于 2022-4-19 21:44

这个漂亮的

樵歌 发表于 2022-4-19 21:50

到目前为止，最好的一个。

大猫咪 发表于 2022-4-19 21:51

老黑真棒{:4_179:}

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

加林森 发表于 2022-4-19 21:37
好漂亮的制作，谢谢老黑！

{:5_108:}

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

红影 发表于 2022-4-19 21:41
嗯，也就是去掉after就可以了吧。和音乐关联了，真好

对，不要外边框的话

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

绿叶清舟 发表于 2022-4-19 21:44
这个漂亮的

还好的吧

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

樵歌 发表于 2022-4-19 21:50
到目前为止，最好的一个。

没有最好只有更好

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

大猫咪 发表于 2022-4-19 21:51
老黑真棒

{:4_180:}

加林森 发表于 2022-4-19 22:15

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


我跟着也做了一个出来，你看着。

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

加林森 发表于 2022-4-19 22:15
我跟着也做了一个出来，你看着。

看见了，像以前的那个，呼吸灯的

加林森 发表于 2022-4-19 22:16

马黑黑 发表于 2022-4-19 22:16
看见了，像以前的那个，呼吸灯的

嗯嗯

红影 发表于 2022-4-20 19:47

马黑黑 发表于 2022-4-19 22:12
对，不要外边框的话

这个用到帖子里，发现边缘配色还是挺有讲究的，因为用了透明度，和背景反差大的时候，还得重新调。刚做的一个帖子里感觉到了这点{:4_173:}

马黑黑 发表于 2022-4-20 20:14

红影 发表于 2022-4-20 19:47
这个用到帖子里，发现边缘配色还是挺有讲究的，因为用了透明度，和背景反差大的时候，还得重新调。刚做的 ...

对，做得多了，经验就有了

绿叶清舟 发表于 2022-4-20 20:17

马黑黑 发表于 2022-4-19 22:12
还好的吧

这么谦虚

马黑黑 发表于 2022-4-20 20:18

绿叶清舟 发表于 2022-4-20 20:17
这么谦虚
想减肥

绿叶清舟 发表于 2022-4-20 20:19

马黑黑 发表于 2022-4-20 20:18
想减肥

骄傲才能减肥的{:4_189:}
页: [1] 2
查看完整版本: 夜明珠改一下能做音乐遥控器