>動態時鐘
title
>
10<
style
>
11*
1617
2728
.horologe
3940
/*圓心
*/41
.clock
4748
/*刻度在沒有背景時使用
*/49
.scale
5657
.shi
7172
.shi::before
8485
.shi::after
9798
.fen
111112
.miao
125style
>
126head
>
127128
<
body
>
129<
div
class
>
130<
div
class
="horologe"
>
131<
div
class
="clock"
>
div>
132<
div
class
="shi"
>
div>
133<
div
class
="fen"
>
div>
134<
div
class
="miao"
>
div>
135div
>
136div
>
137<
script
>
138var
horologe
=document.getelementsbyclassname(
"horologe")[
0];139//
時針140
varshi
=document.getelementsbyclassname(
'shi')[
0];141//
分針142
varfen
=document.getelementsbyclassname(
'fen')[
0];143//
秒針144
varmiao
=document.getelementsbyclassname(
'miao')[
0];145createscale()
146//
呼叫147
setinittime();
148setinterval(
function
() ,
1000
);155
function
createscale()
163scale.style.transform ="
rotate("+
(30*i) +"
deg) translatey(-142px)";
164//
生成刻度
165166
}167
}168
//初始時間
169function
setinittime()
183184
//時間在流逝，不曾停歇
185function
elapse(hours, minutes, seconds)
193script
>
194body
>
195196
html
>
效果在部落格首頁右上角↗↗↗
利用CSS3 動畫 繪畫 圓形動態時鐘
什麼是動畫？這是我們應該先了解的問題。按照百科的解釋動畫是採用逐幀拍攝物件並連續 而形成運動的影像技術。不論拍攝物件是什麼，只要它的拍攝方式是採用的逐格方式，時連續 形成了活動影像，它就是動畫。放在 css3 中大致可以理解為使元素從一種樣式逐漸變為另一種樣式，即將多個過渡效果放在一起形成的效果。c...
純css3製作簡易鐘錶時鐘
效果 具體的思路就是外邊是乙個大的圓 clock中是乙個小的圓點在中心 center時針分針秒針都是使用細的長方形 hour point seconds 大的刻度用兩個不同的長方形做成乙個十字架的形狀 div1 div2 用乙個小的白圓蓋在這個十字架上使用z index讓圓覆蓋在十字架上被時針分針秒...
css3 動態背景
動態背景 利用多層背景的交替淡入淡出，實現一種背景在不停變換的效果，先看圖。效果圖 demo位址 步驟 1.利用css的radial gradient建立乙個映象漸變的背景。其中的80 20 為漸變中心的x,y位置。具體的radial gradient用法可以參見這裡 2.重複第一步建立4個擁有不同...