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 相关文章推荐
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
CSS3的新特性介绍
Oct 31 HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
5个HTML5的常用本地存储方式详解与介绍
CSS实现fullpage.js全屏滚动效果的示例代码
css animation配合SVG制作能量流动效果
如何通过 CSS 写出火焰效果
You might like
PHP中文分词的简单实现代码分享
2011/07/17 PHP
浅析PHP Socket技术
2013/08/02 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python中join函数简单代码示例
2018/01/09 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
生物科学专业个人求职信范文
2013/12/05 职场文书
24岁生日感言
2014/01/13 职场文书
一年级班主任寄语
2014/01/19 职场文书
环卫工作汇报材料
2014/10/28 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
钱学森观后感
2015/06/04 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
MySQL 逻辑备份 into outfile
2022/05/15 MySQL