js制作动态时钟特效,时钟图样设计与动画效果设置

　　我想找份工作！

预先准备：

　　首先这个动画是根据之前的加载动画制作的，很酷。这些思路都是一样的，在这个动画上做了一个创新。

预习知识点：

　　具有flex布局的动画帧背景渐变var()和calc()场景。多个动画操作延迟使用动画

开始

核心代码分析

　　 Transform:rotate(calc(30 deg * var(-I)))；transform-origin:0 250像素；动画：旋转5s线性无限；动画-延迟：calc(0.42s * var(-I))；根据HTML内置的style style，得到每个对应的I值，分别计算盒子在每个时刻的旋转程度，同时我们改变它们的初始旋转点，否则，每一个只是在中心旋转，变成一个圆。

　　还是装载的思路，只是这次尺寸比例放大了。

HTML代码搭建：

　　 div class= box div class= color style=-I:1 1/div div class= color style=-I:2 2/div div class= color style=-I:3 3/div div class= color style=-I:4 4/div div class= color style=-I:5 5/div class= color style=-I:6 6/div class= color style= 填充：0px框大小：边框-框；} body { background:-WebKit-linear-gradient(左上，粉色，rgb(90，83，83))；显示器：flex最小高度：100 VH justify-内容：居中；对齐-项目：居中；section {高度：500 px宽度：500像素.框{位置：相对；高度：500像素宽度：500像素显示器：flexjustify-content:居中；对齐-项目：居中；边框：5px纯色# e2adb6边界半径：50%;//边框：2px纯红；悬停颜色{动画-播放-状态：暂停；}:在{内容：""之后；显示：块；高度：25px宽度：25px背景色：# 000;z指数：4;边界半径：50%;} @关键帧旋转{ 0%，50% { text-shadow:无；颜色：# 000;transform:rotate(calc(30 deg * var(-I)))scale(1)；} 50.1%，100% { text-shadow: 0 0 10px #000，0 0 15px # 000颜色：# fff transform:rotate(calc(30 deg * var(-I)))scale(1.01)；} } .颜色{位置：绝对；top:0；颜色：# f2f2f2不透明度：6;字体大小：20pxtransform:rotate(calc(30 deg * var(-I))；变换原点：0 250像素；行高：50px动画：旋转5s线性无限；动画-延迟：calc(0.42s * var(-I))；} @关键帧更改1 { 0% {变换：平移y(-50%)旋转(0度)；transform-origin:0 100 px；} 100% {转换：平移y(-50%)旋转(360度);transform-origin:0 100 px；} } @关键帧更改2 { 0% { transform:translate y(-50%)rotate(-30 deg)rotate(0 deg)；变换原点：0 150像素；} 100% {变换：平移y(-50%)旋转(-30度)旋转(360度);变换原点：0 150像素；} } .小时{位置：绝对；top:40%；宽度：5pxtransform:平移y(-50%)；高度：100像素背景色：# f2f2f2动画：变更1 24s线性无限；*在{内容： 之后；位置：绝对；top:0；左：-10px；宽度：20px高度：20 px border-bottom:5px solid # f2f2f 2；border-right:5px solid # f2f2f 2；变换：旋转(-135度);} } .分钟{位置：绝对；top:36%；宽度：3px高度：150像素背景色：# 000;变换：平移(-50%)旋转(-30 );变换原点：0 150像素；动画：更改2 2s线性无限；*在{内容： 之后；位置：绝对；top:0；左：-10px；//显示：阻止宽度：20px高度：20px边框-底部：3px实心# 000;右边框：3px固体# 000变换：旋转(-135度);} } } }}到此这篇关于半铸钢钢性铸铁(铸造半钢)实现漂亮的时钟动画效果的实例代码的文章就介绍到这了，更多相关钢性铸铁时钟动画内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。