強大的CSS :實現仿 Windows10 滑鼠照亮邊框效果
安裝最新 Windows 10 update 之後,注意到系統 UI 裡有一個很棒的細節效果,在開始選單的磁貼裡或者 UWP 風格的設定介面中,元素的高亮邊框是可以感知滑鼠的,邊框的高亮部分會跟隨滑鼠的移動而移動。頓時靈機一動,這個效果用 CSS 可否實現?
自己是個做了幾年全棧開發的老碼農,如果你對前端開發這門技術感興趣,這裡推薦一下我的前端學習交流群: 767273102 ,裡面都是學習前端的從最基礎的HTML+CSS+JavaScript。jQuery,Ajax,node,angular等到移動端HTML5的專案實戰的資料都有整理,送給每一位前端小夥伴。最新技術,與企業需求同步。好友都在裡面學習交流,每天都會有大牛定時講解前端技術!
分析
拿桌面日曆中的效果為例,滑鼠移動時附近的邊框也漸變性可見。這個效果不就是探照燈效果嘛!這個完全可以用 CSS 中的 mask 蒙版配合一個徑向漸變實現。
但問題是,mask 蒙版是作用於整個元素的,沒辦法只作用於 border 而不影響內容。這個,那隻能把 border 和實際內容分離用不同層來表示了。嗯,滑鼠移動就更新蒙版位置,應該不成問題。
實現
準備工作
首先,擼好兩層日曆格子,一層展示日期資訊,一層展示探照燈效果的邊框。用 flex 佈局也好,grid 也好,哪怕 inline-block 也都是沒有問題的,這都不重要,重要的是上下兩層的格子一定要對齊,然後我們用 relative 的容器把這兩層 absolute 層圈起來,固定住。
<div class="calendar"> <div class="calendar-header"> <div class="week-day">一</div> <div class="week-day">二</div> <div class="week-day">三</div> <div class="week-day">四</div> <div class="week-day">五</div> <div class="week-day">六</div> <div class="week-day">日</div> </div> <div class="calendar-body"> <div class="grid-container border-layer"> <div class="grid-item"></div> ... <div class="grid-item"></div> </div> <div class="grid-container number-layer"> <div class="grid-item"><span>28</span><span>十四</span></div> <div class="grid-item"><span>29</span><span>十五</span></div> ... <div class="grid-item"><span>2</span><span>十九</span></div> </div> </div> </div>
層示意圖:
效果就是這樣了:
滑鼠沒有放上去的時候,先把 border 層隱藏掉。
.border-layer { ... visibility: hidden; } .calendar:hover .border-layer { visibility: visible; }
CSS Mask
CSS Mask 類似於 Photoshop 中的圖層蒙版,可以使用一張圖作為蒙版用作在目標元素上,圖片的 alpha 通道(也就是透明度資訊)決定了目標元素哪部分可見(也可以選擇使用亮度資訊)。
舉個例子,如果蒙版圖片是一張半透明圖,則作用到實際元素上效果和設定 opacity: 0.5 效果一樣;如果蒙版圖片是一張中間鏤空的五角星,則效果就是元素被裁剪成五角星形狀。
Mask 的語法和 background 的語法幾乎完全一致,這裡我們用徑向漸變建立一個半徑 80px 從中心白色到邊緣透明的漸變圓,配合 mask-repeat 和 mask-size 防止 repeat 和變形。
-webkit-mask-image: radial-gradient(circle at center, white 0%, transparent 80px); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 160px 160px; /* 半徑80px 所以 size 需要是 160px */
接下來我們來更新 mask-position 。這裡有兩個點要注意,一是獲取滑鼠對目標元素的相對座標,一是 position 偏移。
MouseEvent 中有一堆的 X/Y,我們用相對 document 的座標 pageX/pageY,減去目標元素相對 document 的座標,就能得到我們需要的座標了。 向量公式: AB = AC - BC :
不過,這裡 mask-position 的座標還需要處理一下。我們定義的 mask 是一張 160x160 的圓形漸變,而 mask-position 和 background-position 一樣,定義的是蒙層左上角 (0,0) 的位置實際需要和容器的哪個座標對齊。因此我們需要把計算得到的座標再減去 (80, 80) 才能讓漸變中心和滑鼠的座標保持一致。
var borderLayer = document.querySelector(".border-layer"); document.querySelector(".calendar").addEventListener("mousemove", function(ev){ var x = ev.pageX; var y = ev.pageY; var bounding = borderLayer.getBoundingClientRect(); borderLayer.style.webkitMaskPosition = `${x - bounding.x - 80}px ${y -bounding.y - 80}px`; });
最終效果: codepen.io/liuxiaole-t…
後記
把 border 分層然後應用 mask 的方案只能是在特定場合下有效,分離另一個層增加了很多維護成本。在查閱 MDN 資料的時候,偶然發現居然有個貨叫
mask-border
,貌似是作用於 border 的 mask,目前還沒有瀏覽器實現。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2644782/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS 實現仿 Windows10 滑鼠照亮邊框效果CSSWindows
- css實現的交叉邊框效果CSS
- css實現邊框陰影效果CSS
- 強大的CSS:實現平行四邊形佈局效果CSS
- CSS3實現多樣的邊框效果CSSS3
- css3實現0.5px邊框效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- css動態邊框效果CSS
- 小視訊原始碼,CSS 實現半透明邊框效果原始碼CSS
- CSS實現流動邊框CSS
- css3實現的邊框陰影效果程式碼例項CSSS3
- 45個純CSS實現的精美邊框效果【附原始碼】【上篇】CSS原始碼
- CSS如何實現當滑鼠放在圖片上時改變邊框CSS
- css3實現邊框具有動態環形遮罩效果CSSS3遮罩
- css實現氣泡框效果CSS
- CSS圖片邊框陰影效果CSS
- CSS3多層邊框效果CSSS3
- CSS虛線邊框效果程式碼CSS
- css3實現div邊框陰影效果程式碼例項CSSS3
- css實現的滑鼠滑過星星高亮效果CSS
- JavaScript、CSS實現滑鼠跟隨繁花效果JavaScriptCSS
- css-虛線邊框滾動效果CSS
- css內邊框效果程式碼例項CSS
- CSS實現滑鼠移入彈出下拉框CSS
- 表格細邊框的兩種CSS實現方法CSS
- CSS實現文字框中的英文字母大寫效果CSS
- 如何實現css漸變圓角邊框CSS
- 用css實現自定義虛線邊框CSS
- css如何實現只保留內部邊框CSS
- CSS3實現0.5px邊框CSSS3
- CSS mask 實現滑鼠跟隨鏤空效果CSS
- 45個純CSS實現的精美邊框效果【附線上演示和原始碼】【下篇】CSS原始碼
- CSS3邊框動態環繞效果CSSS3
- CSS3環繞動態邊框效果CSSS3
- 【基礎】CSS實現多重邊框的5種方式CSS
- 不可思議的純 CSS 實現滑鼠跟隨效果CSS
- css實現半透明邊框程式碼例項CSS
- 用js(hover )+css實現下拉框效果(有效果圖)JSCSS