如何点击模糊的太阳？

Question

我想提示用户点击太阳，所以我想在上面放一些文字。但是太阳很模糊，导致文字也很模糊！

我试图覆盖模糊效果，将文本包裹在 span 中，但似乎来自 div 的 class 的效果占主导地位。任何 thoughts/ideas?

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

父元素的模糊效果会应用到子元素，所以不能这样使用。

你可以做的是用容器包裹这两个元素，并相对于容器元素定位它们：

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

我创建了父项 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 3

您也可以使用 box-shadow 并重新缩放跨度以便可以读取 ;)。

通过 tabindex

添加了点击切换效果以查看阴影的相似模糊效果

The tabindex content attribute allows authors to control whether an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation, and what is to be the relative order of the element for the purposes of sequential focus navigation. The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation.

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

如何点击模糊的太阳？

How to click a blurred sun?

html

css

text

blur

click