設置一個元素淡化周圍環境

Question

我試圖讓一個元素淡入淡出其周圍環境。想象一下灰色方塊在文本上。我希望圍繞灰色框的文字具有淡化效果。

所以幾乎淡出環繞箱

希望即時決策意識的文字。感謝你的幫助！

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

我只想用box-shadow在包裝盒上，設置爲頁面背景顏色給的錯覺文字淡出：

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

Answer 2

你可以利用@keyframes財產的CSS：

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>