偷鼠标 特效,点击按钮试试
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Click the button!</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:200,700&display=swap" rel="stylesheet"> <link rel='stylesheet' href='https://unpkg.com/backpack.css'> <style> html { font-size: 18px; } @media (min-width: 900px) { html { font-size: 24px; } } body { font-family: 'Montserrat', sans-serif; font-weight: 300; line-height: 1.45; color: #0F1108; } h1 { font-size: 2.2rem; margin: 0; font-weight: 600; line-height: 1.15; } @media (min-width: 900px) { h1 { font-size: 2.488rem; } } h2 { font-size: 1.4rem; margin: 0.5rem 0; line-height: 1.15; font-weight: 200; } @media (min-width: 900px) { h2 { margin: 1rem 0; font-size: 1.44rem; } } p { margin-top: 0.25rem; } @media (min-width: 900px) { p { margin-top: 0.5rem; } } a { color: #0F1108; text-decoration: none; border-bottom: currentcolor1px solid; } .container { max-width: 520px; margin: 0 auto; padding: 0 1rem 100px 1rem; } @media (min-width: 900px) { .container { max-width: 650px; padding: 0 1rem 90px 1rem; } } .app { position: relative; background: #F2E9DE; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 2rem); margin: 1rem; overflow: hidden; } .app--debug .grab-zone { background: rgba(0, 0, 0, 0.15); } .app--debug .grab-zone__debug { display: block; } .app--debug .grab-zone__danger { background: rgba(0, 0, 0, 0.15); } .app--debug .grabber__arm-wrapper { background: rgba(0, 0, 0, 0.15); } .grab-zone-wrapper { position: absolute; bottom: 0; right: 0; -webkit-transform: translateX(30%) translateY(50%); transform: translateX(30%) translateY(50%); } .grab-zone { display: flex; align-items: center; justify-content: center; width: 700px; height: 700px; border-radius: 50%; } .grab-zone__danger { display: flex; align-items: center; justify-content: center; width: 400px; height: 400px; border-radius: 50%; } .grab-zone__debug { display: none; position: absolute; width: 300px; top: -100px; font-size: 14px; text-align: center; text-transform: uppercase; } .grabber { position: relative; width: 100px; height: 100px; } .grabber__arm-wrapper { position: absolute; top: -80px; width: 24px; height: 260px; } .grabber__arm { position: relative; width: 24px; height: 200px; background: #7D9A9E; border-radius: 20px; overflow: visible; -webkit-transform: translateY(100%); transform: translateY(100%); transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } .grabber__hand { display: block; position: absolute; top: -12px; -webkit-transform: scale(1.4) rotate(-10deg) translateY(100%); transform: scale(1.4) rotate(-10deg) translateY(100%); -webkit-transform-origin: bottom center; transform-origin: bottom center; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .grabber__face { position: absolute; width: 75px; height: 84px; right: 5%; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .grabber__body { position: absolute; top: 50%; left: 0%; width: 110px; height: 95px; border-radius: 50%; background: #7D9A9E; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .grabber--waiting .grabber__hand { -webkit-transform: scale(1.4) rotate(-10deg); transform: scale(1.4) rotate(-10deg); } .grabber--waiting .grabber__arm { -webkit-transform: translateY(80%); transform: translateY(80%); } .grabber--waiting .grabber__face { -webkit-transform: translateY(60%); transform: translateY(60%); } .grabber--stalking .grabber__hand { -webkit-transform: scale(1.4) rotate(-10deg); transform: scale(1.4) rotate(-10deg); } .grabber--stalking .grabber__arm { -webkit-transform: translateY(70%); transform: translateY(70%); } .grabber--stalking .grabber__face { -webkit-transform: translateY(10%); transform: translateY(10%); } .grabber--grabbing .grabber__face { -webkit-transform: translateY(-40%) rotate(10deg); transform: translateY(-40%) rotate(10deg); } .grabber--grabbing .grabber__arm { -webkit-transform: translateY(0%); transform: translateY(0%); } .grabber--grabbing .grabber__body { -webkit-transform: translateY(-20%); transform: translateY(-20%); } .grabber--grabbing .grabber__hand { -webkit-transform: scale(1.7) rotate(10deg); transform: scale(1.7) rotate(10deg); } .grabber--grabbed .grabber__arm { transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .grabber--grabbed .grabber__hand { transition: -webkit-transform 2.5s ease; transition: transform 2.5s ease; transition: transform 2.5s ease, -webkit-transform 2.5s ease; } .grabber--grabbed .grabber__face { -webkit-transform: translateY(70%); transform: translateY(70%); transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .grabber--grabbed .grabber__body { -webkit-transform: translateY(50%); transform: translateY(50%); transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .grabber--extended .grabber__arm { -webkit-transform: translateY(-20%); transform: translateY(-20%); } .grabber--extended .grabber__face { -webkit-transform: translateY(-60%) rotate(15deg); transform: translateY(-60%) rotate(15deg); } .grabber--extended .grabber__body { -webkit-transform: translateY(-40%); transform: translateY(-40%); } .grabber--shaka .grabber__arm { -webkit-transform: translateY(50%); transform: translateY(50%); } .grabber--shaka .grabber__hand { -webkit-transform: scale(2.5) translateY(10%); transform: scale(2.5) translateY(10%); -webkit-animation: shaka 0.5s infinite alternate forwards; animation: shaka 0.5s infinite alternate forwards; -webkit-transform-origin: 55% 60%; transform-origin: 55% 60%; } .grabber--shaka .grabber__face { -webkit-transform: translateY(70%); transform: translateY(70%); transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .grabber--shaka .grabber__body { -webkit-transform: translateY(50%); transform: translateY(50%); transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; } .trap-button { position: absolute; bottom: 80px; right: 70px; min-width: 125px; background: #8ECACC; color: white; border-radius: 5px; padding: 0.4rem 0.5rem; font-weight: 600; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; } .debug-button { position: fixed; top: 0; right: 0; background: transparent; padding: 1rem; margin: 1rem; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.5; } @-webkit-keyframes shaka { 0% { -webkit-transform: scale(2.5) translateY(0%) rotate(-20deg); transform: scale(2.5) translateY(0%) rotate(-20deg); } 100% { -webkit-transform: scale(2.5) translateY(0%) rotate(20deg); transform: scale(2.5) translateY(0%) rotate(20deg); } } @keyframes shaka { 0% { -webkit-transform: scale(2.5) translateY(0%) rotate(-20deg); transform: scale(2.5) translateY(0%) rotate(-20deg); } 100% { -webkit-transform: scale(2.5) translateY(0%) rotate(20deg); transform: scale(2.5) translateY(0%) rotate(20deg); } } </style> </head> <body translate="no"> <div id="app"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js'></script> <script> const { useState, useRef, useEffect, useLayoutEffect, createContext .........完整代码请登录后点击上方下载按钮下载查看
网友评论0