純css3製作簡易鐘錶時鐘

2021-10-12 13:18:34 字數 1242 閱讀 9876

效果

具體的思路就是外邊是乙個大的圓

.clock
中是乙個小的圓點在中心

.center
時針分針秒針都是使用細的長方形

.hour 


.point 


.seconds
大的刻度用兩個不同的長方形做成乙個十字架的形狀

.div1 


.div2
用乙個小的白圓蓋在這個十字架上使用z-index讓圓覆蓋在十字架上被時針分針秒針蓋住

.p1
剩下的10個中等刻度寬度比大刻度細一些，使用 transform: rotate();讓他傾斜就可以乙個格仔30度

.div3 


.div4 


.div5 


.div6
剩下的小刻度方法差不多

舉個例子，讓他轉6度

.s1
最後使用乙個比覆蓋十字架的大一些的大圓讓他蓋住小的柱子

圖層讓他小於大刻度的圖層

注意

1.使用z-index設定圖層

中心圓點 > 時針 > 分針 > 秒針 >大刻度遮罩層》12個大的刻度》小刻度的圓》小刻度

2.在定位的時候使用絕對定位top和left時，使用calc()可以讓元素到達中心點

比如 calc( 50% - 元素的寬或高 )減號左右一定要用空格分隔

讓表針轉動可以使用

transform-origin: bottom center;
讓旋轉中心點到下部的中心點

倒計時五秒

@keyframes sec 


20% 


40% 


60% 


80% 


100% 


}
獲取當前時間要用到js所以只能從固定的點開始計時

純CSS3製作正方體

css3 允許您使用 3d 轉換來對元素進行格式化。rotatex x軸旋轉，圍繞其在乙個給定度數x軸旋轉的元素。div rotatey y軸旋轉，圍繞其在乙個給定度數y軸旋轉的元素。div rotatez z軸旋轉，圍繞其在乙個給定度數z軸旋轉的元素。div 掌握好rotatex,rotatey,...

純css3實現圓盤時鐘動畫效果

先讓我們來看下整體效果，請看下圖 作為小白的我，看到別人寫的鐘錶特效有點心動，於是自己也動手寫了乙個，主要是為了練練腦子，接下來直接看 html css樣式 t2 t3.t3 before t3 after t4.t4 i.t4 before t4 after hour hour3 hour6 ho...

用CSS3實現鐘錶效果

var olist document.getelementbyid list 獲取到刻度 var ocss document.getelementbyid css var ohour document.getelementbyid hour 獲取時針 var omin document.getele...