css+div实现鼠标悬浮数字聚焦其他数字模糊效果代码
代码语言:html
所属分类:悬停
代码描述:css+div实现鼠标悬浮数字聚焦其他数字模糊效果代码
代码标签: css div 鼠标 悬浮 数字 聚焦 其他 模糊
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="CodeHim">
<style>
* {
box-sizing: border-box
}
.cd__main {
min-height: 100vh;
display: grid;
place-items: center;
font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif,system-ui;
background: hsl(0 0 0)!important;
gap: 2rem
}
body::before {
--line: hsl(0 0 95% / .25);
content: "";
height: 100vh;
width: 100vw;
position: fixed;
background: linear-gradient(90deg,var(--line) 1px,transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,linear-gradient(var(--line) 1px,transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
-webkit-mask: linear-gradient(-15deg,transparent 30%,white);
mask: linear-gradient(-15deg,transparent 30%,white);
top: 0;
z-index: -1
}
section {
display: grid;
gap: 4rem;
align-items: center;
justify-content: center
}
section p {
margin: 0;
font-size: 2.25rem;
color: hsl(0 0 40%);
text-align: center;
background: linear-gradient(hsl(0 0 80%),hsl(0 0 50%));
color: transparent;
-webkit-background-clip: text;
background-clip: text
}
.code.........完整代码请登录后点击上方下载按钮下载查看
网友评论0