巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站资讯News

操纵CSS3 动画 绘画 圆形静态时钟

0
一佰互联网站扶植(www.taishanly.com) 宣布时候:2020-04-21 17:21:46 阅读数: 97

 甚么是动画?这是咱们应当先领会的题目。根据百度百科的诠释动画是接纳逐帧拍摄工具并持续播放而构成勾当的影象手艺。不管拍摄工具是甚么,只需它的拍摄体例是接纳的逐格体例,旁观时持续播放构成了勾当影象,它便是动画。放在 CSS3 中大抵能够懂得为使元素从一种款式逐步变为另外一种款式,行将多个过渡结果放在一路构成的结果。CSS3 动画是经由过程 "关头帧",来节制动画的每步。这里又有一个题目,甚么是关头帧?我懂得为界说动画履行的时候点和在该时候点上的款式是甚么。

先给大师展现结果图:

 

经由过程 CSS3 动画绘制静态时钟的步骤

界说页面规划和款式

界说关头帧

  • 界说页面规划和款式
  • 界说关头帧
  • 挪用动画完成静态结果挪用动画完成静态结果

注重点

  • 在分针和秒针停止扭转时要保障是匀速扭转,即 transform-timing-function 速率曲线的值为 linear
  • 在分针和秒针停止扭转时要保障扭转原点的地位,即 transform-origin 的值要为 center、bottom(也能够操纵像素和百分比停止转变)
  • 分针和秒针停止扭转的速率要辨别

以下是 HTML 源码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>clock</title>    </head>    <body>        <div id="main">            <div id="second"></div>            <div id="minute"></div>        </div>    </body></html>

以下是 CSS3 源码

#main {    width: 300px;    height: 300px;    border: 5px solid #0881A3;    border-radius: 50%;    margin: 50px auto 0;    position: relative;/*界说表盘款式*/}#second {    width: 5px;    height: 120px;    background: #393E46;    position: absolute;    top: 30px;    left: 150px;    transform-origin: center bottom;    animation: second 60s linear infinite;/*界说秒针款式和静态结果*/}#minute {    width: 10px;    height: 80px;    background: #40A798;    position: absolute;    top: 70px;    left: 147px;    transform-origin: center bottom;    animation: minute 3600s linear infinite;/*界说分针款式和静态结果*/}@keyframes second {    0% {        transform: rotate(0deg);    }    100% {        transform: rotate(360deg);    }}/*界说秒针过渡结果*/@keyframes minute {    0% {        transform: rotate(0deg);    }    100% {        transform: rotate(360deg);    }}/*界说分针过渡结果*/

总结

以上所述是小编给大师先容的操纵CSS3 动画 绘画 圆形静态时钟,但愿对大师有所赞助,若是大师有任何疑难请给我留言,小编会实时答复大师的。在此也很是感激大师对网页设想网站的撑持!

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

上一篇:css完成多边形和梯形盒暗影技能
下一篇: css3 矩阵的操纵详解
[前往消息列表]

相干消息more

29
04月
PHP抓屏函数完成屏幕快照代码分享

复制代码 代码以下:<?php* 屏幕快照$im = imagegrabscreen();imagepng($im, "myscree... >>概况

29
03月
你最厌恶的抖音梗是甚么?最惧怕喜好的音乐被某

简介:抖音,此刻最火的藐视频APP,外面的花腔多,人材多,鬼梗也多;原来便是个全民小文娱的平台,有些素材却也不乏会被歹意操纵,来讲说你最怕的... >>概况

29
04月
PHP把网页保管为word文件的三种体例

一、PHP天生word的两种思绪或道理1.操纵windows上面的 com组件2.操纵PHP将内容写入doc文件当中详细完成体例以下。二、利... >>概况

23
04月
FastDFS装置和设置装备摆设整合Nginx-1.

一:下载FastDFS咱们一共须要三个文件1.FastDFS散布式文件存储体系下载地点:http://codeload.github.co... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站