摘要:對于來說,表示元素,除了優(yōu)先級更高之外,與選擇器相同。從父元素繼承顏色漸變背景漂亮的深藍淺藍效果就是這個的作用。媒體查詢,簡單來說就是可以讓網(wǎng)頁自動適應不同的設備屏幕尺寸。具體請看貝塞爾曲線,用來生成水墨效果的關鍵。
效果
鼠標觸碰按鈕,出現(xiàn)水墨風格動畫
屏幕自適應
一份html文件,一份css文件,無javascript,上手程度:很簡單
歡迎來我的博客看此文章:http://clatterrr.com/archives...
源碼演示地址:https://clatterrr.github.io/i...
源碼:https://github.com/clatterrr/...
筆記 :root這個 CSS 偽類匹配文檔樹的根元素。對于 HTML 來說,:root 表示元素,除了優(yōu)先級更高之外,與 html 選擇器相同。
box-sizing屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素。
content-box:在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
border-box:在寬度和高度之內(nèi)繪制元素的內(nèi)邊距和邊框。
inherit:從父元素繼承
顏色漸變linear-gradient
背景漂亮的深藍-淺藍效果就是這個的作用。具體請看developer.mozilla.org/zh-CN/docs/…
calc()
此CSS函數(shù)讓你在聲明CSS屬性值時執(zhí)行一些計算。它可以用在如下場合:、, 、、、或。
flex:這是一種可以自動適應不同屏幕尺寸的布局界面。下面的justify-content和align-items規(guī)定了應用flex布局的子元素的排列方式
justify-content:設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。通俗一點就是左右方向。
align-items:設置或檢索彈性盒子元素在側軸(縱軸)方向上的對齊方式。通俗一點就是上下方向。
@media:
媒體查詢,簡單來說就是可以讓網(wǎng)頁自動適應不同的設備屏幕尺寸。例如上面意為當屏幕寬度小于750px時,就讓flex的方向改為縱軸排列。具體請看https://www.runoob.com/cssref...
是一個相對單位,相對根元素字體大小的單位,再直白點就是相對于html元素字體大小的單位。用px這種絕對單位固然方便,但當屏幕尺寸改變,就沒看看全了。rem則是一種相對單位,根據(jù)父元素的變化而變化,解決了自適應的問題。具體請看https://blog.csdn.net/ernijie...
cubic-bezier:貝塞爾曲線,用來生成水墨效果的關鍵。但博主具體原理不是很懂。參考https://www.jianshu.com/p/d99...
源碼:html代碼
CSS3 水墨風格背景動畫按鈕DEMO演示 hoverhoverhoverhover
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; } }
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116322.html
摘要:對于來說,表示元素,除了優(yōu)先級更高之外,與選擇器相同。從父元素繼承顏色漸變背景漂亮的深藍淺藍效果就是這個的作用。媒體查詢,簡單來說就是可以讓網(wǎng)頁自動適應不同的設備屏幕尺寸。具體請看貝塞爾曲線,用來生成水墨效果的關鍵。 showImg(https://segmentfault.com/img/bVbwNaj); 效果 鼠標觸碰按鈕,出現(xiàn)水墨風格動畫 屏幕自適應 一份html文件,一份c...
摘要:好看漂亮的網(wǎng)頁特效學習筆記猜猜下一個顏色是什么分步詳細解釋第一步很簡單的初始化函數(shù)。繪制新的火焰紅色的圓以及火花之前元素,即新的火焰紅色的圓以及火花的生命周期未完的話,就繼續(xù)更新它,否則就刪除它第五步以火焰為粒子。 showImg(https://segmentfault.com/img/bVbwV8z?w=376&h=388); 效果: 逼真的火焰跟隨鼠標,還冒出火花,照亮背景文字...
摘要:定義標準的文本。然后看看函數(shù)的定義自啟動來按下按鈕的時差不能超過最大持續(xù)時間重新繪制菜單項的位置先用確定按下按鈕的時間,儲存在中。如果到了規(guī)定時間的話,就執(zhí)行。然后再把取下的第一個當成第十三個接在最后面,又成了新的菜單排列。 showImg(https://segmentfault.com/img/bVbw1zV?w=818&h=479); 效果: 弧形菜單,文字按規(guī)則變形以及變換透...
摘要:如字體頁面推薦的那樣,把下面這段代碼在添加到頁面標簽內(nèi),即可嵌入相應的字體。但這還不是我們要的效果。它相對的不是父節(jié)點或者頁面的根節(jié)點。而是由視窗大小來決定的,單位,代表視窗的。具體請看屬性用來設置如何處理元素中的空白。 showImg(http://www.googlefonts.net/); 效果: 根據(jù)給出的兩個連續(xù)顏色,玩家需要猜出下一個是什么顏色 隨機關卡 使用vw,vh,...
摘要:如字體頁面推薦的那樣,把下面這段代碼在添加到頁面標簽內(nèi),即可嵌入相應的字體。但這還不是我們要的效果。它相對的不是父節(jié)點或者頁面的根節(jié)點。而是由視窗大小來決定的,單位,代表視窗的。具體請看屬性用來設置如何處理元素中的空白。 showImg(http://www.googlefonts.net/); 效果: 根據(jù)給出的兩個連續(xù)顏色,玩家需要猜出下一個是什么顏色 隨機關卡 使用vw,vh,...
閱讀 1118·2021-10-09 09:43
閱讀 18473·2021-09-22 15:52
閱讀 1059·2019-08-30 15:44
閱讀 3050·2019-08-30 15:44
閱讀 3243·2019-08-26 14:07
閱讀 903·2019-08-26 13:55
閱讀 2566·2019-08-26 13:41
閱讀 3086·2019-08-26 13:29