如何点击模糊的太阳？

Question

我想提示用户点击太阳，所以我想把一些文字放在上面。然而，太阳变得模糊，导致文字也变得模糊！

我试图覆盖模糊效果，将文本包装在span中，但似乎div的类的效果占主导地位。任何想法/想法？

HTML：

<div class="sun">Click</div> 

CSS：

.sun { 
    width: 20em; height: 20em; 
    background: #ffff99; 
    border-radius: 10em; 
    animation: flow 10s infinite alternate; 
    transform:translate(-30%, -30%) scale(0.2); 
    -webkit-filter: blur(10px); 
} 

您可以在此Demo现场查看。

Answer 1

我创建了一个父DIV并设置position:absolute的跨度：

.sun { 
 
    width: 20em; height: 20em; 
 
    background: #ffff99; 
 
    border-radius: 10em; 
 
    animation: flow 10s infinite alternate; 
 
    transform:translate(-30%, -30%) scale(0.2); 
 
    -webkit-filter: blur(10px); 
 
} 
 
.relative { 
 
    position:relative; 
 
} 
 
.absl { 
 
    position:absolute; 
 
    left:46px; 
 
    top:52px; 
 
}

<div class="relative"> 
 
    <div class="sun"></div> 
 
    <span class="absl">Click</span> 
 
</div>

Answer 2

对父元素的模糊效果将应用于子元素，因此您不能以这种方式使用它。

你可以做的是包装与容器的两个元素和它们相对定位到容器元素：

.container { 
 
    position: relative; 
 
} 
 
.sun { 
 
    position: absolute; 
 
    width: 20em; height: 20em; 
 
    background: #ffff99; 
 
    border-radius: 10em; 
 
    animation: flow 10s infinite alternate; 
 
    transform:translate(-30%, -30%) scale(0.2); 
 
    -webkit-filter: blur(10px); 
 
} 
 
.container span { 
 
    position: absolute; 
 
    top: 18px; 
 
    left: 45px; 
 
}

<div class="container"> 
 
    <div class="sun"></div> 
 
    <span style="-webkit-filter: blur(0px)">Click</span> 
 
</div>

Answer 3

您也可以使用box-shadow并重新缩放量程以便读取;）。

添加上点击一个肘节效应经由看到来自影子一样模糊效果tabindex

的tabindex内容属性允许作者控制的元件是否被认为是可聚焦的，它是否是应该可以使用顺序聚焦导航到达，以及为了顺序聚焦导航的目的，元素的相对顺序是什么。名称“选项卡索引”来自“选项卡”键的常用用途，以导航可聚焦元素。术语“标签”是指通过使用顺序聚焦导航可达到的可聚焦元素向前移动。

.sun:first-child { 
 
    width: 20em; 
 
    height: 20em; 
 
    background: #ffff99; 
 
    box-shadow: inset 0 0 4em rgba(255, 255, 255, 0.8), 0 0 5em 1em #ffff99; 
 
    border-radius: 10em; 
 
    animation: flow 10s infinite alternate; 
 
    transform: translate(-30%, -30%) scale(0.2); 
 
    transition: 0.25s; 
 
} 
 

 
[tabindex] { 
 
    cursor: pointer; 
 
} 
 

 
.sun+.sun { 
 
    width: 20em; 
 
    height: 20em; 
 
    background: #ffff99; 
 
    border-radius: 10em; 
 
    animation: flow 10s infinite alternate; 
 
    transform: translate(-30%, -90%) scale(0.2); 
 
    -webkit-filter: blur(10px); 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    transform: scale(5); 
 
    transform-origin:top left; 
 
} 
 

 
.sun:first-child:focus { 
 
    pointer-events: none; 
 
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 #ffff99; 
 
} 
 
body { 
 
background:skyblue; /* ;) */

<div class="sun" tabindex="0"><span style="-webkit-filter: blur(0px)">Click to toggle blur</span></div> 
 
<div class="sun"><span style="-webkit-filter: blur(0px)">original</span></div>