你还爱我吗（学习马黑黑Mars效果）
本帖最后由 朵拉 于 2024-10-27 23:10 编辑 <br /><br /><style>#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/67056365d29ded1a8ce2df94.jpg') no-repeat center/105% 105%; box-shadow: 4px 4px 8px #00000080; z-index: 1; display: grid; place-items: center; animation: chgsize 5s linear alternate infinite var(--state); position: relative; }
#player { position: absolute; filter: drop-shadow(0 0 2px black); }
#minHand, #secHand { animation: rot var(--tt) linear infinite var(--state); }
#line { transition: .5s; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes chgsize { to { background-size: 100% 100%; } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2143596327" autoplay loop></audio>
<svg id="player" width="200" height="200" viewBox="-50 -50 100 100">
<title id="ctt">play</title>
<defs>
<linearGradient id="bg1" x1="0" x2="0.5" y1="0" y2="1">
<stop offset="0%" stop-color="blue"/>
<stop offset="50%" stop-color="silver"/>
<stop offset="100%" stop-color="darkred"/>
</linearGradient>
</defs>
<circle cx="0" cy="0" r="44" fill="none" stroke="url(#bg1)" stroke-width="6"/>
<line id="minHand" x1="0" y1="0" x2="0" y2="-32" stroke="red" stroke-width="3" stroke-linecap="round"/>
<line id="secHand" x1="0" y1="0" x2="0" y2="-38" stroke="orange" stroke-width="2" stroke-linecap="round"/>
<circle cx="0" cy="0" r="6" fill="green"/>
<line id="line" x1="-5" y1="25" x2="5" y2="25" stroke="yellow"/>
</svg>
</div>
<script>
mState = () => {
tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
ctt.textContent = aud.paused ? '点击播放' : '点击暂停';
}
aud.oncanplaythrough = () => {
minHand.style.setProperty('--tt', `${aud.duration}s`);
secHand.style.setProperty('--tt', `${aud.duration / 10}s`);
};
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => line.setAttribute('transform', `rotate(${Math.random() * 720})`);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> @马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:} 漂亮，欣赏朵宝好帖{:4_204:} 欣赏老师美帖，重阳节快乐！{:4_204:}
页:
[1]