randomColor实现鼠标悬浮文字卡片聚光灯照射交互效果代码
代码语言:html
所属分类:悬停
代码描述:randomColor实现鼠标悬浮文字卡片聚光灯照射交互效果代码
代码标签: randomColor 鼠标 悬浮 文字 卡片 聚光灯 照射 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap"); body { overflow: hidden; } .wrapper { height: 100vh; width: 100%; background-color: #130042; display: flex; align-items: center; justify-content: center; transition: background-color 0.6s; overflow: hidden; } .wrapper:before { content: ""; position: absolute; left: var(--x); top: var(--y); width: 100%; height: 100%; background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.5), transparent); transform: translate(-50%, -50%) scale(var(--scale)); transition: transform 0.2s; } .card { width: 200px; font-family: "Space Mono", monospace; height: 200px; margin: 0 20px; background-color: rgba(255, 255, 255, 0.1); color: #fff; padding: 22px; flex-shrink: 0; font-size: 24px; text-shadow: 0 1px 0 #130042; box-sizing: border-box; border-radius: 24px; display: flex; justify-content: center; align-items: center; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 100px #130042; transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)); } </style> </head> <body> <div class="wrapper"> <div class="card">CSS GRADIENTS</div> <div .........完整代码请登录后点击上方下载按钮下载查看
网友评论0