纯css制作钟表（会走动）

1，效果展示

2.html代码

<div class="clock"><div class="logo">Pigeute</div><div class="line1 line"><div class="left">12</div><div class="right">6</div></div><div class="line2 line"><div class="left">1</div><div class="right">7</div></div><div class="line3 line"><div class="left">2</div><div class="right">8</div></div><div class="line4 line"><div class="left">3</div><div class="right fz">9</div></div><div class="line5 line"><div class="left fz">4</div><div class="right fz">10</div></div><div class="line6 line"><div class="left fz">5</div><div class="right fz">11</div></div><div class="cover"></div><div class="hours"></div><div class="minutes"></div><div class="second"></div><div class="dot"></div></div>

3.样式代码

.clock{width: 150px;height: 150px;background: radial-gradient(circle, white, skyblue,blue); border-radius: 50%;margin: 100px auto;position: relative;}.clock>div{position: absolute;}.cover{width: 110px;height: 110px;background: #fff;border-radius: 50%;left: 50%;top: 50%;transform: translate(-50%,-50%);}.line {height: 100%;width: 2px;left: 50%;transform: translate(-50%,0);}.line1 ,.line4 {width: 5px;}.line2 {transform: translate(-50%,0) rotate(30deg);}.line3 {transform: translate(-50%,0) rotate(60deg);}.line4 {transform: translate(-50%,0) rotate(90deg);}.line5 {transform: translate(-50%,0) rotate(120deg);}.line6 {transform: translate(-50%,0) rotate(150deg);}.hours,.minutes,.second {left: 50%;top: 50%;transform:translate(-50%,-100%);transform-origin: center bottom; animation-iteration-count: infinite;border-top-right-radius:50% ;border-top-left-radius:50% }.hours {width: 5px;background: #555;height: 52px;animation: hour 43200s steps(43200) infinite;}@keyframes hour {from {transform: translate(-50%,-100%) rotate(0deg);}to {transform: translate(-50%,-100%) rotate(360deg);}}.minutes {width: 3px;background: #0000ff;height: 43px;animation: minute 3600s steps(3600) infinite;}@keyframes minute {from {transform: translate(-50%,-100%) rotate(0deg);}to {transform: translate(-50%,-100%) rotate(360deg);}}.second {width: 2px;background: red;height: 37px;animation: seconds 60s steps(60) infinite;}@keyframes seconds {from {transform: translate(-50%,-100%) rotate(0deg);}to {transform: translate(-50%,-100%) rotate(360deg);}}.dot {width: 10px;height: 10px;background: #a99797;border-radius: 50%;left: 50%;top: 50%;transform:translate(-50%,-50%);}.left {top: 0;left: -8px;position: absolute;}.right {bottom: 0;left: -8px;position: absolute;}.fz {transform: rotate(180deg);}.logo {position: absolute;bottom: 40px;left: 50%;transform: translate(-50%,0);font-size: 12px;z-index: 1;}

纯css制作钟表（会走动）相关推荐

纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
纯Css制作tab选项卡
Css本身的功能就很强大的,尤其是Css3出来之后,大部分特效只用Css3就能完成了,无需再费心思去研究js.jQuery该怎么怎么去写,代码简洁方便.下面这个是用纯Css制作的tab选项卡效果: 用 ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
纯css制作遮罩层特效
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做.下面是用纯css制作的遮罩层效果: 原始页面,放了三张图片: ...
如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
纯CSS制作自适应分页条-分享------彭记（019）
纯css制作自适应分页条效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
纯css制作三级下拉菜单
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧.下面是本人用纯css制作的三级下拉菜单效果 ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...

纯css制作钟表（会走动）

纯css制作钟表（会走动）相关推荐

最新文章

热门文章