css实现卡片背景走光效果代码
代码语言:html
所属分类:悬停
代码描述:css实现卡片背景走光效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --rotate { syntax: "<angle>"; initial-value: 132deg; inherits: false; } :root { --card-height: 65vh; --card-width: calc(var(--card-height) / 1.5); } body { min-height: 100vh; background: #212534; display: flex; align-items: center; justify-content: center; font-family: cursive; } .card { background: #191c29; width: var(--card-width); height: var(--card-height); padding: 3px; position: relative; border-radius: 6px; justify-content: center; align-items: center; display: flex; font-size: 1.5em; color: rgb(88 199 250 / 0%); cursor: pointer; } .card:hover { color: rgb(88 199 250 / 100%); transition: color 1s; } .card:hover:before, .card:hover:after { animation: none; opacity: 0; } .card::before { content: ".........完整代码请登录后点击上方下载按钮下载查看
网友评论0