技術標籤：在網頁子文字框模擬特定的滑鼠滾輪

效果

• 滑鼠觸碰按鈕，出現水墨風格動畫
• 螢幕自適應
• 一份html檔案，一份css檔案，無javascript，上手程度：很簡單

筆記

:root

這個 CSS 偽類匹配文件樹的根元素。對於 HTML 來說，:root 表示元素，除了優先順序更高之外，與 html 選擇器相同。

box-sizing

屬性允許您以特定的方式定義匹配某個區域的特定元素。

content-box：在寬度和高度之外繪製元素的內邊距和邊框。
border-box：在寬度和高度之內繪製元素的內邊距和邊框。
inherit：從父元素繼承
顏色漸變linear-gradient
背景漂亮的深藍-淺藍效果就是這個的作用。具體請看developer.mozilla.org/zh-CN/docs/…

• calc()

此CSS函式讓你在宣告CSS屬性值時執行一些計算。它可以用在如下場合：、, 、、、或。

flex:

這是一種可以自動適應不同螢幕尺寸的佈局介面。下面的justify-content和align-items規定了應用flex佈局的子元素的排列方式

justify-content:設定或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。通俗一點就是左右方向。
align-items:設定或檢索彈性盒子元素在側軸(縱軸)方向上的對齊方式。通俗一點就是上下方向。
@media：
媒體查詢，簡單來說就是可以讓網頁自動適應不同的裝置螢幕尺寸。例如上面意為當螢幕寬度小於750px時，就讓flex的方向改為縱軸排列。

rem：

是一個相對單位，相對根元素字型大小的單位，再直白點就是相對於html元素字型大小的單位。用px這種絕對單位固然方便，但當螢幕尺寸改變，就沒看看全了。rem則是一種相對單位，根據父元素的變化而變化，解決了自適應的問題。

cubic-bezier:

貝塞爾曲線，用來生成水墨效果的關鍵。

原始碼：

html程式碼

CSS3 水墨風格背景動畫按鈕DEMO演示

css程式碼：

:root { --height: 100px; --width: 200px;}* { margin: 0; padding: 0; box-sizing: border-box;}body { width: 100%; height: 100vh; background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); font-family: sans-serif;}.wrapper { width: calc(4 * var(--width)); height: calc(4 * var(--height)); display: flex; justify-content: center; align-items: center;}.button { position: relative; width: calc(0.8 * var(--width)); height: calc(0.7 * var(--height)); display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; margin: 0 0.8rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0, 0.22, 0.3, 1);}.button:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1);}.button span { color: #fff; font-size: 1rem; z-index: 10; text-transform: uppercase; letter-spacing: 2px;}.button._1 { background: #2980b9;}.button._2 { background: #8e44ad;}.button._3 { background: #16a085;}.button._4 { background: #e74c3c;}.button .back { position: absolute; width: 0; height: 0; filter: url(#filter); border-radius: 50%; z-index: 5; transition: all 2.5s cubic-bezier(0.1, 0.22, 0.3, 1);}.button._1 .back { left: -50%; top: -50%; background: #27ae60;}.button._2 .back { right: -50%; top: -50%; background: #c0392b;}.button._3 .back { left: -50%; bottom: -50%; background: #34495e;}.button._4 .back { right: -50%; bottom: -50%; background: #2980b9;}.button:hover .back { width: calc(2 * var(--width)); height: calc(2 * var(--height));}@media only screen and (max-width: 750px) { .wrapper { flex-direction: column; } .button { margin: 0.8rem 0; }}