纯css实现简洁线体勾画的指针转动吊钟钟摆动画效果代码
代码语言:html
所属分类:动画
代码描述:纯css实现简洁线体勾画的指针转动吊钟钟摆动画效果代码
代码标签: 纯 css 简洁 线体 勾画 指针 转动 吊钟 钟摆 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } @property --time { syntax: "<number>"; initial-value: 0; inherits: true; } body, html { height: 100%; } body { height: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(45deg, #6f6868, #f5f4f4); } .clock { width: 300px; height: 500px; --time: 0; animation: time 3600s infinite linear; } .face { width: 300px; height: 300px; border-radius: 50rem; position: relative; border: 2px solid black; } .hand { position: absolute; top: 0; left: 50%; height: 50%; width: 5px; background-color: black; transform-origin: bottom; } .hand#seconds { rotate: calc((360 * var(--time) + var(--init-angle)) * 1deg); } .hand#minute { rotate: calc(6deg * var(--time)); } .hand#hour { rotate: calc(1deg * var(--time)); } .pendulum { width: 100%; height: calc(100% - 300px); display: flex; flex-direction: column; align-items: center; justify-content: center; } .thread { height: 200px; width: 5px; background-color: #000; transform-origin: top; rotate: calc(asin(calc(sin(calc(var(--time) * 360deg)) * 0.1))); }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0