码迷,mamicode.com
首页 > Web开发 > 详细

自学前端开发 新版css时钟效果图

时间:2017-05-06 12:00:39      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:学习   ini   osi   order   pos   pad   class   nsf   meta   

想要自学前端开发,你要的学习资料到了-web前端交流学习群21,新版css时钟效果图

<!DOCTYPE html>

<html>

         <head>

                   <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

                   <title>RunJS</title>

                   <style>

                       .clock{

         width:200px;

         height:200px;

         border-radius:100%;

         position:relative;

         background-image:url(技术分享
);

         background-size:100%;

}

.line{

         height:4px;

        

         margin-left:-15px;

         margin-top:-2px;

}

.original{

         position:absolute;

         left:50%;

         top:50%;

         width:1px;

         height:1px;

         float:left;

 

}

.clock>.point{

         position:absolute;

         top:50%;

         left:50%;

         margin-left:-5px;

         margin-top:-6px;

         width:3px;

         height:3px;

         padding:5px;

        

         border-radius:13px;

}

.original.seconds{

         -webkit-animation:rotate_origin60s linear infinite;

         animation:rotate_origin60s linear infinite;

}

.original.seconds>.line{

        

         width:100px;

         height:2px;

}

.original.minutes{

         -webkit-animation:rotate_origin3600s linear infinite;

         animation:rotate_origin3600s linear infinite;

}

.original.minutes>.line{

        

         width:80px;

         height:3px;

}

.original.hours{

         -webkit-animation:rotate_origin86400s linear infinite;

         animation:rotate_origin86400s linear infinite;

}

.original.hours>.line{

         width:60px;

        

}

@-webkit-keyframes rotate_origin{

         from{

                   -webkit-transform:rotateZ(0deg);

         }

         to{

                   -webkit-transform:rotateZ(360deg);

         }

}

@keyframes rotate_origin{

         from{

                   transform:rotateZ(0deg);

         }

         to{

                   transform:rotateZ(360deg);

         }

}

                   </style>

         </head>

         <body>

                   <divclass="clock">

                            <divclass="original hours">

                                     <divclass="line"></div>

                            </div>

                            <divclass="original minutes">

                                     <divclass="line"></div>

                            </div>

                            <divclass="original seconds">

                                     <divclass="line"></div>

                            </div>

                            <divclass="point"></div>

                           

                   </div>

         </body>

</html>

 

?

自学前端开发 新版css时钟效果图

标签:学习   ini   osi   order   pos   pad   class   nsf   meta   

原文地址:http://www.cnblogs.com/xsns/p/6815909.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!