远走高飞 贺樵哥哥生日快乐！（学习黑黑时钟效果）
<style>
#papa { margin:150px 0 0 calc(50% - 800px); width: 1400px; height: 844px; background: lightblue url('https://wj.zp68.com/lxx/yunhua/2023/03/15/2F.gif') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; z-index: 1; }
#clock { --ww: 120px; --state: paused; --deg: 0; --deg: 0s; position: absolute; left: 10%; top: 10%; width: var(--ww); height: var(--ww); color: Black; text-shadow: 1px 1px 2px #fff; border: 6px solid Black; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
#clock::before, #clock::after { position: absolute; content: ''; width: 6px; height: calc(var(--ww) / 2 - 2px); border-radius: 50%; }
#clock::before { background: hsla(0,100%,50%,.95); bottom: 50%; transform-origin: 50% 100%; transform: rotate(var(--deg)); }
#clock::after { top: 50%; background: hsla(240,100%,50%,.5); transform-origin: 100% 0; animation: swing .3s infinite alternate linear var(--state); }
@keyframes swing { from { transform: rotate(15deg); } to {transform: rotate(-15deg); } }
#dt1{ position: absolute; width: 100px; height:123px; top: 260px; left: 967px; }
#dt2{ position: absolute; width: 380px; height:194px; top: 420px; left: 120px; }
</style>
<div id="papa">
<img id="dt1" src="https://wj.zp68.com/lxx/yunhua/2023/03/15/7.jpg" alt="" style=" " />
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2023/03/15/cs.gif" alt="" style="position: absolute; mix-blend-mode: multiply; transform: translate(30px, 30px) rotate(360deg); " />
<div id="clock">00:00</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/03/15/yzgf.mp3" autoplay loop></audio>
</div>
<script>
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
let mState = () => clock.style.setProperty('--state', aud.paused ? 'pasued' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('timeupdate', () => {
let deg = 360*aud.currentTime / aud.duration;
clock.style.setProperty('--deg', deg +'deg');
clock.innerText = toMin(aud.currentTime) + ' - ' +toMin(aud.duration);
});
</script>
<br><br><br><br><br> 樵哥哥生日快乐！{:4_177:} 一面看电视，一面吃蛋糕，今天是你的正日子，小辣椒赶个作业给你庆生，不会说我吧{:4_189:} @马黑黑
谢谢黑黑源码分享，小辣椒套用一个 辣椒好制作真漂亮，歌选的真好！点赞 和辣椒一起祝福樵哥哥生日快乐，大吉大利！
{:4_187:}{:4_204:}{:4_191:}{:5_166:}{:5_161:}{:4_177:} 大猫咪 发表于 2023-3-15 21:26
辣椒好制作真漂亮，歌选的真好！点赞 和辣椒一起祝福樵哥哥生日快乐，大吉大利！
{ ...
猫猫在啊，我们一起给樵哥哥庆生{:4_191:}{:4_176:} 小辣椒 发表于 2023-3-15 21:27
猫猫在啊，我们一起给樵哥哥庆生
嗯嗯一起happy 干杯 {:4_191:}{:4_176:}辣椒 小辣椒 发表于 2023-3-15 21:23
樵哥哥生日快乐！
谢谢小辣椒的大礼包。今天所时组织春游，才回来一会，收礼来迟哈。{:4_187:}{:4_190:} 火箭速度的，美美的热闹贴就出来啦，而且最新的代码就派上啦{:4_205:} 看见大蛋糕了{:4_205:} 传说中的辫子预定的总桶套房{:4_170:} 大猫咪 发表于 2023-3-15 21:29
嗯嗯一起happy 干杯 辣椒
多喝一点，今天好日子{:4_179:} 小辣椒 发表于 2023-3-15 21:43
多喝一点，今天好日子
必须的{:4_191:}{:4_176:}{:4_179:} 樵歌 发表于 2023-3-15 21:35
谢谢小辣椒的大礼包。今天所时组织春游，才回来一会，收礼来迟哈。
樵哥哥不客气{:4_179:}
一点不迟，刚做好 樵歌 发表于 2023-3-15 21:37
火箭速度的，美美的热闹贴就出来啦，而且最新的代码就派上啦
知道樵哥哥不会在意我的作业送你生日礼物{:4_179:} 辫子哥哥 发表于 2023-3-15 21:37
看见大蛋糕了
你就知道大吃啊{:4_170:} 马黑黑 发表于 2023-3-15 21:41
传说中的辫子预定的总桶套房
是吗？哈哈{:4_170:} 小辣椒 发表于 2023-3-15 21:45
是吗？哈哈
像 这个是豪华客厅{:4_199:} 很喜欢的一首歌，金志文唱的{:4_178:}
页:
[1]
2