box-reflect应用
语法
box-reflect:none(无倒影) | <direction> <offset> <mask-box-image>
<direction> = above | below | left | right(倒影方向,上、下、左、右)
<offset> = <length> | <percentage>(倒影和对象间的间隔,长度值、百分比)
<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>(创建遮罩图像:使用绝对或相对地址指定遮罩图像、线性渐变、径向(放射性)渐变、重复的线性渐变、重复的径向(放射性)渐变)
默认值:none
代码实例
<!--
* @Date: 2021-03-04 14:32:42
* @LastEditors: cwx
* @LastEditTime: 2021-03-04 18:34:37
* @FilePath: \草稿\倒影\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
}
.test {
margin: 5%;
width: 200px;
height: 200px;
position: relative;
text-align: center;
line-height: 200px;
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.test::before,
.test::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
.test::before {
animation-delay: -4s;
}
@keyframes clipMe {
0%,
100% {
clip: rect(0px, 220px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220px, 0px);
}
50% {
clip: rect(218px, 220px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
}
.reflect {
width: 220px;
height: 220px;
}
.reflect1 {
-webkit-box-reflect: below 10% linear-gradient(transparent, rgba(0, 0, 0, .4));
}
.reflect2 {
-webkit-box-reflect: above 10% radial-gradient(#08f300, rgba(0, 0, 0, 0.2));
}
.reflect3 {
-webkit-box-reflect: left 10% repeating-linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, .5) 10%, rgba(0, 0, 0, 1) 20%);
}
.reflect4 {
-webkit-box-reflect: below 10% repeating-radial-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, .5) 10%, rgba(0, 0, 0, 1) 20%);
}
.reflect5 {
-webkit-box-reflect: right 10% url("./url.png");
}
</style>
</head>
<body>
<div class="reflect reflect3">
<div class="test">test</div>
</div>
<div class="reflect reflect1">
<div class="test">test</div>
</div>
<div class="reflect reflect2">
<div class="test">test</div>
</div>
<div class="reflect reflect4">
<div class="test">test</div>
</div>
<div class="reflect reflect5">
<div class="test">test</div>
</div>
</body>
</html>
效果
总结
- 使用图片做遮罩时,需要使用png,并且注意透明度,否者可能会无效。
- 文字无法左右倒影,只能实现上下倒影的效果,但是图片是上下左右倒影都能实现。