CSS3+js實(shí)現(xiàn)簡(jiǎn)單的時(shí)鐘特效

2024-07-11 08:30:09

字體：大中小

供稿：網(wǎng)友

學(xué)習(xí)css3ing，正在學(xué)習(xí)transfomr，突發(fā)奇想用此做個(gè)小時(shí)鐘，開始吧：

準(zhǔn)備前期工作，把時(shí)鐘的表盤，時(shí)分秒針，實(shí)時(shí)時(shí)間標(biāo)簽的大概樣子做好，效果如圖：

html代碼如下：

復(fù)制代碼

代碼如下:
<div class="main">
<div id="timeLabel"></div>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>

css 代碼如下：

復(fù)制代碼

　　2. 初始化默認(rèn)時(shí)間，和表盤刻度，效果如下：

更改后的css代碼：

復(fù)制代碼

代碼如下:
<style>
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
border-radius: 300px;
border: 1px solid #000;
box-shadow: 2px 5px #808080;
}
#timeLabel {
position: absolute;
background-color: pink;
width: 80px;
height: 25px;
left: 110px;
top: 180px;
color: #fff;
line-height: 25px;
text-align: center;
}
#hour {
width: 100px;
height: 10px;
background-color: red;
position: absolute;
left: 150px;
top: 145px;
transform-origin: 0 50%;
}
#minute {
width: 120px;
height: 8px;
background-color: blue;
position: absolute;
left: 150px;
top: 146px;
transform-origin: 0 50%;
}
#second {
width: 140px;
height: 4px;
background-color: green;
position: absolute;
left: 150px;
top: 148px;
transform-origin: 0 50%;
}
.hourPointer, .minuterPointer, .secondPointer {
position: absolute;
transform-origin: 0 50%;
}
.hourPointer {
height: 10px;
width: 12px;
left: 150px;
top: 145px;
background-color: #f00;
z-index:3;
}
.minuterPointer {
height: 8px;
width: 10px;
left: 150px;
top: 146px;
background-color: #b6ff00;
z-index: 2;
}
.secondPointer {
height: 6px;
width: 8px;
left: 150px;
top: 147px;
background-color: #fa8;
z-index: 1;
}
</style>

上一篇：CSS實(shí)現(xiàn)讓文字半透明顯示在圖片上的方法

下一篇：8款使用 CSS3 實(shí)現(xiàn)超炫的 Loading（加載）的動(dòng)畫效果

發(fā)表評(píng)論

共有條評(píng)論