css实现订阅与取消订阅小兔子动画表情效果代码
代码语言:html
所属分类:其他
代码描述:css实现订阅与取消订阅小兔子动画表情效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;600;800&family=Roboto:wght@400;700&display=swap'> <style> *, *:after, *:before { box-sizing: border-box; } body { margin: 0; font-family: "Poppins"; background: #3173f6; background-size: cover; height: 100vh; display: grid; place-items: center; } .card { background: #fff; width: calc(100% - 40px); max-width: 640px; padding: 20px; text-align: center; padding-top: 260px; position: relative; } .card h3 { margin: 0 0 10px; font-size: 24px; color: #263238; font-weight: 700; } .card p { margin: 0 0 15px; color: #546e7a; } .btn { padding: 13px 10px; border: none; min-width: 180px; border-radius: 4px; transition: 0.2s ease-in; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 2px 6px #0001; } .btn:hover { box-shadow: 0 3px 15px #0002; } .btn + .btn { margin-left: 10px; } .btn-primary { background: #304ffe; color: #fff; } .btn-primary:hover { background: #536dfe; } .btn-secondary { background: #f5f5f5; } .btn-secondary:hover { background: #e0e0e0; } .emo-container { position: absolute; left: 0; top: 0; width: 100%; height: 240px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 0px; background: #3173f6; } .emo-container * { transition: 0.2s ease-in; } .bunny { height: 180px; width: 130px; background: #fff; border-radius: 100px; border: 1px solid #eee; position: relative; z-index: 10; transform: translateY(8px); } .bunny .leg { position: absolute; background: #fefefe; width: 45px; height: 70px; bottom: 10px; z-index: 20; border-radius: 50px; transform-origin: 22.5px 70px 0; border: 1px solid #eee; } .bunny .leg:before { content: ""; position: absolute; top: 5px; color: #d571a6; background: currentcolor; left: 50%; transform: translateX(-50%); width: 12px; height: 13px; border-radius: 50%; box-shadow: 12px 7px 0 -2px, -12px 7px 0 -2px; } .bunny .leg.l { left: 15px; transform: rotate(-40deg); box-shadow: 0px -3px 6px #0001; animation: 1.4s doubtLegL ease-out infinite alternate; } .bunny .leg.r { transform: rotate(40deg); right: 15px; box-shadow: 3px 0px 6px #0001; animation: 1.4s doubtLegR ease-out infinite alternate; } .bunny .face { background: #fff; width: 100%; height: 100%; border-radius: 100px; z-index: 10; position: relative; } .bunny .face .eye { top: 25px; position: absolute; z-index: 6; border-radius: 50%; width: 20px; height: 20px; border: 2px solid #444; background: radial-gradient(circle 5px, #222 100%, transparent 0) no-repeat; animation: 2.8s doubtEye ease-out infinite alternate; } .bunny .face .eye.l { left: 30px; } .bunny .face .eye.r { right: 30px; } .bunny .mostash { position: absolute; width: 50px; height: 30px; border: 1px solid #0000; border-top-color: #fff; border-radius: 50%; top: 35px; transform: rotate(-4deg); z-index: 2; } .bunny .mostash:after { content: ""; position: absolute; width: 50px; height: 30px; border: 1px solid #0000; border-top-color: #fff; border-radius: 50%; transform-origin: 50px 0; } .bunny .mostash.l { left: -35px; transform-origin: 50px 0; } .bunny .mostash.l:after { left: 8px; top: -8px; transform: rotate(15deg); } .bunny .mostash.r { right: -35px; transform-origin: 0px 0; } .bunny .mostash.r:after { left: auto; right: 8px; top: -20px; transform: rotate(-15deg); } .bunny .nose { position: absolute; width: 16px; height: 14px; transform: translateX(-50%); left: 50%; top: 40px; } .bunny .nose:before, .bunny .nose:after { content: ""; position: absolute; top: 0; width: 8px; height: 12px; border-radius: 16px; background: #d571a6; } .bunny .nose:before { left: 8px; transform: rotate(-45deg); transform-origin: 0 100%; } .bunny .nose:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } .bunny .mouth { position: absolute; left: 50%; top: 55px; width: 15px; height: 5px; border-radius: 0 0 50% 50%; transform: translateX(-50%); overflow: hidden; border: 2px solid #0000; border-bottom-color: #000; } .bunny .ear { position: absolute; width: 32px; background: #d571a6; border: 9px solid #fff; height: 100px; border-radius: 20px 20px 0 0; transform-origin: 16px 100px; } .bunny .ear.r { right: 35px; transform: rotate(14deg); bottom: 160px; animation: 0.35s doubtEarR ease-out infinite alternate; } .bunny .ear.l { left: 35px; transform: rotate(-4deg); bottom: 160px; } .bunny .hand { position: absolute; width: 32px; background: #fff; height: 60px; border-radius: 0 0 20px 20px; border-left: 1px solid #eee; border-right: 1px solid #eee; transform-origin: 16px 0px; z-index: 16; top: 90px; box-shadow: 2px 4px 8px #0001; } .bunny .hand:after { content: ""; position: absolute; left: 0; bottom: 0; background: #fff; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #fff; border-color: #fff #fff #d571a6 #d571a6; transform: rotate(-45deg); } .bunny .hand.l { left: 0px; transform: rotate(345deg); animation: 1.4s doubtHandL ease-out infinite alternate; } .bunny .hand.r { right: 0px; transform: rotate(120deg); animation: 0.7s doubtHandR ease-out infinite alternate; } .bunny .tail { position: absolute; left: 50%; bottom: -10px; background: #eee; width: 40px; height: 40px; border-radius: 50%; transform: translateX(-50%); z-index: 1; } .btn:hover ~ .emo-container .bunny .ear.l { bottom: 135px; } .btn:hover ~ .emo-container .bunny .ear.l:after { content: ""; position: absolute; width: 32px; height: 64px; background: #fff; border-radius: 20px; transform-origin: 16px 16px; transform: rotate(64deg); top: -9px; left: -9px; box-shadow: 4px 4px 4px #0001; } .btn:hover ~ .emo-container .bunny .mouth { background: #562242; } .btn:hover ~ .emo-container .bunny .mouth:before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; z-index: 2; width: 18px; border-style: solid; border-color: #eee #0000 #0000 #0000; border-width: 8px 3px 0px 3px; } .btn:hover ~ .emo-container .bunny .mouth:after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: #d571a6; width: 36px; height: 12px; border-radius: 30px 30px 0 0; box-shadow: 0 -10px 0 5px #3e1632; } .btn-primary:hover ~ .emo-container:after { content: ""; aspect-ratio: 10/1; width: 100%; background: #3173f6; position: absolute; left: 0; bottom: 0; border-radius: 50%; animation: 0.35s happyJumpMat ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny { animation: 0.35s happyJump ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny .ear.l:after { animation: happyEarL 0.35s ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny .ear.r { animation: happyEarR 0.35s ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny .eye { top: 30px; width: 20px; height: 20px; background: #0000; border: 2px solid #0000; border-color: #000 #000 #0000 #0000; transform: rotate(-45deg); } .btn-primary:hover ~ .emo-container .bunny .mostash.l { animation: happyMostashL 0.35s ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny .mostash.r { animation: happyMostashR 0.35s ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny .mouth { border: none; width: 70px; border-radius: 0 0 50px 50px; animation: happyMouth 0.35s ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny .hand.l { animation: 0.35s happyHandL ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny .hand.r { animation: 0.35s happyHandR ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny .tail { animation: 0.35s happyTail ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny .leg.l { animation: happyLegL 0.35s ease-out infinite alternate; } .btn-primary:hover ~ .emo-container .bunny .leg.r { animation: happyLegR 0.35s ease-out infinite alternate; } .btn-secondary:hover ~ .emo-container .bunny { animation: 0.35s sadMove ease-out infinite alternate; } .btn-secondary:hover ~ .emo-container .bunny .ear.........完整代码请登录后点击上方下载按钮下载查看
网友评论0