利用html5制作一个时钟动画效果-H5教程-PHP中文网

首页

web前端

H5教程

利用html5制作一个时钟动画效果

王林

Jan 05, 2021 am 10:37 AM

html5

利用html5制作一个时钟动画效果

我们先来看下效果图（不考虑颜色搭配）：

（学习视频分享：html5视频教程）

我们首先要理解如何去实现这个时钟，暂时不要考虑动画，学着将问题进行拆解，一步一步实现。

首先我们需要画个方形，有个边框，给一个圆角就可以实现最外边的圆环再通过一个长的矩形旋转多个就可以实现刻度

只要再画一个白色圆面去覆盖就可以实现标准的刻度

最后再加上三个矩形和中间的小圆面就可以实现时钟的初始状态了

代码实现

以上过程理解了之后，代码实现就简单多了，唯一需要考虑的就是代码的优化问题，以下为了简单明了每一步是如何实现，存在很多重复的代码。

关于动画，我们只需要设置旋转动画就可以了，时分秒针的动画只需要改变不同的时间就可以了。

具体细节注意见代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .clock{
            width: 300px;
            height: 300px;
            border: 10px solid #ccc;
            /*百分比参照的是实际宽高*/
            border-radius: 50%;
            margin: 20px auto;
            position: relative;
        }
        .line{
            width: 8px;
            height: 300px;
            background-color: #ccc;
            position: absolute;
 
            /*实现居中*/
            /*参照父元素的宽*/
            left: 50%;
            top: 0;
            /*参照元素本身*/
            transform: translate(-50%,0);
 
            /*保留，否则会被覆盖*/
 
 
        }
        .line2{
            transform: translate(-50%,0) rotate(30deg);
        }
        .line3{
            transform: translate(-50%,0) rotate(60deg);
        }
        .line4{
            transform: translate(-50%,0) rotate(90deg);
        }
        .line5{
            transform: translate(-50%,0) rotate(120deg);
        }
        .line6{
            transform: translate(-50%,0) rotate(150deg);
        }
 
        .cover{
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .hour{
            width: 6px;
            height: 80px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
 
            /*设置轴心*/
            transform-origin: center bottom;
            /*动画*/
            -webkit-animation: move 43200s linear infinite;
 
        }
        .minute{
            width: 4px;
            height: 90px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
 
            /*设置轴心*/
            transform-origin: center bottom;
            /*动画*/
            -webkit-animation: move 3600s linear infinite;
 
 
        }
        .second{
            width: 2px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
 
            /*设置轴心*/
            transform-origin: center bottom;
            /*动画*/
            -webkit-animation: move 60s infinite steps(60);
            /*linear与step(60)重复*/
 
        }
        .center{
            width:20px;
            height:20px;
            background-color: #ccc;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
 
        }
 
        /*创建移动动画*/
        @keyframes move{
            0%{
                transform: translate(-50%,-100%) rotate(0deg);
            }
            100%{
                transform: translate(-50%,-100%) rotate(360deg);
            }
 
        }
    </style>
</head>
<body>
<div>
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
    <div class="line line6"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

相关推荐：html5教程

以上是利用html5制作一个时钟动画效果的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：csdn。如有侵权，请联系admin@php.cn删除

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码：可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构，提高SEO。2.ARIA属性如aria-label增强可访问性，辅助技术用户可顺利使用网页。

H5与HTML5相同吗？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的，但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准，包含新标签和API。2."h5"通常是HTML5的简称，但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5的功能是什么？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五个版本，它为开发者提供了更强大的工具集，使得创建复杂的网页应用变得更加简单。H5的核心功能包括：1）元素允许在网页上绘制图形和动画；2）语义化标签如、等，使网页结构清晰，利于SEO优化；3）新API如GeolocationAPI，支持基于位置的服务；4）跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。