醉美水芙蓉 发表于 2022-6-4 11:34

西海情歌

本帖最后由 醉美水芙蓉 于 2022-6-4 11:34 编辑 <br /><br /> <div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1545390">

<style>
.hy { left: -252px; top:100px;background-color: #eee;width: 1100px; height: 616px; position: relative; }
.hy img { position: absolute; border: 20; }

.hy::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 50%;
      background: url(' ') no-repeat center/cover;
      left:80px; top: 0px;
}

.mBox {
        --w: 60px; /* 尺寸 */
        left:680px;
        top: 410px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--w);
        height: var(--w);
        cursor: pointer;
        position: relative;

        animation: rot 1.6s linear infinite;
}
.mBox span {
        position: absolute;
        width: inherit;
        height: inherit;
        display: block;
      background-color: #fff;
      background-image: radial-gradient(circle, red , #FFC125 4px, #F4A460 20px, red);
       
}
.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="hy">

<img style="top:0; right: 0; width: 1100px; box-shadow: 4px 4px 5px #888; mix-blend-mode: multiply;"

src="https://s1.ax1x.com/2022/06/04/XaytUK.jpg" alt="" />

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

<script>
let hy = document.querySelector(".hy");
chgc();
let cc = setInterval(chgc, 2000);

function chgc(){
        let c1 = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
        let c2 = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
        hy.style.background = `linear-gradient(120deg,${c1},${c2})`;
}

let mBox = document.querySelector(".mBox");
let au = document.createElement("audio");
let flag = true;
au.src = "https://music.163.com/song/media/outer/url?id=1435616560.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></td></tr></table>

马黑黑 发表于 2022-6-4 11:39

完美

小辣椒 发表于 2022-6-4 11:48

欣赏水芙蓉的精彩制作{:4_187:}

加林森 发表于 2022-6-4 12:24

外文歌曲，挺好听的。

红影 发表于 2022-6-4 12:51

真美的制作，欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2022-6-4 15:51

马黑黑 发表于 2022-6-4 11:39
完美

黑黑老师下午好！

醉美水芙蓉 发表于 2022-6-4 15:51

小辣椒 发表于 2022-6-4 11:48
欣赏水芙蓉的精彩制作

小辣椒美女下午好！

醉美水芙蓉 发表于 2022-6-4 15:52

加林森 发表于 2022-6-4 12:24
外文歌曲，挺好听的。

队长下午好！

醉美水芙蓉 发表于 2022-6-4 15:52

红影 发表于 2022-6-4 12:51
真美的制作，欣赏水芙蓉好帖

红影美女下午好！

加林森 发表于 2022-6-4 17:08

醉美水芙蓉 发表于 2022-6-4 15:52
队长下午好！

水芙蓉下午好！{:4_204:}

马黑黑 发表于 2022-6-4 17:28

醉美水芙蓉 发表于 2022-6-4 15:51
黑黑老师下午好！

下午好。请喝咖啡：{:4_190:}
页: [1]
查看完整版本: 西海情歌