js+css实现消息图标鼠标悬停消息右上角预览滚动效果代码
代码语言:html
所属分类:悬停
代码描述:js+css实现消息图标鼠标悬停消息右上角预览滚动效果代码
代码标签: js css 消息 图标 鼠标 悬停 右上角 预览 滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --hue2: 133; --hue3: 3; --bg: hsl(var(--hue2),90%,70%); --fg: hsl(var(--hue),90%,10%); --primary: hsl(var(--hue),90%,50%); --trans-dur: 0.3s; --trans-timing: cubic-bezier(0.65,0,0.35,1); font-size: calc(20px + (60 - 20) * (100vw - 280px) / (3840 - 280)); } body, button { font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; } body { background-color: var(--bg); color: var(--fg); display: flex; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } .app { --dot-dur: 1s; background-color: white; border-radius: 1em; box-shadow: 0 0 0 0.333em rgba(143, 143, 143, 0), 0 0.75em 1.5em hsla(var(--hue2), 90%, 30%, 0.3); cursor: pointer; display: flex; margin: auto; outline: transparent; position: relative; width: 4em; height: 4em; transition: box-shadow calc(var(--trans-dur) / 2) var(--trans-timing); -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .app__badge { background-color: hsl(var(--hue3), 90%, 50%); border-radius: 0.75em; box-shadow: 0 0.28125em 0.5625em hsla(var(--hue3), 90%, 30%, 0.5); overflow: hidden; padding: 0 0.375em; position: absolute; top: 0; right: 0; min-width: 1.5em; height: 1.5em; transform: translate(0.625em, -0.625em); transition: min-width var(--trans-dur) var(--trans-timing); } .app__badge-count, .app__badge-text { color: white; font-weight: 300; transition: opacity var(--trans-dur) var(--trans-timing); } .app__badge-count { text-align: center; } .app__badge-text { opacity: 0; position: absolute; top: 0; left: 100%; width: max-content; } .app__badge:has(.app__badge-count:empty) { display: none; } .app:focus-visible { box-shadow: 0 0 0 0.333em #8f8f8f, 0 0.75em 1.5em hsla(var(--hue2), 90%, 30%, 0.3); } .app__icon { color: var(--primary); display: block; overflow: visible; pointer-events: none; margin: auto; width: 2.75em; height: 2.75em; } .app:hover .app__badge, .app:focus-visible .app__badge { min-width: 3.75em; } .app:hover .app__badge-count, .app:focus-visible .app__badge-count { opacity: 0; } .app:hover .app__badge-text, .app:focus-visible .app__badge-text { animation: marquee 5s linear infinite; opacity: 1; } .app--animating .app__icon-dot { animation: dot var(--dot-dur) cubic-bezier(0.65, 0, 0.35, 1); } .app--animating .app__icon-dot:nth-child(2) { animation-delay: calc(var(--dot-dur) * 0.05); } .app--animating .app__icon-dot:nth-child(3) { animation-delay: calc(var(--dot-dur) * 0.1); } /* Animations */ @keyframes dot { from, 90%, to { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); transform: translateY(0); } 30% { animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0); transform: translateY(-32px); } 60% { animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1); transform: translateY(32px); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 3.75em)); } } </style> </head> <body translate="no"> <button class="app" type="button"> <div class="app__badge"> <div class="app__badge-count" role="status" aria-label="" aria-atomic="true" aria-live="polite" data-count></div> <div class="app__badge-text" data-preview></div> </div> <svg class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0