好玩有趣的摆钟（可复制源代码）
好玩有趣的摆钟（可复制源代码）https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/iboghYD5pWrFvkHIQEeegInOZW4ia1qEN9ibfbJVW2y7PCGibEDAGq6loG29CGZsrpUbOYRGUeGk7WKibcicTV1G2icKQ/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>好看的摆钟</title>
<style>
@font-face{font-family:'Bungee Spice';font-style:normal;font-weight:400;font-display:swap;src:url(https://www.fecoder.cn/code-fun/fonts/nwpTtK2nIhxE0q-IwgSpZBqyyCg_SsDV7Cd_.woff2)
format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}body{--google-font-color-bungeespice:colrv1;}*{margin:0;padding:0;}html{overflow-x:hidden;}body{background:#434343;width:100%;height:100svh;display:flex;justify-content:center;align-items:center;font-family:'Bungee Spice',sans-serif;overflow-x:hidden;min-height:480px;}.container{position:relative;min-height:250px;}.bubble-wrap{width:350px;height:350px;border-radius:50%;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;}.bubbles-bg{position:relative;height:100%;display:flex;gap:22px;justify-content:center;width:100%;}.bubbles-bg span{display:inline-block;position:relative;width:8px;height:8px;border-radius:50%;animation:animate 5s linear infinite;animation-duration:calc(150s / var(--i));}@keyframes animate{0%{transform:translateY(350px) scale(0);background-color:#df6208;box-shadow:0px 0px 4px 4px #e67d31,0 0 30px #e67d31,0 0 70px #e67d31;}50%{background:#d3df08;box-shadow:0px 0px 4px 4px #e4ec53,0 0 30px #e4ec53,0 0 70px #e4ec53;}70%{background:#df0808;box-shadow:0px 0px 4px 4px #ec4242,0 0 30px #ec4242,0 0 70px #ec4242;}100%{transform:translateY(-10px) scale(1);background-color:#df6208;box-shadow:0px 0px 4px 4px #e67d31,0 0 30px #e67d31,0 0 70px #e67d31;}}.clock{width:350px;height:350px;border-radius:50%;position:relative;-webkit-box-shadow:inset inset 0px 0px 12px 12px rgba(0,0,0,1),0px 0px 65px 5px rgba(0,0,0,0.5);-moz-box-shadow:inset inset 0px 0px 12px 12px rgba(0,0,0,1),0px 0px 65px 5px rgba(0,0,0,0.5);box-shadow:inset 0px 0px 12px 12px rgba(0,0,0,1),0px 0px 65px 5px rgba(0,0,0,0.5);background:#1a1c1a;display:flex;justify-content:center;align-items:center;margin-bottom:110px;}.clock::before{content:'';width:10px;height:10px;border-radius:50%;border:2px solid #df6208;background-color:#2f362f;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;}.inner-circle{width:200px;height:350px;border-radius:50%;position:absolute;display:flex;justify-content:center;align-items:start;}.inner-circle-2{width:150px;height:250px;}.inner-circle-3{width:100px;height:155px;}.border-circle{border-radius:50%;position:absolute;background:transparent;border:2px solid rgba(223,98,8,0.2);left:50%;top:50%;width:180px;height:180px;transform:translate(-50%,-50%);}.border-circle:nth-child(2){width:130px;height:130px;}.border-circle:nth-child(3){width:80px;height:80px;}.inner-circle div{position:relative;height:50%;width:7px;z-index:1;border-radius:5px;display:inline-block;transform-origin:bottom;transform:scale(0.5);z-index:0;background:rgb(223,98,8);background:linear-gradient(
180deg,rgba(223,98,8,0.9108018207282913) 50%,rgba(255,0,0,0.9304096638655462) 100%
);}.inner-circle-2 div{width:4px;}.inner-circle-3 div{width:3px;}span{position:absolute;text-align:center;transform:rotate(calc(var(--i) * 29.7deg));inset:25px;}span b{font-size:18px;position:absolute;text-align:center;transform:rotateZ(calc(var(--i) * -30deg));display:inline-block;opacity:0.9;}.digital-time-wrap{width:10px;height:80%;background-color:#1a1c1a;position:absolute;left:48.5%;top:50%;transform:translate(-50%,-50%);z-index:-1;animation-name:rotate;animation-duration:2s;animation-iteration-count:infinite;transform-origin:50% 0%;animation-timing-function:linear;}@keyframes rotate{0%{transform:rotate(-6deg);animation-timing-function:ease-in;}25%{transform:rotate(0deg);animation-timing-function:ease-out;}50%{transform:rotate(6deg);animation-timing-function:ease-in;}75%{transform:rotate(0deg);animation-timing-function:ease-out;}100%{transform:rotate(-6deg);}}#digital-time{width:fit-content;display:flex;padding:10px;border:2px solid rgba(0,0,0,0.5);border-radius:20px;-webkit-box-shadow:0px 0px 65px 5px rgba(0,0,0,0.5);-moz-box-shadow:0px 0px 65px 5px rgba(0,0,0,0.5);box-shadow:0px 0px 65px 5px rgba(0,0,0,0.5);background:#242824;position:absolute;left:50%;transform:translateX(-50%);bottom:0;}#digital-time div{font-size:20px;width:50px;text-align:center;position:relative;}#digital-time div:nth-child(1)::after,#digital-time div:nth-child(2)::after{content:':';position:absolute;right:-4px;opacity:0.7;}#digital-time div:nth-child(4){font-size:18px;display:flex;justify-content:center;align-items:center;}</style>
</head>
<body>
<body><div class="container"><div class="clock"><div class="bubble-wrap"><div class="bubbles-bg"><span style="--i: 15"></span><span style="--i: 12"></span><span style="--i: 18"></span><span style="--i: 22"></span><span style="--i: 20"></span><span style="--i: 23"></span><span style="--i: 13"></span><span style="--i: 18"></span><span style="--i: 28"></span><span style="--i: 24"></span><span style="--i: 15"></span><span style="--i: 21"></span></div></div><!--border inner--><div class="border-circle"></div><div class="border-circle"></div><div class="border-circle"></div><div class="inner-circle inner-circle-1"id="sec"><div></div></div><div class="inner-circle inner-circle-2"id="min"><div></div></div><div class="inner-circle inner-circle-3"id="hrs"><div></div></div><!--Number of clock--><span style="--i: 1"><b>1</b></span><span style="--i: 2"><b>2</b></span><span style="--i: 3"><b>3</b></span><span style="--i: 4"><b>4</b></span><span style="--i: 5"><b>5</b></span><span style="--i: 6"><b>6</b></span><span style="--i: 7"><b>7</b></span><span style="--i: 8"><b>8</b></span><span style="--i: 9"><b>9</b></span><span style="--i: 10"><b>10</b></span><span style="--i: 11"><b>11</b></span><span style="--i: 12"><b>12</b></span><!--digital clock--><div class="digital-time-wrap"><div id="digital-time"><div id="hours">00</div><div id="minuts">00</div><div id="seconds">00</div><div id="ampm">PM</div></div></div></div></div></body>
<script>let hrs=document.querySelector('#hrs');let sec=document.querySelector('#sec');let min=document.querySelector('#min');setInterval(()=>{let day=new Date();let hh=day.getHours()*30;let mm=day.getMinutes()*6;let ss=day.getSeconds()*6;hrs.style.transform=`rotateZ(${hh+mm/12}deg)`;min.style.transform=`rotateZ(${mm}deg)`;sec.style.transform=`rotateZ(${ss}deg)`});function updateClock(){const now=new Date();const hours=now.getHours();const minutes=now.getMinutes();const seconds=now.getSeconds();const ampm=hours>=12?'PM':'AM';document.getElementById('hours').textContent=formatTime(hours%12||12);document.getElementById('minuts').textContent=formatTime(minutes);document.getElementById('seconds').textContent=formatTime(seconds);document.getElementById('ampm').textContent=ampm}function formatTime(time){return time<10?'0'+time:time}setInterval(updateClock,1000);updateClock();</script>
</body>
</html>
页:
[1]