点击发射熊猫的按钮动画效果代码
代码语言:html
所属分类:表单美化
代码描述:点击发射熊猫的按钮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - panda button</title> <style> * { box-sizing: border-box; } body { padding: 0; margin: 0; font-family: sans-serif; background-color: #423a41; overflow: hidden; } .cover { position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 999; pointer-events: none; } .wrapper { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } .panda_face.hide { opacity: 0; } span { margin-left:12px; } .sign { position: absolute; color: white; bottom: 10px; right: 10px; font-size: 10px; } a { color: white; text-decoration: none; } a:hover { text-decoration: underline; } .panda { position: absolute; height: 45px; width: 45px; overflow: hidden; transition: 2s; } .panda_inner { height: 100%; } .panda_inner svg { height: 100%; width: auto; } button { width: 180px; padding: 10px 14px; display: flex; justify-content: center; align-items: center; border: solid rgb(131, 88, 59); border-width:2px 2px 7px 2px; border-radius: 10px; background-color: rgb(83, 39, 9); font-family: 'Press Start 2P', cursive; font-size: 15px; color: white; transition: 0.3s; cursor: pointer; } button:hover { border-width:2px 2px 4px 2px; margin-top: 3px; } button:focus { outline: none; box-shadow: 0 0 0 4px hotpink; } .panda_face { position: relative; height: 25px; width: auto; } .panda_face { opacity: 1; } .panda_face svg { height: 100%; width: auto; } .panda_white { fill: white; } .blue { fill: #12b7e9; } .green { fill: rgb(43, 163, 113); } .pink { fill: hotpink;} .brown { fill: rgb(126, 80, 62);} .dark_brown { fill: rgb(53, 34, 27);} button:hover .panda_face { animation: bop infinite 0.5s; } @keyframes bop { 0% { top: 0; transform: scale(1); } 50% { top: -5px; transform: scale(0.95,1.05); } 90% { transform: scale(1.1,0.9); } 100% { top: 0; transform: scale(1); } } button.animate svg { animation: spin infinite linear 0.5s; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(-720deg); } } @keyframes fadeout { 0% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; display: none; } } button:hover .fade_in, .panda_face.fade_in { animation: fade_in forwards 0.5s; } @keyframes fade_in { 0% { opacity: 0; } 100% { opacity: 1; } } button.animate { border-color: rgb(58, 28, 9); transform-origin: bottom right; animation: shake ease forwards 0.5s; } @keyframes shake { 0% { transform-origin: bottom right; transform: translate(0,0) rotate(0deg); } 40% { transform: translate.........完整代码请登录后点击上方下载按钮下载查看
网友评论0