使用 HTML 和 CSS 制作圓圈動畫

Question

有誰知道如何使用 html 和 CSS 中的文本和時鍾制作以下動畫，如下面的鏈接所示？

https://www.dropbox.com/s/pewcewot8b61tsl/20210629_165919_edited.mp4?dl=0

我的代碼的問題在於，當我調整窗口大小或使用響應模式時，實時時鍾和圓圈不斷移動。

到目前為止，我有這個：

 .dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; background-color:rgb(62,180,137) ; position: relative; animation: mymove 5s infinite; animation-delay: 1.8s; } .col-sm-2 > span, .col-sm-2 > p { display: inline-block; } [class*="col-"] { /*This will make all the elements using the class "col-" float left, have a width of 100%, box sizing, border, it will hide the overflow and add a padding of 16px */ display: inline-block; margin-left: 220px; } @keyframes mymove { 0% {left: 0px;} 50% {left: 190px;} 100%{left :0px;} } .dot2 { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; background-color:rgb(62,180,137) ; position: relative; animation: mymove 5s infinite; animation-delay: 0s; } @keyframes mymove { 0% {left: 0px;} 50% {left: 190px;} 100%{left :0px;} } .text{ font-size: 70px; font-family: "Nunito"; font-weight: bolder; display: inline-block; } .clock { position: absolute; top: 40%; left: 42%; color: black; font-size: 30px; font-family: "Source Sans Pro"; font-weight: bold; letter-spacing: 5px; max-height: 100%; max-width: 100%; display: inline-block; }

 <div class="row"> <div class="col-sm-2" style="text-align: center"> <span><div class="dot"></div><div class="dot2"></div></span><p class="text">metal</p> </div> </div> <div id="DigitalCLOCK" class="clock" onload="showTime()"></div> <script src="function.js"></script> <br> <script> 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // Code By Webdevtrick ( https://webdevtrick.com ) function showTime(){ var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); if(h == 0){ h = 12; } if(h > 24){ h = h - 12; } h = (h < 10) ? "0" + h : h; m = (m < 10) ? "0" + m : m; s = (s < 10) ? "0" + s : s; var time = h + ":" + m + ":" + s + " "; document.getElementById("DigitalCLOCK").innerText = time; document.getElementById("DigitalCLOCK").textContent = time; setTimeout(showTime, 1000); } showTime(); </script>

Answer 1

#DigitalCLOCK絕對定位。 要在調整大小時保持其位置，請將position:relative應用於其包裝器。

 .dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; background-color: rgb(62, 180, 137); position: relative; animation: mymove 5s infinite; position:absolute; animation-delay: 1.8s; bottom:90px; } .col-sm-2>span, .col-sm-2>p { display: inline-block; } [class*="col-"] { /*This will make all the elements using the class "col-" float left, have a width of 100%, box sizing, border, it will hide the overflow and add a padding of 16px */ display: inline-block; margin-left: 220px; } @keyframes mymove { 0% { left: 0px; } 25%{ height:50px; width:50px; } 50% { left: 190px; height: 25px; width: 25px; } 75%{ height:50px; width:50px; } 100% { left: 0px; } } .dot2 { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; background-color: rgb(62, 180, 137); position: relative; animation: mymove 5s infinite; animation-delay: 0s; } .text { font-size: 70px; font-family: "Nunito"; font-weight: bolder; display: inline-block; } .clock { position: absolute; top: 25%; left: 28%; color: black; font-size: 30px; font-family: "Source Sans Pro"; font-weight: bold; letter-spacing: 5px; max-height: 100%; max-width: 100%; display: inline-block; }

 <div class="row"> <div class="col-sm-2" style="text-align: center;position:relative"> <span><div class="dot"></div><div class="dot2"></div></span> <p class="text">metal</p> <div id="DigitalCLOCK" class="clock" onload="showTime()"></div> </div> </div> <script src="function.js"></script> <br> <script> 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // Code By Webdevtrick ( https://webdevtrick.com ) function showTime() { var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); if (h == 0) { h = 12; } if (h > 24) { h = h - 12; } h = (h < 10) ? "0" + h : h; m = (m < 10) ? "0" + m : m; s = (s < 10) ? "0" + s : s; var time = h + ":" + m + ":" + s + " "; document.getElementById("DigitalCLOCK").innerText = time; document.getElementById("DigitalCLOCK").textContent = time; setTimeout(showTime, 1000); } showTime(); </script>