svg+gsap实现鼠标悬浮眼睛跟随软糖效果代码
代码语言:html
所属分类:悬停
代码描述:svg+gsap实现鼠标悬浮眼睛跟随软糖效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { position; relative; height: 100vh; display: grid; place-items: center; background: radial-gradient( circle at center, hsl(339, 92%, 99%), hsl(339, 92%, 64%) ); } svg { width: 90vmin; height: 90vmin; max-width: 640px; } .stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; } .stars span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hover { position: absolute; bottom: 1rem; right: 1rem; font-size: 20px; font-weight: 700; color: #3B0216; font-family: 'Nunito', system-ui, sans-serif; } </style> </head> <body > <svg fill="none" viewBox="0 0 200 200" style="opacity: 0;"> <g> <g filter="url(#filter0_f)"> <ellipse cx="100.5" cy="140.5" fill="#F84F8A" rx="60.5" ry="23.5" /> </g> <path stroke="#3B0216" fill="url(#gradient)" stroke-width="2" d="M112.411 54.44l8.465 54.001C121.9 114.975 116.388 121 108.965 121h-16.93c-7.423 0-12.935-6.025-11.91-12.559l8.464-54C89.567 48.198 94.939 45 100.5 45c5.562 0 10.932 3.198 11.911 9.44z" /> <path stroke="#3B0216" fill="url(#gradient)" stroke-width="2" d="M109.788 58.444c1-6.23 6.494-9.444 12.212-9.444s11.212 3.214 12.212 9.444l8.661 54c1.044 6.508-4.576 12.556-12.211 12.556h-17.324c-7.635 0-13.255-6.048-12.211-12.556l8.661-54z" /> <path stroke="#3B0216" fill="url(#gradient)" stroke-width="2" d="M66.788 58.444C67.788 52.214 73.282 49 79 49s11.212 3.214 12.212 9.444l8.661 54C100.917 118.952 95.297 125 87.662 125H70.338c-7.635 0-13.255-6.048-12.211-12.556l8.661-54z" /> <path stroke="#3B0216" fill="url(#gradient)" stroke-width="2" d="M129 93c0 16.016-12.984 29-29 29s-29-12.984-29-29 12.984-29 29-29 29 12.984 29 29z" /> <path stroke="#3B0216" fill="url(#gradient)" stroke-width="2" d="M49.788 67.444C50.788 61.214 56.282 58 62 58s11.212 3.214 12.212 9.444l8.661 54C83.917 127.952 78.297 134 70.662 134H53.338c-7.635 0-13.255-6.048-12.211-12.556l8.661-54z" /> <path stroke="#3B0216" fill="url(#gradient)" stroke-width="2" d="M65.788 78.444C66.788 72.214 72.282 69 78 69s11.212 3.214 12.212 9.444l8.661 54C99.917 138.952 94.297 145 86.662 145H69.338c-7.635 0-13.255-6.048-12.211-12.556l8.661-54z" /> <path stroke="#3B0216" fill="url(#gradient)" stroke-width="2" d="M126.788 67.444c1-6.23 6.494-9.444 12.212-9.444s11.212 3.214 12.212 9.444l8.661 54c1.044 6.508-4.576 12.556-12.211 12.556h-17.324c-7.635 0-13.255-6.048-12.211-12.556l8.661-54z" /> <path stroke="#3B0216" fill="url(#gradient)" stroke-width="2" d="M110.788 78.444c1-6.23 6.494-9.444 12.212-9.444s11.212 3.214 12.212 9.444l8.661 54c1.044 6.508-4.576 12.556-12.211 12.556h-17.324c-7.635 0-13.255-6.048-12.211-12.556l8.661-54z" /> <path stroke="#3B0216" fill="url(#gradient)" stroke-width="2" d="M88.589 88.44c.978-6.242 6.35-9.44 11.911-9.44 5.562 0 10.932 3.198 11.911 9.44l8.465 54.001C121.9 148.975 116.388 155 108.965 155h-16.93c-7.423 0-12.935-6.025-11.91-12.559l8.464-54z" /> <g id="eye-left"> <circle cx="88" cy="97" r="7" fill="#FDD9E4" stroke="#3B0216" stroke-width="2" /> <circle id="eye-left-inner" cx="91" cy="97" r="4" fill="#3B0216" /> </g> <g id="eye-right"> <circle cx="113" cy="97" r="7" fill="#FDD9E4" stroke="#3B0216" stroke-width="2" /> <circle id="eye-right-inner" cx="116" cy="97" r="4" fill="#3B0216" /> </g> <path stroke="#3B0216" stroke-linecap="round" stroke-width="2" d="M95 114h11" /> <g id="mouth-open" transform="translate(0 2)"> <path d="M94 113C94 111.895 94.8954 111 96 111H105C106.105 111 107 111.895 107 113V114C107 117.314 104.314 120 101 120H100C96.6863 120 94 117.314 94 114V113Z" fill="#3B0216" /> <mask id="mask0" maskUnits="userSpaceOnUse" x="94" y="111" width="13" height="9"> <path d="M94 113C94 111.895 94.8954 111 96 111H105C106.105 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0