色婷婷亚洲综合五月,亚洲乱码精品不卡

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁制作

CSS3制作仿Android時(shí)鐘顯示效果

來源：易賢網(wǎng) 閱讀：928 次日期：2015-09-02 15:26:54

溫馨提示：易賢網(wǎng)小編為您整理了“CSS3制作仿Android時(shí)鐘顯示效果”,方便廣大網(wǎng)友查閱！

代碼如下:

<!DOCTYPE html>

<title>CSS3制作仿Android經(jīng)典時(shí)鐘顯示效果丨站長技術(shù)教程網(wǎng)丨www.update8.com</title>

body,ul,li{

padding: 0;

margin:0;

}

a {

color: rgb(1, 124, 185);

text-decoration: none;

}

body{

font-size:16px;

color: #5a5d63;

background: #d6d7d9;

background: -webkit-radial-gradient(#eeefef, #d6d7d9);

background: -moz-radial-gradient(#eeefef, #d6d7d9);

background: -o-radial-gradient(#eeefef, #d6d7d9);

background: -ms-radial-gradient(#eeefef, #d6d7d9);

background: radial-gradient(#eeefef, #d6d7d9);

padding: 50px;

}

.box{

width: 540px;

height: 200px;

margin: 50px auto;

}

.box li{

position: relative;

text-align: center;

list-style-type: none;

display: inline-block;

width: 150px;

height:160px;

text-shadow:0 2px 1px #f4f4f4;

border:1px solid #9fa2ad;

border-radius: 5px;

margin-right:10px;

background: -webkit-gradient(linear,0 0, 0 100%,

color-stop(.2,rgba(248,248,248,.3)),

color-stop(.5,rgba(168,173,190,.5)),

color-stop(.51,rgba(168,173,190,.3)),

color-stop(.9,rgba(248,248,248,.2)));

background: -webkit-linear-gradient(top,rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);

background: -moz-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);

background: -o-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);

background: -ms-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);

background: linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);

box-shadow:inset 0 -2px 0 #f1f1f1,0 1px 0 #f1f1f1,0 2px 0 #9fa2ad,0 3px 0 #f1f1f1,0 4px 0 #9fa2ad;

}

.box li:before,

.box li:after{

display: block;

content: "";

position: absolute;

width: 150px;

}

.box li:before{

top:50%;

height: 1px;

box-shadow: 0 1px 0 #868995,0 2px 1px #fff;

}

.box li:after{

bottom: -65px;

height: 60px;

border-radius:0 0 5px 5px;

background: -webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));

background: -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));

background: -moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));

background: -o-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));

background: -ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));

background: linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));

z-index: 1

}

.box li span:first-child{

font:120px 'BitstreamVeraSansMonoBold';

color: #52555a;

display: block;

height: 130px;

line-height: 150px;

}

@font-face {

font-family: 'BitstreamVeraSansMonoBold';

src: url('VeraMono-Bold-webfont.eot');

src: url('VeraMono-Bold-webfont.eot?#iefix') format('embedded-opentype'),

url('VeraMono-Bold-webfont.woff') format('woff'),

url('VeraMono-Bold-webfont.ttf') format('truetype'),

url('VeraMono-Bold-webfont.svg#BitstreamVeraSansMonoBold') format('svg');

font-weight: normal;

font-style: normal;

}

</style>

</head>

<body>

<br><font color=black>▲　目前IE8及以前版本不兼容CSS3，請使用IE9/火狐/Chrome瀏覽器運(yùn)行本效果。<br><hr><p align="center">本特效由 <a target="_blank">站長技術(shù)教程網(wǎng)</a>丨update8.com 收集于互聯(lián)網(wǎng)，只為興趣與學(xué)習(xí)交流，不作商業(yè)用途。來源：源碼愛好者</p></font>

<ul>

<li><span id="hour"></span><span>Hours</span></li>

<li><span id="minute"></span><span>Minutes</span></li>

<li><span id="second"></span><span>Seconds</span></li>

</ul>

</div>

<p class="author" style="clear:both;padding-top: 50px;text-align:center;line-height:1.625">作者：藤藤-<a target="_blank">w3cplus</a><br>如有更好建議或疑問請加群：1041263</p>

var hour=document.getElementById('hour');

var minute=document.getElementById('minute');

var second=document.getElementById('second');

function showTime(){

var oDate=new Date();

var iHours=oDate.getHours();

var iMinute=oDate.getMinutes();

var iSecond=oDate.getSeconds();

hour.innerHTML=AddZero(iHours);

minute.innerHTML=AddZero(iMinute);

second.innerHTML=AddZero(iSecond);

}