css实现牛顿摆动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现牛顿摆动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; margin: 0; background: #f5f5f5; display: flex; } .cradle { display: flex; margin: auto; padding: 40px; padding-bottom: 20px; position: relative; } .frame { position: absolute; top: 30px; left: 0; width: 100%; height: 100%; border: 10px solid black; border-bottom: none; border-radius: 2em 2em 0 0; } .frame:before { width: 50px; position: absolute; left: -30px; height: 10px; background: black; content: " "; bottom: 0; } .frame:after { width: 50px; position: absolute; right: -30px; height: 10px; background: black; content: " "; bottom: 0; } .balls { align-self: center; display: flex; } .ball { width: 3vw; display: block; position: relative; } .ball:before { display: block; margin-left: 1.5vw; width: 1px; height: 20vw; background: grey; content: " "; } .ball:after { width: 3vw; height: 3vw; display: block; background: radial-gradient(circle at 100px 100px, #454545, #dedede); border-radius: 50%; position: relative; content: " "; } @keyframes first-ball-move { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0