运用CSS3 动漫 美术绘画 圆形动态性数字时钟

2020-10-16 03:16 jianzhan

 甚么是动漫?这是大家应当先掌握的难题。依照百度搜索百科的解释动漫是选用逐帧拍攝目标并持续播发而产生健身运动的影象技术性。无论拍攝目标是甚么,要是它的拍攝方法是选用的逐格方法,收看时持续播发产生了主题活动影象,它便是动漫。放在 CSS3 广州中山大学致能够了解为使元素从1种款式慢慢变成另外一种款式,将要好几个过渡实际效果放在1起产生的实际效果。CSS3 动漫是根据 "重要帧",来操纵动漫的每步。这里又有1个难题,甚么是重要帧?我了解为界定动漫实行的時间点和在该時间点上的款式是甚么。

先给大伙儿展现实际效果图:

 

根据 CSS3 动漫绘图动态性数字时钟的流程

界定网页页面合理布局和款式

界定重要帧

  • 界定网页页面合理布局和款式
  • 界定重要帧
  • 启用动漫完成动态性实际效果启用动漫完成动态性实际效果

留意点

  • 在分针和秒针开展转动时要确保是匀速转动,即 transform-timing-function 速率曲线图的值为 linear
  • 在分针和秒针开展转动时要确保转动原点的部位,即 transform-origin 的值要为 center、bottom(还可以运用像素和百分比开展更改)
  • 分针和秒针开展转动的速率要区别

下列是 HTML 源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf⑻">
        <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 动漫 美术绘画 圆形动态性数字时钟,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!