svg+js实现悬浮跟随式视频播放按钮播放效果代码
代码语言:html
所属分类:多媒体
代码描述:svg+js实现悬浮跟随式视频播放按钮播放效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <style> * { box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; background: #111; align-content: center; gap: 2rem; } .video-player * { cursor: none; } video { width: 600px; max-width: 100%; aspect-ratio: 16 / 9; -o-object-fit: cover; object-fit: cover; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .video-player { position: relative; overflow: hidden; } button { position: absolute; inset: 0; opacity: 0; } .cursor { pointer-events: none; width: 56px; border-radius: 0; aspect-ratio: 1; position: fixed; background: hsl(10 100% 50%); display: grid; place-items: center; color: hsl(0 0% 100%); top: 0; left: 0; translate: calc((var(--x, 0) * 1px) - 50%) calc((var(--y, 0) * 1px) - 50%); scale: var(--active, 0); border-radius: 50%; transition: scale 0.2s; } .instruction { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent 0%, black); padding: 1rem; padding-top: 3rem; translate: 0 calc(var(--instruct, 0) * 100%); transition: translate 0.2s; } .instruction svg { width: 44px; aspect-ratio: 1; fill: white; } :root:has(.video-player:hover) { --active: 1; } .video-player:hover { --instruct: 1; } .video-player:has(:focus-visible) .instruction svg { outline: 2px solid red; } .cursor svg { width: 60%; display: none; } .instruction path { display: none; } .video-player:has([aria-label="Play"]) .instruction path:nth-of-type(1), .video-player:has([aria-label="Pause"]) .instruction path:nth-of-type(2), :root:has(.video-player:nth-of-type(1):hover > [aria-label="Play"]) .play, :root:has(.video-player:nth-of-type(1):hover > [aria-label="Pause"]) .pause, :root:has(.video-player:nth-of-type(2):hover > [aria-label="Play"]) .play, :root:has(.video-player:nth-of-type(2):hover > [aria-label="Pause"]) .pause { display: block; } </style> </head> <body> <div class="video-player"> <video src="//repo.bfw.wiki/bfwrepo/video/5d876821b800f.mp4" loop></video> <div class="instruction"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0