CSS灯光(淡入淡出)效果

Question

​

​

我在互联网上找到了这张照片，我很想在我的网站上做这个效果。我正在尝试有一个更暗的背景，在顶部有一个灯，就像在图片上和它下面的图片一样。但我想让它看起来像是灯的光在照着一幅画。这有可能做到吗？

Answer 1

您可以使用一些伪元素来创建此效果，包括线性渐变和变换：

演示悬停图片查看效果

​

.light {
  position: relative;
  height: 300px;
  width: 300px;
  display: inline-block;
  margin-top: 20px;
}

.light img {/*Image inside*/
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.light:before {/*creates the bulb*/
  content: "";
  position: absolute;
  bottom: 100%;/*places above image*/
  left: 50%;
  height: 20px;
  width: 100px;
  border-radius: 50%;
  background: lightgray;
  transform: translateX(-50%);/*places in center of image*/
  z-index: 10;/*places in front of image*/
  border: 2px solid dimgray;/*borders add 3D effect to bulb*/
  border-bottom: none;
  border-top: 5px solid #222;
}

.light:after {/*creates the beam*/
  content: "";
  position: absolute;
  transition: all 0.4s;
  height: 0;
  width: 100px;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) perspective(400px) rotateX(45deg);/*centers, makes as trapezium*/
  transform-origin: top center;
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.8));/*adds fading light*/
  z-index: 5;/*places in front of image, but behind bulb*/
}

.light:hover:after {/*demo only, add this to .light:after in production*/
  height: 80%;
}

<div class="light">
  <img src="http://lorempixel.com/300/300" />
</div>

​

Answer 2

将不透明度:0.9；或不透明度:0.3；添加到较暗的背景图像样式中。希望这个帮助是..。

Answer 3

你可以使用透明的png图片，比如@Eamonn said，或者在CSS中使用渐变和阴影，比如下面的示例：

<style type="text/css">
.light {
    width: 200px;
    height: 200px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    box-shadow: 0 20px 20px 5px #fff;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.7) 66%, rgba(255,255,255,0.79) 76%, rgba(255,255,255,1) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.7) 66%,rgba(255,255,255,0.79) 76%,rgba(255,255,255,1) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.7) 66%,rgba(255,255,255,0.79) 76%,rgba(255,255,255,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
</style>
<div class="light"></div>