纯css实现钟表摆动效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700); body { overflow: hidden; } .pyramid { position: absolute; right: 50vw; bottom: 0; width: 0; height: 0; transform: translateX(0); border-style: solid; border-width: 0 100vw 120vw 100vw; border-color: transparent transparent #E8A653 transparent; } .sand { position: absolute; bottom: 0; width: 100%; height: 9vw; min-height: 8rem; background: #FFBD4D; } .ternary-system { position: absolute; bottom: 0; right: 17vw; } .sun { position: relative; border-radius: 50%; background: #FFDE72; } .sun.primary { position: absolute; top: 15vw; left: 5vw; width: 1rem; height: 1rem; } .sun.secondary { position: absolute; top: 5vw; left: 11vw; width: 16vw; max-width: 6rem; height: 16vw; max-height: 6rem; } .sun.ternary { right: 0; transform: translateX(10.8rem); width: 80vw; max-width: 800px; height: 80vw; max-height: 800px; } .pendulums { position: absolute; width: 50px; height: 200px; right: 35vw; top: -120px; perspective: 400px; } .pendulum { position: absolute; width: 50px; height: 200px; right: 44%; top: 0; left: 50%; transform: translateZ(-300px) translateX(-50%); } .pendulum.shadow { top: 263%; left: -65%; bottom: 0; transform-origin: 50% 0; transform: translateX(-50%) scaleY(-1) scaleZ(2) rotateY(-30deg) rotateX(-75deg) translateZ(300px); } .pendulum .bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; display: block; width: 20px; height: 200px; background: #333; } .pendulum .string { position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 150px; background: #333; } .pendulum .weight { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; width: 50px; height: 50px; border-radius: 50%; background: #333; } .pendulum .motion { position: absolute; height: 200px; width: 50px; transform-origin: 50% 10px; animation: swing 1600ms infinite ease-in-out; } .pendulum.shadow .bar, .pendulum.shadow .string, .pendulum.........完整代码请登录后点击上方下载按钮下载查看
网友评论0