js实现鼠标悬浮照亮树叶效果代码
代码语言:html
所属分类:悬停
代码描述:js实现鼠标悬浮照亮树叶效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); body { margin: 0; padding: 0; height: 100vh; width: 100%; display: grid; place-items: center; background: #000; font-family: "Inter", sans-serif; user-select: none; } #base { height: 25rem; width: 21rem; animation: in 0.5s ease forwards; transform-origin: 50% 50%; z-index: 3; cursor: move; display: grid; place-items: center; } #base .leaf { background: linear-gradient(90deg, rgba(71, 166, 73, 0.5) 0%, rgba(128, 195, 65, 0.5) 40%, rgba(128, 195, 65, 0.5) 67%, rgba(75, 176, 71, 0.5) 100%); width: 30rem; height: 30rem; -webkit-clip-path: url(#clippath); backdrop-filter: blur(10px); position: relative; z-index: 3; } #base .leaf::before { position: absolute; width: 100%; height: 100%; content: ""; background: url(//repo.bfw.wiki/bfwrepo/icon/643145627c4cf.png); background-size: contain; background-position-x: -10px; opacity: 0.3; transition: all 0.3s ease; } #base .leaf:hover::before { opacity: 0.4; filter: contrast(3); } #light { width: 2rem; height: 2rem; position: fixed; background: #fff; border-radius: 50%; box-shadow: 0 0 60px 30px #fff, 0 0 100px 60px #fff, 0 0 140px 90px #0ff; filter: blur(2px); transform: scale(0); transition: transform 0.2s ease; } #light.on { transform: scale(1); } span { color: rgba(255, 255, 255, 0.5); position: fixed; inset: 1rem; transition: all 0.2s ease; } span.hide { opacity: 0; } @media only screen and (max-width: 600px) { body { overflow: hidden; } } @keyframes in { from { transform: rotate(30deg) scale(0); } to { transform: rotate(0deg) scale(1); } } </style> </head> <body> <div id="base"> <div class="leaf"></div> <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 327.18 469.8"> <defs> <clipPath id="clippath"> <path class="cls-1" d="m324.97,147.56c-.35,1.8-.78,3.76-1.77,5.25-5.34,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0