锥形渐变实现探照灯,通过元素覆盖在上面并设置透明度,实现取出探照灯的效果
效果图:
原理:
代码示例:
.conic {
position: relative;
z-index: 0;
width: 400px;
height: 300px;
margin: 20px;
border-radius: 10px;
//隐藏探照灯其他区域
overflow: hidden;
padding: 2rem;
}
//探照灯的实现
.conic::before {
content: '';
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: green;
background-repeat: no-repeat;
background-position: 0 0;
background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
animation: rotate 4s linear infinite;
}
//通过透明度使得探照灯上的元素能看见探照灯
.conic::after {
content: '';
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: red;
border-radius: 5px;
opacity: .5;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
<div class="conic"></div>