CSS3经过发展,对浏览器的兼容性已经很不错了。它功能强大,很多页面特效可以代替JavaScript来实现了。下面就以CSS3来制作一个时钟动画。
浏览器最终效果图:
源代码放出:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<style>
*{
margin:0; padding:0;}
/*时钟边框*/
.box{
width:500px;
height:500px;
border:10px solid #ccc;
border-radius:50%;
position:relative;
margin:50px auto;
}
/*时钟数字*/
.box span{
position:absolute;
font-size:40px;
font-weight:700;
text-shadow:0 0 3px #000;
color:#fff;
}
.box .shu1{
top:5px;
left:50%;
transform:translateX(-50%);
}
.box .shu2{
right:12px