transform钟表动画

拼搏现实的明天。 2021-11-13 22:14 338阅读 0赞

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="UTF-8">  
  <title></title>  
  <style type="text/css">  
   \*\{  
    margin: 0;  
    padding: 0;  
   \}  
   div\{  
    box-sizing: border-box;  
   \}  
   \#clock\{  
    width: 200px;  
    height: 200px;  
    border: 4px solid brown;  
    border-radius: 50%;  
    position: relative;  
   \}  
   \#minute\{  
    width: 6px;  
    height: 60px;  
    background-color: orangered;  
    position: absolute;  
    top: 40px;  
    left: 94px;  
    /\*更换圆心点\*/  
    transform-origin: bottom;  
    /\*调用动画\*/  
    -webkit-animation: run 3600s linear 0s infinite;  
   \}  
   \#second\{  
    width: 4px;  
    height: 80px;  
    background-color: cadetblue;  
    position: absolute;  
    top: 20px;  
    left: 95px;  
    /\*更换圆心点\*/  
    transform-origin: bottom;  
    /\*调用动画\*/  
    -webkit-animation: run 60s linear 0s infinite;  
   \}  
     
     
   /\*声明动画\*/  
   @-webkit-keyframes run\{  
    from\{transform: rotate(0deg);\}  
    to\{transform: rotate(360deg);\}  
   \}  
  </style>  
 </head>  
 <body>  
  <div id="clock">  
   <div id="minute"></div>  
   <div id="second"></div>  
  </div>  
 </body>  
</html>

转载于:https://www.cnblogs.com/KiligYou/p/11060754.html

发表评论取消回复

表情：

评论列表（有 0 条评论，338人围观）

还没有评论，来说两句吧...

相关阅读

相关 transform、transition、animation动画效果

transform(变形) transition(过渡) animation(动画) 一、transform：直接改变大小和位置，显示改变的结

爱被打了一巴掌/ 2022年12月25日 14:55/ 0 赞/ 183 阅读

相关 css3动画transform-太极图

学习动画，记录一下。 HTML部分：类似图标，所以用了i标签。 <i class="taichi"></i> css部分： .taichi {

爱被打了一巴掌/ 2022年12月15日 03:39/ 0 赞/ 155 阅读

相关【CSS】transform动画技术

[漫谈CSS transform动画技术][CSS transform] [CSS transform]: https://www.webhek.com/post/css-

旧城等待，/ 2022年11月06日 14:57/ 0 赞/ 142 阅读

相关 CSS3-钟表动画

钟表动画： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-

╰+攻爆jí腚メ/ 2022年06月14日 06:49/ 0 赞/ 296 阅读

相关探究transform动画元素的z-index

z-index 和 translate3d 在一次需求中，需要做出三张卡牌走马灯式滚动的效果，由于在前面的一张卡牌需要挡住后面的卡牌，自然而然地就用 z-index 使前

不念不忘少年蓝@/ 2022年05月20日 02:21/ 0 赞/ 150 阅读

相关 canvas 钟表

<!doctype html> <html> <head> <meta charset="utf-8">

╰半橙微兮°/ 2022年05月18日 02:39/ 0 赞/ 246 阅读

相关 javascript制作钟表

JAVAscript制作钟表本文用js制作一款简单的钟表练习代码如下欢迎大家交流，欢迎各位大佬指正。 HTML部分 //创建钟表 <bod

朱雀/ 2022年01月31日 23:17/ 0 赞/ 312 阅读

相关 C#动画实现钟表

1界面设计部分 <Window x:Class="钟表.MainWindow" xmlns="http://schemas.microsoft

红太狼/ 2021年12月21日 02:55/ 0 赞/ 336 阅读

相关【CSS3动画】过渡 transition、转换transform与动画animation

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 非商业用途自由转载，保持署名，注明出处！ -------

àì夳堔傛蜴生んèń/ 2021年12月05日 01:17/ 0 赞/ 775 阅读

相关 transform钟表动画

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <s

拼搏现实的明天。/ 2021年11月13日 22:14/ 0 赞/ 339 阅读