css 锥形渐变实现三角探照灯效果

锥形渐变实现探照灯,通过元素覆盖在上面并设置透明度,实现取出探照灯的效果

效果图:


原理:

代码示例:

.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>