亚伦影音工作室 发表于 2024-2-6 09:41

5555

本帖最后由 亚伦影音工作室 于 2024-12-28 19:07 编辑 <br /><br /><style>
#papa { margin: 10px -300px ; width: 1164px; height: 620px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c0b542c4f167895fc65ebd7e21a2e0d5.jpg)0 0/100%100%; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #800000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;border-radius: 0px 0px;}
#player {margin:0 auto;
position: absolute;top:5%; left:15%;
width: 300px;
height: 540px;
cursor: pointer;
animation: spin 10s infinite linear;
}

.leaf {position: absolute;
width: 40%;
height: 40%;
border-radius: 0px 100px;
border:2px solid #ffffff;
transform-origin: 120% 120%;
}


.leaf:nth-of-type(1) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/bd15302961dc0d095f882739d57aa4e9.jpg)0 0/100% 100%;
transform: rotate(60deg)translateX(60px);
}
.leaf:nth-of-type(2) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/819c8817e3645efbe879d48c136d3aea.jpg)0 0/100% 100%;
transform: rotate(120deg)translateX(60px);
}
.leaf:nth-of-type(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/64cfd5a038124ad321400699539dfcf3.jpg)0 0/100% 100%;
transform: rotate(180deg)translateX(60px);
}
.leaf:nth-of-type(4) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/47bedf4a5d73029e5a84095d757cbbd1.jpg)0 0/100% 100%;
transform: rotate(240deg)translateX(60px);
}
.leaf:nth-of-type(5) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/d9e9535d13b371230366ab4a935239e6.jpg)0 0/100% 100%;
transform: rotate(300deg)translateX(60px);
}
.leaf:nth-of-type(6) {background:url(https://mobile-img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/09341accfa84d0659de638e5e2f74c45.jpg)0 0/100% 100%;
transform: rotateZ(360deg)translateX(60px);
}

@keyframes spin {0% { transform: rotate(-360deg) ;}
}
#mplayer { position: absolute; top: 500px; left:85%;width: 80px; height: 80px; background: url('https://pic.imgdb.cn/item/64a52b6c1ddac507cc5e4d9d.png') no-repeat center/cover; cursor: pointer; animation: rot 6s infinite linear ; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/31/5c/8e/c94454681bc93212751bc46d6cd20d50/audio.mp3" autoplay loop></audio>
<div id="mplayer" title="播放/暂停"></div>
<div id="player">
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
</div>
</div>
<script>
mplayer.addEventListener('click', () => {aud.paused ? (aud.play()) :( aud.pause());});
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');


mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';


player.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>player.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>player.style.animationPlayState = 'paused');

</script>

红影 发表于 2024-2-6 10:49

这六瓣叶片的设计真漂亮。这首歌曲前面怎么还带说话的{:4_173:}

红影 发表于 2024-2-6 10:49

欣赏亚伦老师好帖{:4_187:}

梦油 发表于 2024-2-6 11:23

六位美女的设计有独到之处。{:5_116:}

亚伦影音工作室 发表于 2024-2-6 11:54

红影 发表于 2024-2-6 10:49
这六瓣叶片的设计真漂亮。这首歌曲前面怎么还带说话的

测试全控！只是初稿！

樵歌 发表于 2024-2-6 14:14

六个大美女转得人眼花缭乱的{:4_189:}

红影 发表于 2024-2-6 19:36

亚伦影音工作室 发表于 2024-2-6 11:54
测试全控！只是初稿！

嗯嗯，很成功的测试{:4_187:}
页: [1]
查看完整版本: 5555