示例
灯光投射阴影效果
<!doctype html>
<html lang="zh-CN">
<>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>灯光投射阴影效果</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="element">Welcome</div>
</body>
</html>body {
background-color: #f4f4f4;
}
.element {
margin: 100px auto;
width: 400px;
height: 400px;
border-radius: 10px;
border: 1px solid #eeeeee;
transition: 0.4s;
text-align: center;
line-height: 400px;
font-size: 50px;
font-weight: 600;
color: #6b6b6b;
cursor: pointer;
}
.element:hover {
box-shadow:
8px 8px 8px rgba(71, 71, 71, 0.1),
-10px -10px 10px #ffffff;
}卡片滑动效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="element">
<div class="item item1">1</div>
<div class="item item1">2</div>
<div class="item item1">3</div>
<div class="item item1">4</div>
<div class="item item1">5</div>
<div class="item item1">6</div>
</div>
</body>
</html>
body {
background: #bdbdbd;
}
.element {
display: flex;
gap: 20px;
width: 400px;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.item {
flex-basis: 400px;
flex-shrink: 0;
scroll-snap-align: center;
height: 400px;
width: 300px;
border: 1px solid #f9f9ff;
background: #ffffff;
}毛玻璃效果
最后更新于