用animation实现钟表动画

HTML部分，只需要存放三个图片就可以了

       <div class="clock"><div class="sec"></div><div class="min"></div><div class="hour"></div></div>

CSS部分

    <style>@keyframes secrun{0%{transform: rotate(180deg);}100%{transform: rotate(540deg);}}@keyframes minrun{0%{transform: rotate(180deg);}100%{transform: rotate(540deg);}}.clock{background-image: url(clock.png);background-repeat: no-repeat;width: 512px;height: 512px;position: relative;}.sec{background-image: url(second.png);background-repeat: no-repeat;width: 16px;height: 278px;position: absolute;top: 180px;left: 247px;transform: rotate(180deg);transform-origin: center 76px;  z-index: 3;animation: secrun 60s steps(60,end) infinite;}.min{background-image: url(minute.png);background-repeat: no-repeat;width: 32px;height: 218px;position: absolute;top: 240px;left: 239px;transform: rotate(180deg);transform-origin: center 16px;  z-index: 2;animation: minrun 3600s steps(60,end) infinite;}.hour{background-image: url(hour.png);background-repeat: no-repeat;width: 32px;height: 148px;position: absolute;top: 180px;left: 238px;transform: rotate(180deg);transform-origin: center 46px;  z-index: 1;}</style>

转载于:https://www.cnblogs.com/wangzheng98/p/11167831.html

用animation实现钟表动画相关推荐

基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
【Android 属性动画】属性动画 Property Animation 与视图动画 View Animation 区别
文章目录一.动画效果添加对象二.动画效果类型三.动画效果与实际属性四.开发复杂程度属性动画 Property Animation 可以为任何对象 ( View 对象 / 非 View 对象 ...
小程序底部弹窗css_微信小程序之animation底部弹窗动画（两种方法）
简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果.第一种方式是动态设置显示区域的高度,第二种方法是动态设置显示区域的移动的位置( ...
【Unity3D小技巧】Unity3D中Animation和Animator动画的播放、暂停、倒放控制
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦. 一.前言 ...
Skeletal Animation（骨骼动画）
Skeletal Animation(骨骼动画) 有关骨骼动画的东西都放在这里好了. http://en.wikipedia.org/wiki/Skeletal_animation Skeletal ...
html css动画自动旋转,基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 实现的代码. html代码: $('.mod_info2__power3').o ...
python实现钟表动画展示turtle库使用
python实现钟表动画展示turtle库使用注释都很详细的代码如下: # coding=utf-8 import turtlefrom datetime import * # 抬起画笔,向前运动 ...
html animation 属性,CSS3动画属性：动画(animation)
一:动画(animation)的参数详解由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
Unity3D Animation Rig 蜘蛛动画
Unity3D Animation Rig 蜘蛛动画

用animation实现钟表动画

用animation实现钟表动画相关推荐

最新文章

热门文章