好玩的CSS3（4）--动画实现时钟+附加JS操作

了解animation

所有动画属性的简写属性，除了animation-play-state

@keyframes

规定动画

属性

animation-name:规定动画的名称（none | custom-ident | string;）
animation-duration:属性指定一个动画周期的时长，单位为s或ms；默认值为0s，表示无动画。
animation-timing-function:属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多timing-function。默认是ease;可以是贝塞尔曲线；也可以是step等
animation-delay:定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
animation-iteration-count:定义动画在结束前运行的次数可以是1次无限循环（infinite）
animation-direction:属性指示动画是否反向播放（normal|reverse|alternate|alternate-reverse|initial|inherit）
animation-fill-mode:用来指定在动画执行之前和之后如何给动画的目标应用样式(none | forwards | backwards | both)
animation-play-state: 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。

部分属性重点值详解

animation-timing-function
关键字：ease，ease-in，ease-out，ease-in-out，linear，step-start，step-end。
贝塞尔曲线：一般用它需要用到可视化图像
steps:steps(number_of_steps, direction);step-start或者step-end，分别对应steps(1, start) 和 steps(1, end)。
animation-direction
normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse 反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse 反向交替，反向开始交替
动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
animation-fill-mode
none 动画执行前后不改变任何样式
forwards 目标保持动画最后一帧的样式
backwards 动画采用相应第一帧的样式
both 动画将会执行 forwards 和 backwards 执行的动作。
animation-play-state
running 当前动画正在运行。
paused 当前动画以被停止。

实现时钟的结构

分析结构:外面一个圆形的div–接着是刻度线（6个div）–最后用一个大的div将其覆盖，展示一下我最自信的画工
整体的HTML代码结构

    <div class="clock"><!-- 时间刻度线 --><div class="line line1"></div><div class="line line2"></div><div class="line line3"></div><div class="line line4"></div><div class="line line5"></div><div class="line line6"></div><!-- 覆盖部分刻度线 --><div class="cover"></div><!-- 分针 --><div class="minute"></div><!-- 秒针 --><div class="second"></div><!-- 放置分针秒针 --><div class="dotted"></div></div>

形成基本的时钟

    <style>.clock{width: 200px;height: 200px;margin: 100px auto;border: 10px solid #000000;border-radius: 110px;position: relative;}.line{width: 4px;background: grey;position: absolute;height: 100%;left: 50%;margin-left: -2px;}/* 通过旋转实现各个时间点 */.line2{transform: rotate(30deg);}.line3{transform: rotate(60deg);}.line4{transform: rotate(90deg);}.line5{transform: rotate(120deg);}.line6{transform: rotate(150deg);}.line1,.line4{width: 6px;margin-left: -3px;}/* 覆盖时间点，覆盖居中显示 */.cover{height: 160px;width: 160px;background: #FFFFFF;position: absolute;left: 50%;top: 50%;border-radius: 80px;margin-left: -80px;margin-top: -80px;}</style>

画出分针和秒针

        .dotted{width: 20px;height: 20px;border-radius: 10px;left: 50%;top: 50%;position: absolute;background: black;margin-left: -10px;margin-top: -10px;}.minute{position: absolute;left: 50%;width: 4px;height: 75px;background: green;top: 25px;margin-left: -2px;}.second{position: absolute;left: 50%;width: 2px;height: 95px;background: gold;top: 5px;margin-left: -1px;transform-origin: bottom center;}

让时间走动
上面的所有方法只要通过定位层级和旋转基本都能实现的，现使用动画解决秒针和分针走动。

动画规则
秒针走一圈是是360度，60秒,一步一秒。分针走一圈也是同理,定义动画规则

        @keyframes time_rotate {from {}to{transform: rotate(360deg)}}

秒针旋转360度需要60s，那么每一秒走一步，无限次。

        .second{........transform-origin: bottom center;animation: time_rotate 60s steps(60) 0s infinite;}

分针走一圈也是360度，需要60分钟…

        .minute{.......transform-origin: bottom center;animation: time_rotate 3600s steps(60) 0s infinite;}

我们可以利用该效果配合我们的JS来控制

加个时针

......<!-- 时针 --><div class="hour"></div><!-- 分针 --><div class="minute"></div>
......

        .hour{position: absolute;left: 50%;width: 6px;height: 55px;background: red;top: 45px;margin-left: -3px;transform-origin: bottom center;}

实现JS，这里我们使用定时器，结合动画效果来实现；之前的动画效果要去除掉

        .minute{transform-origin: bottom center;/* animation: time_rotate 3600s steps(60) 0s infinite; */}.second{transform-origin: bottom center;/* animation: time_rotate 60s steps(60) 0s infinite; */}/* @keyframes time_rotate {from {}to{transform: rotate(360deg)}} */

JS代码

    let secDom = document.querySelector('.second')let minDom = document.querySelector('.minute')let hourDom = document.querySelector('.hour')// 获取现在的时分秒let timerId = setInterval(function(){let timer = new Date()let tHour = timer.getHours()let tMin = timer.getMinutes()let tSec = timer.getSeconds()// 将其可视化// 秒针可视化,当前秒数应旋转多少度let secDeg = 360/60 * tSecsecDom.style.transform = `rotate(${secDeg}deg)`// 分针可视化,当前分数应旋转多少度let minDeg = 360/60 * tMinminDom.style.transform = `rotate(${minDeg}deg)`// 时钟可视化，当前小时应旋转多少度let hourDeg = 360/12 * tHourhourDom.style.transform = `rotate(${hourDeg}deg)`},1000)

整改后的HTML和CSS

    <div class="clock"><div class="line line1"></div><div class="line line2"></div><div class="line line3"></div><div class="line line4"></div><div class="line line5"></div><div class="line line6"></div><div class="cover"></div><div class="hour"></div><div class="minute"></div><div class="second"></div><div class="dotted"></div></div>

.clock{width:200px;height:200px;margin:100px auto;border:10px solid #000;border-radius:110px;position:relative}.line{width:4px;background:grey;position:absolute;height:100%;left:50%;margin-left:-2px}.line2{transform:rotate(30deg)}.line3{transform:rotate(60deg)}.line4{transform:rotate(90deg)}.line5{transform:rotate(120deg)}.line6{transform:rotate(150deg)}.line1,.line4{width:6px;margin-left:-3px}.cover{height:160px;width:160px;background:#fff;position:absolute;left:50%;top:50%;border-radius:80px;margin-left:-80px;margin-top:-80px}.dotted{width:20px;height:20px;border-radius:10px;left:50%;top:50%;position:absolute;background:black;margin-left:-10px;margin-top:-10px}.hour{position:absolute;left:50%;width:6px;height:55px;background:red;top:45px;margin-left:-3px;transform-origin:bottom center}.minute{position:absolute;left:50%;width:4px;height:75px;background:green;top:25px;margin-left:-2px;transform-origin:bottom center}.second{position:absolute;left:50%;width:2px;height:95px;background:gold;top:5px;margin-left:-1px;transform-origin:bottom center}

好玩的CSS3（4）--动画实现时钟+附加JS操作相关推荐

html显示时钟翻页 js,js css3翻页数字时钟代码
特效描述:js css3翻页数字时钟.js获取本地时间数字时钟翻页动画代码. 代码结构 1. 引入JS 2. HTML代码 'use strict'; function _classCallCheck ...
CSS3 新年动画贺卡电子贺卡动画效果-html5特效
项目完成下载地址: https://download.csdn.net/download/kingrome2017/10411712 移动端性能优化几点建议简化结构层标签少用图片,用CSS3 完成 ...
使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果
目的: 利用html5,css实现钟摆效果知识点: 1) 利用position/left/top和calc()实现元素的水平和垂直居中: 2) 利用CSS3的animation/transform/ ...
哈哈，又找到几个强大的html5+css3的动画效果
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...
css动画放大延迟,css3延时动画
不太理解属性都是什么意思,但是有动画效果,我也是惊呆了 #animated_div{animation:animated_div 4s 1; -moz-animation:animated_div 4 ...
8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...

好玩的CSS3（4）--动画实现时钟+附加JS操作

了解animation

@keyframes

属性

部分属性重点值详解

实现时钟的结构

我们可以利用该效果配合我们的JS来控制

好玩的CSS3（4）--动画实现时钟+附加JS操作相关推荐

最新文章

热门文章