js自定义html标签实现悬浮ai电力四射HTMLElement效果代码
代码语言:html
所属分类:悬停
代码描述:js自定义html标签实现悬浮ai电力四射HTMLElement效果代码,自定义一个class VideoOnHover继承HTMLElement。
代码标签: js 自定义 html 标签 悬浮 ai 电力四射 HTMLElement
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: black; } a { font-weight: 500; color: #646cff; text-decoration: inherit; } a:hover { color: #535bf2; } body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; } h1 { font-size: 3.2em; line-height: 1.1; } #app { max-width: 1280px; max-height: 100vh; margin: 0 auto; padding: 2rem; box-sizing: border-box; text-align: center; } video-on-hover{ aspect-ratio: 1; width: 400px; height: 400px; } .youtube_button{ position: fixed; bottom: 0; right: 0; padding: 2rem; } @media (max-width: 800px), (max-height: 800px) { .youtube_button{ display: none; } video-on-hover{ transform-origin: center; transform: scale(2); } } </style> </head> <body translate="no"> <div id="app"> <video-on-hover image="//repo.bfw.wiki/bfwrepo/images/customelement/static.jpg" src="//repo.bfw.wiki/bfwrepo/images/customelement/animation.mp4"></video-on-hover> </div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0