用lottie写一个按钮悬浮小人动画
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Call to Action Hype Man</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:600&display=swap" rel="stylesheet"> <style> html, body { height: 100%; } body { margin: 0; display: flex; align-items: center; justify-content: center; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; background: linear-gradient(tobottom, rgba(255,242,232,1) 0%,rgba(254,215,223,1) 100%); } .zone { border-radius: 100%; width: 500px; height: 500px; display: flex; align-items: center; justify-content: center; border: 1px dashed #818181; flex-shrink: 0; } button { border: 0; position: relative; padding: 0; cursor: pointer; background: transparent; outline: none; } .bodymovin { width: 62px; /* 310 */ height: 34px; /* 170 */ position: absolute; top: -29px; right: 4%; z-index: 0; pointer-events: none; transition: transform 0s; } .bodymovin--hidden { transform: translateY(30px); transition: transform 0.55s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .text { position: relative; padding: 15px 34px; color: #fff; font-size: 16px; font-weight: 600; display: block; background: #442770; border-radius: 3px; transition: background 0.2s ease-in-out; } button:hover .text.........完整代码请登录后点击上方下载按钮下载查看
网友评论0