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

css3制作小时钟

时间:2017-08-26 12:54:06      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:nbsp   osi   run   font   infinite   meta   key   模糊   images   

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
#hd{
width:700px;
height:700px;
background: url("zhong2.jpg") no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/*设置模糊背景*/
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
/*box-shadow: 10px 10px 10px black;*/
position: relative;
margin:0 auto;
border-radius: 50%;
}
#hd img{
width:35px;
position: absolute;
left:335px;
top:113px;
animation: run 60s linear infinite;
/*设置旋转基准点*/
transform-origin: 50% 67%;
技术分享

 


}
@keyframes run {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
} } </style></head><body><div id="hd"> <img src="zhizhen3.jpg" ></div></body></html>

---恢复内容结束---

css3制作小时钟

标签:nbsp   osi   run   font   infinite   meta   key   模糊   images   

原文地址:http://www.cnblogs.com/Jack1816274408/p/7434732.html

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