CSS3钟表是基于CSS3技术实现的一个时钟效果,它利用CSS3的动画特性和变形特性,使得钟表的指针能够实时运动,从而达到显示时间的效果。.clock { position: relative; wi
CSS3钟表是基于CSS3技术实现的一个时钟效果,它利用CSS3的动画特性和变形特性,使得钟表的指针能够实时运动,从而达到显示时间的效果。
.clock { position: relative; width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; background-color: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transform: perspective(100px) rotateX(30deg); animation: rotate 60s linear infinite; } .clock-face { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background-color: #333; } .hour { position: absolute; top: 50%; left: 50%; width: 4px; height: 50px; margin-left: -2px; background-color: #333; transform-origin: bottom center; animation: hour 43200s linear infinite; } .minute { position: absolute; top: 50%; left: 50%; width: 2px; height: 80px; margin-left: -1px; background-color: #333; transform-origin: bottom center; animation: minute 3600s linear infinite; } .second { position: absolute; top: 50%; left: 50%; width: 1px; height: 100px; margin-left: -1px; background-color: red; transform-origin: bottom center; animation: second 60s linear infinite; } @keyframes rotate { from { transform: perspective(100px) rotateX(30deg) rotateZ(0deg); } to { transform: perspective(100px) rotateX(30deg) rotateZ(360deg); } } @keyframes hour { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes minute { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes second { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
上述代码中,我们分别使用了 .hour ,.minute 和 .second 来定义时针、分针和秒针,通过 transform-origin 属性使得指针旋转的中心位于底部中心点,通过 animation 属性使得指针能够实时动起来。
而在 .clock 中,我们则定义了整个钟表的样式,并且使用 transform 属性使得钟表整体向上倾斜 30 度,产生透视视角效果,而通过 animation 属性,我们又使得整个钟表在 60 秒内沿 Z 轴旋转了一圈,形成了动态的效果。
因此,通过运用CSS3技术,我们能够轻松实现一个精美的钟表效果。
粉丝
0
关注
0
收藏
0