上記の2つの単純なアニメーションはあるアニメーションのタイミング機能:ステップ( ); この属性の実装は、特定の達成する方法は、以下を参照してください。
私たちの材料である。この上の写真、
一部の人々は、それが次の図を見て、重要ではありませんキーフレームコンテナ、および工程間の関係を非常に理解しないかもしれません
見てください、次の
図に示すように、材料は、使用します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } @keyframes secondRun { 0% { transform: rotate(180deg); } /* 由于,我们只需要他 转一圈,所以,我们定义好一圈的角度即可 */ 100% { transform: rotate(540deg); } } .wra { width: 200px; height: 200px; position: relative; left: calc(50% - 100px); top: 100px; /*父元素的 基本布局*/ background-image: url('./img/clock/clock.png'); background-size: 100% 100%; } .hour { position: absolute; left: 95px; top: 95px; /*把时针,定位到 中间点*/ width: 10px; height: 45px; background-image: url('./img/clock/hour.png'); background-size: 100% 100%; z-index: 2; } .minute { position: absolute; left: 95px; top: 95px; /*把分针定位到中间点*/ width: 10px; height: 66px; background-image: url('./img/clock/minute.png'); background-size: 100% 100%; animation: secondRun 3600s infinite steps(60, end); /*steps 把总时长分割成 60 3600/60 =60 所以需要运动 60步* 60s走一次 */ transform-origin: center 5px; /*要旋转,就要有旋转的中心点, 设置旋转的中心点。*/ transform: rotate(180deg); /*因为,默认的指针是指向 6 我们需要让他指向 12 所需要旋转 180度 */ z-index: 1; } .second { position: absolute; left: 98px; top: 77px; /*把秒针定位到中间点*/ width: 5px; height: 84px; background-image: url('./img/clock/second.png'); background-size: 100% 100%; animation: secondRun 60s infinite steps(60, end); /*steps 把总时长分割成 1 60/60 = 1 所以需要运动 60步, 1s 走一次*/ transform-origin: center 23px; /*要旋转,就要有旋转的中心点, 设置旋转的中心点。*/ transform: rotate(180deg); /*因为,默认的指针是指向 6 我们需要让他指向 12 所需要旋转 180度 */ z-index: 3; } </style> </head> <body> <div class="wra"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </div> </body> </html>
以下是素材,如何获取素材? 右键 检查, 就能找到 该图片的url 了。