作品網址:
↓每次進去圖片都會不一樣↓
思考需求分析
1.spacing對應到下方圖片的邊框寬。
2. blur 會對應到下方圖片整體的模糊度。
3.color點下去會跳出顏色選擇框,然後可調整顏色。
4.color調整顏色後,標題JS 和圖片外框顏色會變化。
5.當滑鼠移動 spacing 和blur的範圍調整器的時候,下方圖片會監聽這個動作並產生相應的狀態。
特別技術、函式
<HTML>
<input type=”color”>:是input元素中的一個特定種類,用來創建一個允許用戶使用顏色選擇器,或輸入兼容CSS語法的顏色代碼的區域。(不支持Alpha通道)此元素的外觀會因瀏覽器不同而不同,可能是簡單的驗證顏色輸入格式的文本框,也可能使用平台原生或自定義樣式的顏色選擇器。
<CSS>
CSS 原生變數(Variables):– 宣告變數、var() 呼叫變數
:root:代表文檔樹的根元素,在聲明全局CSS變量時很有用。
<JavaScript>
dataset: 當我們要取得 data-* attribute 的屬性值時,我們可以簡單利用 JavaScript 中的 dataset 物件,就可以取得了
documentElement:屬性以一個元素對象返回一個文檔的文檔元素。
參考資料
SASS, LESS 退散,原生 CSS 可以使用變數啦!:https://muki.tw/tech/native-css-variables/
CSS3 :root 选择器: https://www.w3school.com.cn/cssref/selector_root.asp
filter: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
JS 30 – 03 – CSS Variables:https://ithelp.ithome.com.tw/articles/10202668
[技術分享] 什麼是 HTML 5 中的資料屬性(data-* attribute): https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html