亚伦影音工作室 发表于 2025-7-14 07:16

马老师【金球藏娇】改良版

本帖最后由 亚伦影音工作室 于 2025-7-14 16:01 编辑 <br /><br /><style>
#but{margin: 40px 140px ;width: 270px; height: 270px;   position: relative; cursor: pointer;background:#800000 url('https://pic1.imgdb.cn/item/6873549658cb8da5c8a6e782.gif') no-repeat center/80%;border-radius: 50%; }
#cndpt{position: absolute; width: 270px; height: 270px; background:url(https://pic1.imgdb.cn/item/681f6f6c58cb8da5c8eb844e.jpg) no-repeat center/150% 100%; border-radius: 50%;
transform: rotate(-60deg);transform-origin: 50% 100%;transition: 0.5s;
clip-path: inset(0 50% 0 0);}
#enopg{ position: absolute;width: 270px; height: 270px; transform-origin: 50% 100%;background:url(https://pic1.imgdb.cn/item/681f6f6c58cb8da5c8eb844e.jpg) no-repeat center/150% 100%;border-radius: 50%;
transition: 0.5s;transform: rotate(60deg);
clip-path: inset(0 0 0 50%);}
</style>
<div id="but" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2c/87/32/ba6553bd63371ae2278151692c413526/audio.mp3" autoplay loop></audio>
<script >
but.onclick = () => aud.paused ? (aud.play(),enopg.style.transform= 'rotate(60deg)',cndpt.style.transform= 'rotate(-60deg)') : (aud.pause(),enopg.style.transform= 'rotate(0deg)',cndpt.style.transform = 'rotate(0deg)');
</script >

小文 发表于 2025-7-14 08:30

好酷！

杨帆 发表于 2025-7-14 13:44

设计优化，融合自然，体验感增强，谢谢亚伦老师精彩分享{:4_190:}

非常开心 发表于 2025-7-14 15:37

这个好玩{:4_189:}

老谟深虑 发表于 2025-7-14 16:15

          这个很好玩，欣赏点赞！

梦油 发表于 2025-7-14 16:42

欣赏佳作，问候亚伦。

红影 发表于 2025-7-14 21:03

其实一上来就打开，点击载关闭是最好的{:4_204:}

亚伦影音工作室 发表于 2025-7-14 21:07

红影 发表于 2025-7-14 21:03
其实一上来就打开，点击载关闭是最好的

浏览器不一样效果也不一样，我这里设计的就是打开状态有音乐关闭没音，默认是打开的。

红影 发表于 2025-7-14 21:52

亚伦影音工作室 发表于 2025-7-14 21:07
浏览器不一样效果也不一样，我这里设计的就是打开状态有音乐关闭没音，默认是打开的。

嗯嗯，我现在也是进入帖子就是打开状态，前面进来的时候出了点问题呢，不好意思啊{:4_173:}
页: [1]
查看完整版本: 马老师【金球藏娇】改良版