かすかな太陽をクリックするには？

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

親要素のぼかし効果が子要素に適用されるため、この方法では使用できません。あなたは何ができるか

は、コンテナに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

を経由して影から同様にぼかし効果を見るためにクリックで切り替え効果を追加しました逐次フォーカスナビゲーションを使用して到達可能であり、逐次フォーカスナビゲーションの目的のために要素の相対的な順序となるものである。 「タブインデックス」という名前は、フォーカス可能な要素をナビゲートするための「タブ」キーの一般的な使用に由来します。 「タブ移動」という用語は、順次フォーカスナビゲーションを使用して到達可能なフォーカス可能な要素を通って前方に移動することを指す。 https://jsfiddle.net/r3un0bpd/1/効果ブラー/ unblurのonclickとhttps://jsfiddle.net：ボックス影が太陽のための代替可能性があり

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