js+css实现鼠标悬浮主题文字高亮周围模糊突出效果代码
代码语言:html
所属分类:悬停
代码描述:js+css实现鼠标悬浮主题文字高亮周围模糊突出效果代码
代码标签: js css 鼠标 悬浮 主题 文字 高亮 周围 模糊 突出
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> summary::-webkit-details-marker, summary::marker { display: none; content: ""; } body { height: 100vh; overflow: hidden; display: grid; place-items: center; font-size: 1.8vmin; } .container { height: 50vmin; transform: rotate(-90deg); } .container > details { transform: rotate(90deg); } /* 1- the --rotation could easily be calculated here in CSS */ details { position: relative; width: -webkit-max-content; width: -moz-max-content; width: max-content; transform-origin: 33% center; transform: rotate(var(--rotation)) translate(20%); transition: all .3s .2s; } /* 2- but to fix upside down text, I needed to keep track of all parent rotations in JS */ summary { transform: rotate(var(--fixed-rotation)); } details:hover, details:focus-within { scale: 1.05; } details[open]:hover, details[open]:focus-within { z-index: 1; } .items { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%) scale(0.5); opacity: calc(0.7 - var(--level) / 15); filter: blur(1px) contrast(0); transition: all .3s; } details[open] .items { -webkit-animation: items-appear forwards; animation: items-appear forwards; -webkit-animation-duration: calc(300ms + var(--i) * 50ms); animation-duration: calc(300ms + var(--i) * 50ms); -webkit-animation-delay: calc(var(--i) * 30ms); animation-delay: calc(var(--i) * 30ms); } @-webkit-keyframes items-appear { to { transform: translate(100%, -50%) scale(1); } } @keyframes items-appear { to { transform: translate(100%, -50%) scale(1); } } details:hover > .items, details:focus-within > .items { opacity: 1; filter: none; } </style> </head> <body> <div class="container" id="container"></div> <script > const topics = { title: 'Topics', items: [{ title: 'Nature', items: [{ title: 'Earth', items: [{ title: 'Physical geography', items: [{ title: 'Rivers', items: [] }, { title: 'Tectonics', items: [] }, { title: 'Mountains', items: [] }, { title: 'Erosion', items: [] }, { title: 'Glaciers', items: [] }, { title: 'Fjords', items: [] }, { title: 'Climate', items: [] }] }, { title: 'Biology', items: [{ title: 'Evolution', items: [] }, { title: 'Humans', items: [] }, { title: 'Whales', items: [] }, { title: 'Trees', items: [] }] }] }, { title: 'Space', items: [{ title: 'Nebulae', items: [{ title: 'Orion Nebula', items: [] }, { title: 'Horsehead Nebula', items: [] }, { title: 'North America Nebula', items: [] }] }, { title: 'Galaxies', items: [{ title: 'Milky Way Galaxy', items: [] }, { title: 'Andromeda .........完整代码请登录后点击上方下载按钮下载查看
网友评论0