在这个时间就是金钱的时代，人们的时间意识越来越强，不仅仅是平时的日常生活，在上网的同时也是尤为如此，那么在前端开发的时候，学会使用css3制作一个时钟就显得很有必要了。本篇文章给大家带来的内容是关于，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
使用css3绘制出圆形动态时钟的原理
众所周知的是div形状是方形的，那么我们首先需要使用border-radius属性将其变换成圆形。
为了使指针转动起来，我们需要使用 -webkit-transform-origin:center 100px;来设置我们的旋转基点。然后利用 -webkit-transform: rotate(0);让我们的li旋转相应的角度形成相应的刻度。
设计好刻度之后，需要涉及一个nth-of-type()的选择器，用来规定其属于父元素的第几个子元素。
在圆形时钟的正中心我们要设一个div icon用于指针的连接点。
然后我们利用js获取div之后对表盘的刻度进行渲染。
最后开一个定时器，每隔一秒执行一次函数。
使用css3绘制出圆形动态时钟的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>钟表</title>
<style id="css">
#wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;}
#wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;}
#wrap ul li{width:2px; height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;}
/*#wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);}
#wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);}
#wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);}
#wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);}
#wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);}
#wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);}
#wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);}
#wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);}*/
#wrap ul li:nth-of-type(5n+1){ height:12px;}
#hour{width:6px; height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;}
#min{width:4px; height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;}
#sec{width:2px; height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;}
.icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<!--<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div></div>
</div>
<script>
var oList=document.getElementById("list");//获取到刻度
var oCss=document.getElementById("css");
var oHour=document.getElementById("hour");//获取时针
var oMin=document.getElementById("min");//获取分针
var oSec=document.getElementById("sec");//获取秒针
var oLi="";
var sCss="";
for (var i=0;i<60;i++) { //一个表盘总共是60个刻度
sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
oLi+="<li></li>";
};
oList.innerHTML=oLi;
oCss.innerHTML+=sCss;//表盘刻度渲染完成
toTime();
setInterval(toTime,1000);
function toTime(){
var oDate=new Date();//获取当前时间
var iSec=oDate.getSeconds();//获取当前秒
var iMin=oDate.getMinutes()+iSec/60;//获取当前分
var iHour=oDate.getHours()+iMin/60;//获取当前时
oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度)
oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度)
oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度)
};
</script>
</body>
</html>实例效果如图所示
Atas ialah kandungan terperinci 如何使用css3绘制出圆形动态时钟（详解）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah grid CSS?Apr 30, 2025 pm 03:21 PMCSS Grid adalah alat yang berkuasa untuk mewujudkan susun atur web yang rumit dan responsif. Ia memudahkan reka bentuk, meningkatkan kebolehcapaian, dan menawarkan lebih banyak kawalan daripada kaedah yang lebih lama.
Apakah CSS Flexbox?Apr 30, 2025 pm 03:20 PMArtikel membincangkan CSS Flexbox, kaedah susun atur untuk penjajaran yang cekap dan pengedaran ruang dalam reka bentuk responsif. Ia menerangkan penggunaan Flexbox, membandingkannya dengan grid CSS, dan butiran sokongan penyemak imbas.
Bagaimanakah kita boleh membuat laman web kami responsif menggunakan CSS?Apr 30, 2025 pm 03:19 PMArtikel ini membincangkan teknik untuk membuat laman web responsif menggunakan CSS, termasuk tag Meta Viewport, grid fleksibel, media cecair, pertanyaan media, dan unit relatif. Ia juga meliputi menggunakan grid CSS dan Flexbox bersama -sama dan mengesyorkan rangka kerja CSS
Apakah harta saiz kotak CSS?Apr 30, 2025 pm 03:18 PMArtikel ini membincangkan harta saiz kotak CSS, yang mengawal bagaimana dimensi elemen dikira. Ia menerangkan nilai seperti kotak kandungan, kotak sempadan, dan kotak padding, dan kesannya terhadap reka bentuk susun atur dan penjajaran bentuk.
Bagaimanakah kita boleh menghidupkan CSS?Apr 30, 2025 pm 03:17 PMArtikel membincangkan membuat animasi menggunakan CSS, sifat utama, dan menggabungkan dengan JavaScript. Isu utama adalah keserasian penyemak imbas.
Bolehkah kita menambah transformasi 3D ke projek kami menggunakan CSS?Apr 30, 2025 pm 03:16 PMArtikel membincangkan menggunakan CSS untuk transformasi 3D, sifat utama, keserasian penyemak imbas, dan pertimbangan prestasi untuk projek web. (Kira -kira aksara: 159)
Bagaimana kita boleh menambah kecerunan dalam CSS?Apr 30, 2025 pm 03:15 PMArtikel ini membincangkan menggunakan kecerunan CSS (linear, radial, mengulangi) untuk meningkatkan visual laman web, menambah kedalaman, fokus, dan estetika moden.
Apakah unsur-unsur pseudo dalam CSS?Apr 30, 2025 pm 03:14 PMArtikel membincangkan unsur-unsur pseudo dalam CSS, penggunaannya dalam meningkatkan gaya HTML, dan perbezaan dari kelas pseudo. Menyediakan contoh praktikal.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
