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实现水平垂直居中效果的方法
Mar 10 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
5个HTML5的常用本地存储方式详解与介绍
CSS实现fullpage.js全屏滚动效果的示例代码
css animation配合SVG制作能量流动效果
如何通过 CSS 写出火焰效果
You might like
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
python实现mysql的读写分离及负载均衡
2018/02/04 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python opencv实现简易画图板
2020/08/27 Python
Python 可视化神器Plotly详解
2020/12/26 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
心得体会怎么写
2013/12/30 职场文书
酒店经理职责
2014/01/30 职场文书
五年级语文教学反思
2014/01/30 职场文书
业务员岗位职责范本
2015/04/03 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL