css实现鸭子荡秋千动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现鸭子荡秋千动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; background-color: #81d4fa; } body:after { content: ""; display: block; width: 100%; height: calc(50% - 185px); bottom: 0; position: absolute; background-color: #66bb6a; } .swing { position: relative; } .swing:before { content: ""; display: block; width: 15px; height: 15px; background-color: #90a4ae; position: absolute; left: -7.5px; top: -7.5px; border-radius: 50%; z-index: 100; } .swing .base-left-block { position: absolute; width: 16px; height: 8px; background-color: #90a4ae; left: -90px; top: 178px; } .swing .base-right-block { position: absolute; width: 16px; height: 8px; background-color: #90a4ae; left: 76px; top: 178px; } .swing .base-left { width: 4px; height: 200px; background-color: #90a4ae; position: absolute; left: -2px; transform-origin: top center; transform: rotate(25deg); } .swing .base-right { width: 4px; height: 200px; background-color: #90a4ae; position: absolute; left: -2px; transform-origin: top center; transform: rotate(-25deg); } .swing .string { width: 4px; height: 150px; background-color: black; animation: swing 1.25s infinite alternate ease-in-out; transform: rotate(-35deg); position: absolute; } .swing .duck { width: 40px; height: 90px; position: absolute; bottom: 0; left: calc(50% - 20px); } .swing .duck .duck-head { width: 25px; height: 25px; background-color: white; position: relative; border-radius: 15px 15px 12px 12px; } .swing .duck .duck-head .duck-eye { position: absolute; width: 4px; height: 4px; background-color: black; border-radius: 50%; left: 12px; top: 6px; } .swing .duck .duck-head .duck-bill { position: absolute; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0