css变量实现卡片立体倾斜鼠标光照效果代码
代码语言:html
所属分类:悬停
代码描述:css变量实现卡片立体倾斜鼠标光照效果代码
下面为部分代码预览,完整代码请点击下载或在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: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; -webkit-transition: background-color 0.6s; 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); -webkit-transform: translate(-50%, -50%) scale(var(--scale)); transform: translate(-50%, -50%) scale(var(--scale)); -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-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: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 100.........完整代码请登录后点击上方下载按钮下载查看
网友评论0