在 HTML 和 CSS 中創建具有模糊背景的“焦點”圓圈

Question

今天我發現了帶有“圓形黑色背景”的驚人過濾器按鈕，我真的很喜歡它。 我想將它集成到我的網站中以研究如何創建它，但我不知道如何開始？ 也許與創建圈？

我在我的網站上創建了浮動按鈕（右下角）。你可以在這里找到它。當你向下滾動到我的網站時，按鈕會出現。所以現在我不知道如何創建這個背景模糊的圓圈，如下例所示？

我的浮動按鈕

對不起，我的英語不好！

Answer 1

我剛剛在這里為您創建了一個游樂場https://jsfiddle.net/rxnc3zb7/ 。 一般來說，我添加了以下內容：

width:400px;
height:400px;
bottom:-150px;
right:-150px;

到.go-top:hover 。 根據您的需要設置width 、 height 、 bottom和right值。 我沒有用圖標測試過它，但我認為你應該將它隱藏在 hover 上（所以.go-top:hover i {opacity:0} ）。 但是，如果你想讓它居中，你應該像這樣設置.go-top ：

display:flex;
align-items:center;
justify-content:center;

這樣，您的圖標在任何情況下都會對齊。

模糊效果

對於模糊效果，我添加了一個 js 代碼，當鼠標懸停在.go-top上時，只需將 class blur-content添加到內容容器（在示例中為.content ）並在鼠標離開時將其移除。

$('.go-top').hover(function(){
    $('.content').addClass("blur-content");

},function(){
    $('.content').removeClass("blur-content");
})

此外，我像這樣定義了blur-content class ：

.blur-content{
  filter:blur(3px);
}

Answer 2

基本的想法是這樣的。 您可以進一步使用 CSS 使其看起來更優雅。 這些應用程序通常有一個覆蓋層，它對用戶按鈕單擊或 hover 做出反應並顯示它。

您可以使用下面的鏈接模糊您的頁面內容或CSS 中的類似 Full Page Blur

 onBtnClick = ()=>{ document.getElementById("idBgOverlay").classList.toggle("overlayDisp"); }

 .fullBg{ width:100%; height: 300px; background:orange; }.mybutton{ border:none; border-radius: 50%; color:#000; background:#fff; width:3rem; height:3rem; font-size:2rem; z-index:2; position:absolute; }.bgOverlay{ background:#101010c7; position:absolute; height:13rem; width:13rem; border-radius:50%; top:-2rem; left:-2rem; display:none; }.overlayDisp{ display:block; }

 <div class="fullBg"> <div id="idBgOverlay" class="bgOverlay"></div> <button class="mybutton" onclick="onBtnClick()"> + </button> <div>