使用css3制作时钟动画

最新推荐文章于 2022-09-03 19:07:05 发布
最新推荐文章于 2022-09-03 19:07:05 发布
阅读量1k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qaqljj/article/details/83652675
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="sad">
    <div class="ke" id="ke1"></div>
    <div class="ke" id="ke2"></div>
    <div class="ke" id="ke3"></div>
    <div class="ke" id="ke4"></div>
    <div class="ke" id="ke5"></div>
    <div class="ke" id="ke6"></div>
    <div id="biaopan">

        <div id="h"></div>
        <div id="i"></div>
        <div id="s"></div>
    </div>
</div>
</div>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .sad {
        margin: 50px auto;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border: 10px solid #888888;
        position: relative;

    }

    .ke {
        background-color: #888888;
        width: 8px;
        height: 300px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }

    #ke1, #ke4 {
        width: 10px;
    }

    #ke2 {
        transform: translate(-50%, 0) rotate(30deg);
        /*必须把之前的translate(-50%, 0)加上重新赋值transform属性会把之前的刷新掉 导致旋转中心偏移*/
    }

    #ke3 {
        transform: translate(-50%, 0) rotate(60deg);
    }

    #ke4 {
        transform: translate(-50%, 0) rotate(90deg);
    }

    #ke5 {
        transform: translate(-50%, 0) rotate(120deg);
    }

    #ke6 {
        transform: translate(-50%, 0) rotate(150deg);
    }

    #biaopan {
        position: absolute;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        background-color: #fff;
    }

    #h {
        position: absolute;
        width: 6px;
        height: 80px;
        background-color: red;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -100%);
        animation-name: clockAnimate;
        animation-duration: 43200s;
        transition-timing-function: linear;
        animation-iteration-count: infinite;
    }

    #i {
        position: absolute;
        width: 4px;
        height: 100px;
        background-color: green;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -100%);
        animation-name: clockAnimate;
        animation-duration: 3600s;
        transform-origin: 50% 100%;
        animation-iteration-count: infinite;
    }

    #s {
        position: absolute;
        width: 2px;
        height: 120px;
        background-color: hotpink;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -100%);
        animation-name: clockAnimate;
        animation-duration: 60s;
        transform-origin: 50% 100%;
        /*transition-timing-function: steps(60); 谷歌不支持这么写*/
        animation-iteration-count: infinite;
        /*-webkit-animation-timing-function:steps(60);//指针跳格效果*/
        animation-timing-function: steps(60);

    }

    #biaopan:before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #000;
        z-index: 200;
    }

    @keyframes clockAnimate {
        from {
            transform: translate(-50%, -100%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -100%) rotate(360deg);
        }
    }

</style>
</body>
</html>

在这里插入图片描述

qaqLjj
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用CSS3制作时钟动画
heartmvcom的博客
03-27 357
CSS3经过发展，对浏览器的兼容性已经很不错了。它功能强大，很多页面特效可以代替JavaScript来实现了。下面就以CSS3来制作一个时钟动画。 浏览器最终效果图： 源代码放出： <!doctype html> <html> <head> <meta charset="utf-8"> <title>heartmv.com</ti...
css3实现时钟动画
仰望 星空的专栏
06-19 2630
用css3实现 时钟动画，背景是4张图片，做成时钟效果 效果图： 其中上面包括4张透明图：圆圈（90*90），时(30*30)，分(30*30)，秒(30*30) html代码： div id="clock" class="clock"> div id="hours" class="hours trans3600">div> div id="min
css实现—时钟动画效果
m0_53394907的博客
09-03 668
css动画实现时钟运转
使用CSS动画实现 时钟转动效果
分享前端技术心得
03-04 3782
使用CSS动画实现 时钟转动效果 此案例主要运用到了css动画的功能。 先将外圆画好，时钟的时间轴先画正中间那一根，绝对定位到中间，然后复制时间轴类名，并依次添加旋转30度的css代码，需要注意的是，后面使用transform:rotate()会覆盖掉前面的transform:translate()属性，因此都要加上translate。然后画一个白色的遮罩层，放在外圆的正中间，以圆形挡住后面的大部分时间轴。接着开始画时、分、秒指针，依然是绝对定位到中间，但是指针的旋转点是自身中底部，因此transform属
css3动画实现时钟效果
qq_42838139的博客
04-16 1038
效果图 html代码 源代码:` <div class="clock"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> ...
CSS3倒计时时钟动画
04-16
解压密码：RJ4587 现在分享的这款CSS3应用是一个倒计时插件，这款倒计时插件的外观还是比较简单大气的，加上阴影，有着3D立体的视觉效果。倒计时标有天、时、分、秒，我们可以很清晰的看出时钟的走动。我们可以将它...
css3：旋转礼盒动画与时钟动画
02-21
css3案例用到的知识通过css3中的3D动画控制X，Y，方向的值来实现动画通过css3中的平移，缩放，旋转，圆角，渐变...学习成为了的动力css3制作的动画效果使我更加喜欢学习前端努力学习前端，学习更多的前端知识为自己加油
HTML5+CSS3内置数字时钟的圆盘时钟动画代码
10-26
HTML5+CSS3内置数字时钟的圆盘时钟动画代码，很拉风的样式
JS+CSS3精美指针时钟图标动画特效
06-11
JS+CSS3制作的精美指针时钟图标动画特效，一款带立体感效果的网页时钟特效。
html5+css3粘稠状液体数字时钟动画代码
06-11
一款可爱的html5+css3粘稠状液体数字时钟动画代码，html5 svg制作卡通风格液体变形动画网页时钟特效。
如何用css动画做时钟,css3时钟动画
weixin_34055902的博客
08-04 272
* {margin:0;padding:0}.clock {width:200px;height:200px;border:1px solid red;border-radius:50%;margin:200px auto;position:relative;}.clock span:first-of-type {display:inline-block;position:absolute;hei...
使用纯CSS3实现转动时钟案例
安静的对折的专栏
01-10 6319
使用纯CSS3属性来实现转动时钟 .box { width: 200px; height: 200px; border: 10px solid #ccc; border-radius: 110px; margin: 100px
用CSS3实现钟表效果
weixin_34288121的博客
03-08 750
背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。 效果图 实现过程 1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置，用border-radius属性将其设置成圆形。 <div id="wrap"><...
时钟——CSS 动画
weixin_34195142的博客
02-27 581
译者注：本文内容为 Clocks - CSS Animation 的译文 译者在编写文章过程中写了 一份最终效果（iOS7 风格）源代码 供大家参考 时钟 这是关于时间的。在本文中，我们将接受创建和设置时钟动画的挑战，使用简单的CSS动画和JavaScript来触发它们。 这是我们使用HTML，CSS，SVG背景和一些JavaScript创建的时钟。我们将使用CSS动画或过渡进行任何移动，并依...
css3--animation实现钟表效果
qq_37635519的博客
05-19 455
<!DOCTYPE html> <html> <head> <title>钟表效果</title> <style type="text/css" media="screen"> *{ padding:0px; margin: 0px; } @keyframes secondrun{ 0%{...
css3动画做一个超简单的时钟
weixin_30571465的博客
10-17 142
话不多说，直接上代码，自己可以设置更漂亮的样子。我的比较丑 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*设置时钟的样子*/ .warp{ ...
【CSS3】设置动画开始播放的时间
O(∩_∩)O
02-24 2794
animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。 语法规则： animation-delay:[,]* 案例演示：     浏览器渲染样式之后2S之后触发move动画。 HTML: CSS: @keyframes move
CSS3制作时钟案例animation练习
qq_43537987的博客
04-19 469
效果展示： 思路： 1.最外层的灰色圆圈是一个div，利用border-radius: 50%;设成圆形。 2.圆圈四周的时刻是六个div经过旋转所得。 3.设一个覆盖层，将中间部分覆盖，便可将矩形变成时刻形状。 4.利用定位和transform,添加时针分针秒针。 5.使针转动，利用动画 animation:zhuan 43200s linear infinite; 大功告成。 代码：...
简易时钟动画
weixin_34405354的博客
08-02 169
这就是我说的简易的表盘，有点简陋了 QaQ 刚学习的时钟动画，觉得还有很多东西要去学习，有时候发现代码真是很神奇的。首先呢 我们需要有一个圆的轮廓，这个就是定义一个div宽和高相同，然后用到了一个css3的属性 border-radius：50% 50% 当然只要是大于等于50%都是可以成圆的。轮廓做出来后我们需要插入60个表盘上的刻度。...
6、使用CSS3制作动画效果。
最新发布
07-08
当使用CSS3制作动画效果时，你可以使用`@keyframes`规则定义动画的关键帧，并使用`animation`属性将它们应用到元素上。下面是一个简单的示例： ```css /* 定义动画的关键帧 */ @keyframes myAnimation { 0% { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值