摘要:有趣的圖形通過不同的屬性,我們能組合出很多有趣的圖形。系列是以基礎(chǔ)概念為主題的系列文章,旨在幫助大家更深刻地了解并且提高在各位開發(fā)者心目中的地位。
前言作者:陳大魚頭
github: KRISACHAN
上一節(jié)留了一個(gè)問題:“為什么 currentColor 是駝峰命名?”。
其實(shí)也有小伙伴答對(duì)了,原因就是因?yàn)?currentColor 是作為 SVG 的屬性值存在,因此在 CSS 里就保留了這個(gè)駝峰寫法,順便提一個(gè)冷知識(shí):“ currentcolor 這種全小寫的方式也是允許的。 ”
小知識(shí)分享完,本章開始分享 CSS圖形,通過 CSS 不同屬性間的組合,可以勾勒出怎樣的圖形呢?下面我們就簡(jiǎn)單分享幾個(gè)簡(jiǎn)單的DEMO。
免責(zé)聲明:由于魚頭技術(shù)有限,所以如果DEMO不得各位大佬的心,請(qǐng)輕噴,噴重了魚頭會(huì)嚶嚶嚶的。
有趣的圖形通過不同的CSS屬性,我們能組合出很多有趣的 CSS 圖形。粘連效果
效果如圖:
鏈接在此:
https://codepen.io/krischan77...
磚頭效果效果如圖:
鏈接在此:
https://codepen.io/krischan77...
CSS圖標(biāo)效果如圖:
鏈接在此:
https://codepen.io/krischan77...
圖片美化CSS也是可以實(shí)現(xiàn)美圖秀秀的濾鏡跟倒影效果滴。濾鏡
鏈接在此:
https://codepen.io/krischan77...
倒影鏈接在此:
https://codepen.io/krischan77...
原生組件美化在我們使用原生組件的時(shí)候,是否覺得樣式不能滿足我們的開發(fā)需求呢?沒關(guān)系,讓CSS來(lái)給你優(yōu)化。自定義滾動(dòng)條
鏈接在此:
https://codepen.io/krischan77...
表單控件鏈接在此:
https://codepen.io/krischan77...
后記本章主要是分享一些用CSS屬性實(shí)現(xiàn)簡(jiǎn)單的效果,雖然不是什么讓人驚艷的東西,但其實(shí)也說明了只要我們肯發(fā)揮想象,CSS一定會(huì)有回應(yīng)的,大家不妨多思考如何用不同的屬性組合成有趣的圖形吧。
【Hello CSS】系列【Hello CSS】是以CSS基礎(chǔ)概念為主題的系列文章,旨在幫助大家更深刻地了解并且提高CSS在各位開發(fā)者心目中的地位。由于魚頭我水平有限,文筆有限,如果各位在文章中發(fā)現(xiàn)有任何不合理,不正確的地方,還煩不吝指出,我會(huì)非常感謝的;如果通過文章有任何想法或疑問,也希望各位能積極留言,我們互相探討;如果通過本系列文章有所收獲,這就讓魚頭我喜不自勝了!
如果你也喜歡 CSS,喜歡探討技術(shù),或者對(duì)本文,本系列有任何的意見或建議,你可以掃描下方二維碼,關(guān)注微信公眾號(hào)“ 魚頭的Web海洋 ”,隨時(shí)與魚頭互動(dòng)。歡迎!衷心希望可以遇見你。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/116107.html
摘要:有趣的圖形通過不同的屬性,我們能組合出很多有趣的圖形。系列是以基礎(chǔ)概念為主題的系列文章,旨在幫助大家更深刻地了解并且提高在各位開發(fā)者心目中的地位。 作者:陳大魚頭 github: KRISACHAN 前言 上一節(jié)留了一個(gè)問題:為什么 currentColor 是駝峰命名?。 其實(shí)也有小伙伴答對(duì)了,原因就是因?yàn)?currentColor 是作為 SVG 的屬性值存在,因此在 CSS 里就...
摘要:那就是重力加速度的表現(xiàn)以及彈力球與空氣,地面所產(chǎn)生的摩擦力的表現(xiàn)。彈力球下落時(shí),由于重力加速度的原因,所以速度會(huì)越來(lái)越大,往上跳時(shí)速度會(huì)越來(lái)越小直至。 作者:陳大魚頭 github: KRISACHAN 在上一節(jié)中, 不走心 地畫了一些 CSS圖案 ,本節(jié)就繼續(xù)不走心地 畫動(dòng)畫 。 CSS的動(dòng)畫屬性 在CSS中,animation 、 transition 跟 transform...
摘要:概述本文為協(xié)議的第八章,本文翻譯的主要內(nèi)容為錯(cuò)誤處理相關(guān)內(nèi)容。這個(gè)規(guī)則在建立連接開始握手和后續(xù)的數(shù)據(jù)交換時(shí)都生效。 概述 本文為 WebSocket 協(xié)議的第八章,本文翻譯的主要內(nèi)容為 WebSocket 錯(cuò)誤處理相關(guān)內(nèi)容。 錯(cuò)誤處理(協(xié)議正文) 8.1 處理 UTF-8 數(shù)據(jù)錯(cuò)誤 當(dāng)終端按照 UTF-8 的格式來(lái)解析一個(gè)字節(jié)流,但是發(fā)現(xiàn)這個(gè)字節(jié)流不是 UTF-8 編碼,或者說不是一個(gè)...
摘要:通過模糊來(lái)弱化背景和滾動(dòng)提示使用兩層背景,控制交互式的圖片對(duì)比控件范圍輸入控件方式書中有很詳細(xì)的解答提醒自己要回顧。 1. 第一章 css編碼技巧 第二章 邊框與背景 半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量,////bac...
摘要:轉(zhuǎn)發(fā)接著上篇文章說添加以下內(nèi)容映射端口映射地址你要轉(zhuǎn)發(fā)的地址做文件服務(wù)器你的服務(wù)器文件地址重啟 Nginx轉(zhuǎn)發(fā) 接著上篇文章說 cd /usr/local/nginx/conf/vhost vi ***.***.com.conf 添加以下內(nèi)容 server { listen 80; # 映射端口 autoindex on; server_name ***.com...
閱讀 3386·2022-01-04 14:20
閱讀 3117·2021-09-22 15:08
閱讀 2203·2021-09-03 10:44
閱讀 2321·2019-08-30 15:44
閱讀 1499·2019-08-29 18:40
閱讀 2664·2019-08-29 17:09
閱讀 2993·2019-08-26 13:53
閱讀 3226·2019-08-26 13:37