本期技術週刊小編帶大家康康程序員如何用編程展現藝術噠～
文章推薦
手寫一個有點意思的電梯小程序
- 點擊樓層，催動電梯上升或者下降
- 電梯到達對應樓層，電梯左右門打開
- 門打開之後，裏面的美女就出來啦
- 提示信息: 本美女就要出來了，請速速來迎接
- 按鈕會有一個點擊選中的效果
根據以上的分析，我們就可以很好的實現電梯小程序啦，接下來讓我們進入編碼階段吧。
PS: 這裏的樓層數是動態生層的，不過建議值不要設置太大，可以在代碼裏做限制。
那些你不知道的 CSS 自定義形狀網格佈局
在正常的開發中，我們會遇到很多元素塊排列對齊的需求，如九宮格抽獎，多張圖片上傳後等分佈局預覽，微信朋友圈多張圖片展示等。這都是正常的正方形很規整的佈局。
如果圖像不是完全正方形，而是形狀像六邊形或菱形怎麼辦？我們怎麼做呢。事實上，我們將結合我們已經研究過的 CSS 網格技術，並加入一些 CSS clip-path和mask魔法，為您可以想象的任何形狀創建精美的圖像網格！
高階切圖技巧！基於單張圖片的任意顏色轉換
今天，要介紹一種基於 CSS mask-composite 的高級技巧。
通過掌握它，我們可以通過一張 圖片，得到關於它的各種變換，甚至乎，得到各種不同顏色的變換。
Windows 滾動條如何美化成 macOS 那樣？
考慮到桌面端現在已經是-webkit-的天下了，以下自定義均以chrome為例
自定義滾動條需要用到兩個關鍵的偽元素::-webkit-scrollbar和::-webkit-scrollbar-thumb
- ::-webkit-scrollbar滾動容器樣式
- ::-webkit-scrollbar-thumb滑塊樣式
妙啊！純 CSS 實現拼圖遊戲
本文，將向大家介紹一種將多個 CSS 技巧運用到極致的技巧，利用純 CSS 實現拼圖遊戲。
我們拆解一下核心的難點：
- 如何讓一個元素變得可以拖拽？
- 如何讓一個元素從一個固定的位置通過拖拽，停留在另外一個位置？
- 最難的是，基於（2），拖拽元素後釋放，只有釋放在特定的位置，元素才會固定到新位置，否則，返回到原先的位置
Oh No，上面的 (2)、(3) 怎麼看也不像是單純的 CSS 能解決的問題。
那麼，到底是如何巧妙的搭配、組合，最終能夠利用 CSS 來實現這樣的效果呢？讓我們一步一步來拆解這個過程。
提升 web 輸入體驗！JS 如何自動配對標點符號？
原理其實非常簡單，可以分為以下幾個步驟
- 檢測輸入的內容，如果是以上標點符號就下一步
- 根據輸入的標點，自動補全與之對應的後半部分
- 將光標移到兩個標點之間
是不是非常好理解呢？但是，裏面的細節遠不止這些，涉及到非常多的比較生僻的原生方法，一起看看如何實現的吧
有意思的鼠標指針交互探究
有一點需要注意的是，利用模擬的鼠標指針去 Hover 元素，Click 元素的時候，會發現這些事件都無法觸發。
這是由於，此時被隱藏的指針下面，其實懸浮的我們模擬鼠標指針，因此，所有的 Hover、Click 事件都觸發在了這個元素之上。
當然，這個也非常好解決，我們只需要給模擬指針的元素，添加上 pointer-events: none，阻止默認的鼠標事件，讓事件透傳即可：
{ pointer-events: none; }
實現聚焦效果
這是之前朋友問我的一個功能：他覺得看網頁有時候注意力會被轉移，希望可以有個蒙層幫助他集中注意力
反手我就用 box-shadow 把功能寫了出來。
JavaScript、CSS 實現鼠標跟隨繁花效果
這個效果的靈感來自某些網站，當鼠標移動時，鼠標箭頭周圍出現氣泡、紅心或水波的擴散圖案，這種效果對網頁的訪問者有很強的視覺吸引力
我們用原生的 HTML，JavaScript 和 CSS 就能實現這種效果
本週活動推薦
細心觀察的小夥伴們可能已經發現，在 SegmentFault 首頁悄悄上線了一個全新的版塊 ☕ 極客觀點。
不同於技術問答，社區中非具體技術問題的討論可以在此發起，但「極客觀點」 並不是一個灌水、摸魚區哦~ 我們希望大家聚焦於技術方向、程序員職業發展等話題，發起有價值的討論，輸出有價值的觀點，希望這裏可以成為陪伴大家一起成長的陣地。🤗️
🌟 🌟 🌟 重點來咯！！！「思否小姐姐」向大家發起新的打卡挑戰啦！截止本月底完成「極客觀點」打卡活動，即可獲得稀有限量周邊喔～
快來打卡領取稀有限量周邊，一鍵傳送：https://segmentfault.com/a/11...
活動獎品概覽：
# SegmentFault 技術週刊 #
「技術週刊」是社區特別推出的技術內容系列，一週一主題。
每週二更新，歡迎「關注」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。
如有問題可以添加小姐姐微信~
