论坛 › 欢乐水吧 › 鸳鸯舞

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

鸳鸯舞

本帖最后由 马黑黑 于 2022-4-26 22:03 编辑 <br /><br /><style>
body { perspective: 3000px; }
.mBox {
        --w: 100px;
        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;
}
.zBox {
        position: absolute;
        display: block;
        border-style: dotted;
        border-width: 1px;
        border-color: transparent red transparent magenta;
        border-radius: 50%;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

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

<script>
let flag = true;
let ele = document.querySelector(".mBox");
let len= ele.clientWidth;
let zStr = "";
let all = 100;
let angle = Math.floor(360 / all);

for(j=0; j< all; j++){
        let wh =Math.floor(len- j * (len / all));
        zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
}
ele.innerHTML += zStr;

let au = document.createElement("audio");
au.src= "http://www.kumeiwp.com/sub/filestores/2022/04/26/884887672b95a12a17efbf911f4765f4.mp3";
au.loop = true;
au.autoplay = flag;
au.style.display = "none";
ele.appendChild(au);

if(!flag) ele.style.animationPlayState = "paused";

ele.onclick = function(){
        flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
}
</script>

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

本帖最后由 马黑黑 于 2022-4-26 22:04 编辑

再远基础上略作改动，其实可以改的地方还很多：
<style>
body { perspective: 3000px; }
.mBox {
        --w: 100px;
        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;
}
.zBox {
        position: absolute;
        display: block;
        border-style: dotted;
        border-width: 1px;
        border-color: transparent red transparent magenta;
        border-radius: 50%;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

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

<script>
let flag = true;
let ele = document.querySelector(".mBox");
let len= ele.clientWidth;
let zStr = "";
let all = 100;
let angle = Math.floor(360 / all);

for(j=0; j< all; j++){
        let wh =Math.floor(len- j * (len / all));
        zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
}
ele.innerHTML += zStr;

let au = document.createElement("audio");
au.src= "http://www.kumeiwp.com/sub/filestores/2022/04/26/884887672b95a12a17efbf911f4765f4.mp3";
au.loop = true;
au.autoplay = flag;
au.style.display = "none";
ele.appendChild(au);

if(!flag) ele.style.animationPlayState = "paused";

ele.onclick = function(){
        flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
}
</script>

红影 发表于 2022-4-26 23:43

这是两个孔雀尾衔接在一起了，真漂亮{:4_187:}

红影 发表于 2022-4-26 23:45

这个感觉像不断发散的感觉似的。看到这个不禁想到太极的两条鱼，还真有点太极图的感觉呢{:4_173:}

马黑黑 发表于 2022-4-26 23:46

红影 发表于 2022-4-26 23:43
这是两个孔雀尾衔接在一起了，真漂亮

这回还真有点像孔雀了。border-radius: 50%就可以吧展开的尾翼弄掉，变成尖尾

马黑黑 发表于 2022-4-26 23:46

红影 发表于 2022-4-26 23:45
这个感觉像不断发散的感觉似的。看到这个不禁想到太极的两条鱼，还真有点太极图的感觉呢

这个感觉比较符合现实的样子

岩新新 发表于 2022-4-27 08:04

欣赏学习！

加林森 发表于 2022-4-27 08:52

好玩好玩。{:4_199:}

梦油 发表于 2022-4-27 09:45

黑黑朋友早晨好！
内行看门道，外行看热闹。我这个外行说不到点子上，但我觉得这个标题起到了画龙点睛的作用，两个色条上下飞舞、左右相望，真像是一对不离不弃、如胶似漆的鸳鸯，给人一种美的感受

红芍药 发表于 2022-4-27 10:33

黑黑老师好手艺，可惜我没时间学。。{:4_199:}{:4_199:}

红影 发表于 2022-4-27 12:33

马黑黑 发表于 2022-4-26 23:46
这回还真有点像孔雀了。border-radius: 50%就可以吧展开的尾翼弄掉，变成尖尾

我把4跳变都弄上颜色，就变成圆了呢。

红影 发表于 2022-4-27 12:33

马黑黑 发表于 2022-4-26 23:46
这个感觉比较符合现实的样子

这个很漂亮的{:4_187:}

马黑黑 发表于 2022-4-27 12:48

红影 发表于 2022-4-27 12:33
这个很漂亮的

还行吧

马黑黑 发表于 2022-4-27 12:48

红影 发表于 2022-4-27 12:33
我把4跳变都弄上颜色，就变成圆了呢。

对，一个缠绕着的圆

马黑黑 发表于 2022-4-27 12:53

红芍药 发表于 2022-4-27 10:33
黑黑老师好手艺，可惜我没时间学。。

看看就好

红影 发表于 2022-4-27 20:51

马黑黑 发表于 2022-4-27 12:48
还行吧

我把它做到星空图里去了，想起看过星云的盘旋。选的图图不挑好，让效果看不太出来了{:4_173:}

红影 发表于 2022-4-27 20:52

马黑黑 发表于 2022-4-27 12:48
对，一个缠绕着的圆

好神奇的呢，好玩{:4_173:}

马黑黑 发表于 2022-4-27 22:27

红影 发表于 2022-4-27 20:52
好神奇的呢，好玩

开心就好

马黑黑 发表于 2022-4-27 22:27

红影 发表于 2022-4-27 20:51
我把它做到星空图里去了，想起看过星云的盘旋。选的图图不挑好，让效果看不太出来了

额

红影 发表于 2022-4-28 10:33

马黑黑 发表于 2022-4-27 22:27
开心就好

嗯嗯，非常有趣。

查看完整版本: 鸳鸯舞