经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
CSS实现漂亮的时钟动画效果的实例代码_CSS教程_CSS
来源:jb51  时间:2021/4/6 9:28:03  对本文有异议

在这里插入图片描述

我要找工作 !!!

预先准备:

首先这个动画,是根据之前的 Loading 动画制作的,Loading炫酷动画, 这些的思路都是一样的,在这个动画上进行了一次创新。

预习知识点:

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

开始

核心代码分析

  1. transform: rotate(calc(30deg * var(--i)));
  2. transform-origin: 0 250px;
  3. animation: rotate 5s linear infinite;
  4. animation-delay: calc(0.42s * var(--i));

根据在 HTML 上搭建的style 样式, 获取每个对应的i值, 分别计算每个时刻盒子的旋转度数, 同时我们更改他们的初始旋转点, 不然每个都只是中心旋转, 转成了一个圆形。

思路还是loading的制作思路, 只不过这次尺寸比例放大了,

在这里插入图片描述

HTML代码搭建:

  1. <div class="box">
  2. <div class="color" style="--i:1">1</div>
  3. <div class="color" style="--i:2">2</div>
  4. <div class="color" style="--i:3">3</div>
  5. <div class="color" style="--i:4">4</div>
  6. <div class="color" style="--i:5">5</div>
  7. <div class="color" style="--i:6">6</div>
  8. <div class="color" style="--i:7">7</div>
  9. <div class="color" style="--i:8">8</div>
  10. <div class="color" style="--i:9">9</div>
  11. <div class="color" style="--i:10">10</div>
  12. <div class="color" style="--i:11">11</div>
  13. <div class="color" style="--i:12">12</div>
  14. <div class="hours"></div>
  15. <div class="mintues"></div>
  16. </div>

Less代码:

  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. box-sizing: border-box;
  5. }
  6.  
  7. body {
  8. background: -webkit-linear-gradient(left top, pink, rgb(90, 83, 83));
  9. display: flex;
  10. min-height: 100vh;
  11. justify-content: center;
  12. align-items: center;
  13.  
  14. section {
  15. height: 500px;
  16. width: 500px;
  17. .box {
  18. position: relative;
  19. height: 500px;
  20. width: 500px;
  21. display: flex;
  22. justify-content: center;
  23. align-items: center;
  24. border: 5px solid #e2adb6;
  25. border-radius: 50%;
  26. // border: 2px solid red;
  27. &:hover .color {
  28. animation-play-state: paused;
  29. }
  30.  
  31. &::after {
  32. content: "";
  33. display: block;
  34. height: 25px;
  35. width: 25px;
  36. background-color: #000;
  37. z-index: 4;
  38. border-radius: 50%;
  39. }
  40.  
  41. @keyframes rotate {
  42. 0%,
  43. 50% {
  44. text-shadow: none;
  45. color: #000;
  46. transform: rotate(calc(30deg * var(--i))) scale(1);
  47. }
  48.  
  49. 50.1%,
  50. 100% {
  51. text-shadow: 0 0 10px #000,
  52. 0 0 15px #000;
  53. color: #fff;
  54. transform: rotate(calc(30deg * var(--i))) scale(1.01);
  55. }
  56. }
  57.  
  58. .color {
  59. position: absolute;
  60. top: 0;
  61. color: #f2f2f2;
  62. opacity: .6;
  63. font-size: 20px;
  64. transform: rotate(calc(30deg * var(--i)));
  65. transform-origin: 0 250px;
  66. line-height: 50px;
  67. animation: rotate 5s linear infinite;
  68. animation-delay: calc(0.42s * var(--i));
  69. }
  70.  
  71. @keyframes change1 {
  72. 0% {
  73. transform: translateY(-50%) rotate(0deg);
  74. transform-origin: 0 100px;
  75. }
  76.  
  77. 100% {
  78. transform: translateY(-50%) rotate(360deg);
  79. transform-origin: 0 100px;
  80. }
  81. }
  82.  
  83. @keyframes change2 {
  84. 0% {
  85. transform: translateY(-50%) rotate(-30deg) rotate(0deg);
  86. transform-origin: 0 150px;
  87. }
  88.  
  89. 100% {
  90. transform: translateY(-50%) rotate(-30deg) rotate(360deg);
  91. transform-origin: 0 150px;
  92. }
  93. }
  94.  
  95. .hours {
  96. position: absolute;
  97. top: 40%;
  98. width: 5px;
  99. transform: translateY(-50%);
  100. height: 100px;
  101. background-color: #f2f2f2;
  102. animation: change1 24s linear infinite;
  103.  
  104. &::after {
  105. content: "";
  106. position: absolute;
  107. top: 0;
  108. left: -10px;
  109. width: 20px;
  110. height: 20px;
  111. border-bottom: 5px solid #f2f2f2;
  112. border-right: 5px solid #f2f2f2;
  113. transform: rotate(-135deg);
  114. }
  115. }
  116.  
  117. .mintues {
  118. position: absolute;
  119. top: 36%;
  120. width: 3px;
  121. height: 150px;
  122. background-color: #000;
  123. transform: translateY(-50%) rotate(-30deg);
  124. transform-origin: 0 150px;
  125. animation: change2 2s linear infinite;
  126.  
  127. &::after {
  128. content: "";
  129. position: absolute;
  130. top: 0;
  131. left: -10px;
  132. // display: block;
  133. width: 20px;
  134. height: 20px;
  135. border-bottom: 3px solid #000;
  136. border-right: 3px solid #000;
  137. transform: rotate(-135deg);
  138. }
  139. }
  140. }
  141. }
  142. }

到此这篇关于CSS实现漂亮的时钟动画效果的实例代码的文章就介绍到这了,更多相关css时钟动画内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号