CSS实现漂亮的时钟动画效果的实例代码


Posted in HTML / CSS onMarch 30, 2021

CSS实现漂亮的时钟动画效果的实例代码

我要找工作 !!!

预先准备:

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

预习知识点:

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

开始

核心代码分析

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

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

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

CSS实现漂亮的时钟动画效果的实例代码

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>
            <div class="color" style="--i:6">6</div>
            <div class="color" style="--i:7">7</div>
            <div class="color" style="--i:8">8</div>
            <div class="color" style="--i:9">9</div>
            <div class="color" style="--i:10">10</div>
            <div class="color" style="--i:11">11</div>
            <div class="color" style="--i:12">12</div>
            <div class="hours"></div>
            <div class="mintues"></div>
        </div>

Less代码:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background: -webkit-linear-gradient(left top, pink, rgb(90, 83, 83));
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;

  section {
    height: 500px;
    width: 500px;
    .box {
      position: relative;
      height: 500px;
      width: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 5px solid #e2adb6;
      border-radius: 50%;
      // border: 2px solid red;
      &:hover .color {
        animation-play-state: paused;
      }

      &::after {
        content: "";
        display: block;
        height: 25px;
        width: 25px;
        background-color: #000;
        z-index: 4;
        border-radius: 50%;
      }

      @keyframes rotate {
        0%,
        50% {
          text-shadow: none;
          color: #000;
          transform: rotate(calc(30deg * var(--i))) scale(1);
        }

        50.1%,
        100% {
          text-shadow: 0 0 10px #000,
            0 0 15px #000;
          color: #fff;
          transform: rotate(calc(30deg * var(--i))) scale(1.01);
        }
      }

      .color {
        position: absolute;
        top: 0;
        color: #f2f2f2;
        opacity: .6;
        font-size: 20px;
        transform: rotate(calc(30deg * var(--i)));
        transform-origin: 0 250px;
        line-height: 50px;
        animation: rotate 5s linear infinite;
        animation-delay: calc(0.42s * var(--i));
      }

      @keyframes change1 {
        0% {
          transform: translateY(-50%) rotate(0deg);
          transform-origin: 0 100px;
        }

        100% {
          transform: translateY(-50%) rotate(360deg);
          transform-origin: 0 100px;
        }
      }

      @keyframes change2 {
        0% {
          transform: translateY(-50%) rotate(-30deg) rotate(0deg);
          transform-origin: 0 150px;
        }

        100% {
          transform: translateY(-50%) rotate(-30deg) rotate(360deg);
          transform-origin: 0 150px;
        }
      }

      .hours {
        position: absolute;
        top: 40%;
        width: 5px;
        transform: translateY(-50%);
        height: 100px;
        background-color: #f2f2f2;
        animation: change1 24s linear infinite;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: -10px;
          width: 20px;
          height: 20px;
          border-bottom: 5px solid #f2f2f2;
          border-right: 5px solid #f2f2f2;
          transform: rotate(-135deg);
        }
      }

      .mintues {
        position: absolute;
        top: 36%;
        width: 3px;
        height: 150px;
        background-color: #000;
        transform: translateY(-50%) rotate(-30deg);
        transform-origin: 0 150px;
        animation: change2 2s linear infinite;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: -10px;
          // display: block;
          width: 20px;
          height: 20px;
          border-bottom: 3px solid #000;
          border-right: 3px solid #000;
          transform: rotate(-135deg);
        }
      }
    }
  }
}

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

 
HTML / CSS 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
5个HTML5的常用本地存储方式详解与介绍
CSS实现fullpage.js全屏滚动效果的示例代码
css animation配合SVG制作能量流动效果
如何通过 CSS 写出火焰效果
You might like
Zerg剧情介绍
2020/03/14 星际争霸
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
toggle()隐藏问题的解决方法
2014/02/17 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python difflib模块示例讲解
2017/09/13 Python
Python面向对象之继承代码详解
2018/01/29 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
大二法学专业职业生涯规划范文
2014/02/12 职场文书
个人先进事迹材料
2014/12/29 职场文书
2015年母亲节寄语
2015/03/23 职场文书
催款函范文
2015/06/24 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
MySQL系列之三 基础篇
2021/07/02 MySQL