css实现小球钟摆动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现小球钟摆动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { box-sizing: border-box; position: relative; } body { background: black; margin: 0; } .base { display: flex; align-items: center; justify-content: center; border-top: 5px solid white; margin: auto; max-width: 25px; } .thread::after { content: ""; position: absolute; top: 0; left: calc(50% - 1px/2); bottom: 25px; background: rgba(255, 255, 255, 0.5); width: 1px; } .thread { display: inline-flex; align-items: flex-end; transform-origin: 50% 0%; position: absolute; top: -2px; animation: 1s swing ease-in-out infinite alternate; transform: rotate(-45deg); } .thread .pendulum { display: inline-block; width: 25px; height: 25px; border-radius: 50%; background: radial-gradient(white, #795548); } :nth-child(0) { animation-duration: 550ms; height: 150px; } :nth-child(1) { animation-duration: 555ms; height: 162.5px; } :nth-child(2) { animation-duration: 560ms; height: 175px; } :nth-child(3) { animation-duration: 565ms; height: 187.5px; } :nth-child(4) { animation-duration: 570ms; height: 200px; } :nth-child(5) { animation-duration: 575ms; height: 212.5px; } :nth-child(6) { animation-duration: 580ms; height: 225px; } :nth-child(7) { animation-duration: 585ms; height: 237.5px; } :nth-child(8) { animation-duration: 590ms; height: 250px; } :nth-child(9) { animation-duration: 595ms; height: 262.5px; } :nth-child(10) { animation-duration: 600ms; height: 275px; } :nth-child(11) { animation-duration: 605ms; height: 287.5px; } :nth-child(12) { animation-duration: 610ms; height: 300px; } :nth-child(13) { animation-duration: 615ms; height: 312.5px; } :nth-child(14) { animation-duration: 620ms; height: 325px; } :nt.........完整代码请登录后点击上方下载按钮下载查看
网友评论0