设置一个元素使其周围环境淡化

Question

我正在尝试让一个元素淡出它的 surroundings.Imagine 灰色框在文本上方。我希望灰色框周围的文字具有淡入淡出的效果。

几乎淡化框周围的文字

希望我说得有道理。感谢你的帮助！

HTML

 <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Deseruntconsequatur nisi nulla odio eligendi sapiente rerum totam commodi          
    quae illo voluptatum soluta aut exercitationem debitis dicta ivermolestia
 </p>

 <div class="box"></div>

CSS

p {
   width: 250px;
  }

div.box {
   width: 50px;
   height: 50px;
   background-color: gray;
   position:absolute;
   top:0;
}

JSFiddle:https://jsfiddle.net/26t9mL47/

Answer 1

您可以使用 CSS 中的@keyframes 属性:

p {
   width: 250px;
  }

div.box {
   width: 50px;
   height: 50px;
   background-color: gray;
   float:left;
   margin:10px;
}

/* Animation */

@keyframes example {
   from {color: black;}
   to {color: white;}
}


p {
  animation-name: example;
  animation-duration: 2s;
}

<div class="box"></div>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Deseruntconsequatur nisi nulla odio eligendi sapiente rerum totam commodi          
    quae illo voluptatum soluta aut exercitationem debitis dicta ivermolestia
</p>

Answer 2

我只想在方框上使用 box-shadow，设置为页面背景颜色以产生文本淡出的错觉：

https://jsfiddle.net/26t9mL47/2/

设置一个元素使其周围环境淡化

Setting an element to fade its surroundings

html

css

jquery

fade