資訊專欄INFORMATION COLUMN
摘要：最近在看張鑫旭的世界看了這個書感覺打開了世界的大門建議前端工程師人手一本針對字符內容生成這一技術用的最多的應該就是配合實現(xiàn)字體圖標了吧因為就運用了這一技術進入之后默認是點擊紅線里面就是連接了可以直接打開看到源碼與上面所寫無二在
最近在看張鑫旭的《css世界》, 看了這個書感覺打開了css世界的大門. 建議前端工程師人手一本
針對content 字符內容生成 這一技術用的最多的應該就是配合@font-face實現(xiàn)字體圖標了吧. 因為http://www.iconfont.cn 就運用了這一技術
@font-face {
font-family: "iconfont"; /* project id 243181 */
src: url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot");
src: url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot?#iefix") format("embedded-opentype"),
url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.woff") format("woff"),
url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.ttf") format("truetype"),
url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.svg#iconfont") format("svg");
}
.icon-search:before {
font-size: 24px; font-family: iconfont; content: "e657"; color: #000;
}
進入iconfont之后默認是Unicode 點擊Font class 紅線里面就是連接了, 可以直接打開看到源碼. 與上面所寫無二.
在上面:before中content中的字符是Unicode, 由此延伸出下一個功能 動態(tài)加載頁面內容的時候時常用到"正在加載中..."這幾個字, 可以利用這一技術實現(xiàn)動態(tài)...
html 正在加載中... css dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot { display: block; content: "...a..a."; white-space: pre-wrap; animation: dot 3s infinite step-start both; } @keyframes dot { 33% { transform: translateY(-2em) } 66% { transform: translateY(-1em) } }
效果可以查看張鑫旭博客查看, ie6~ie9是靜態(tài)的, 支持animation動畫的瀏覽器都是動態(tài)的.
動畫原理為: 插入3行內容是 3個點、2個點和一個點, 然后通過transform控制垂直位置.
這里需要注意的有這么幾點
為什么是::before, 而不是:before, 可不可以使用::after
從content屬性來看, 是3個點在第一行, 而1個點反而在最后一行, 為什么這么處理
這里white-space值為何是pre-wrap 而不是pre
對這幾個答案一一做回答:
:before是偽類, ::before則為偽元素. 偽元素使用::before 同時display設置為block, 是為了在現(xiàn)代瀏覽器下把原來的3個點推到最下面, 不會影響content的3行內容顯示, 如果使用::after就很難實現(xiàn)效果
3個點在第一行是為了兼容ie9, 應為ie9認識
pre-wrap換成pre效果一樣.
content開啟閉合符號生成
CSS中有個quotes屬性, 可以指定open-quote和close-quote字符具體是什么. 例如, 針對不同語言指定不同的前后符號:
css世界是一本好書
css世界是一本好書/* 為不同語言指定引號 */ :lang(ch) > q { quotes: """ """; } :lang(en) > q { quotes: """ """; } :lang(no) > q { quotes: "<" ">"; } /* 在q標簽的前后插入引號 */ q:before { content: open-quote; } q:after { content: close-quote; }
css世界是一本好書
在此基礎上演變更多好玩的:
.ask {
quotes: "提問: "" """;
}
.answer {
quotes: "回答: "" """;
}
.ask:before,
.answer:before {
content: open-quote;
}
.ask:after,
.answer:after {
content: close-quote;
}
你問我愛你有多深?
月亮代表我的心
content attr屬性值內容生成
這個功能比較常用, 作者常用, 我也很常用.
img::after {
/* 生成alt信息 */
content: attr(alt);
}
除了原生屬性, 自定義的HTML屬性也是可以的
.icon:before {
content: attr(data-title);
}
需要注意的是, attribute中的屬性名不要加引號!
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/116701.html
摘要：計數(shù)器效果可是說是的重中之重此功能非常強大實用且不具有可替代性甚至可以實現(xiàn)連都不好實現(xiàn)的效果這個地方放慢節(jié)奏細細品味先來個例子體驗一下計數(shù)器第一個第二個第三個所謂計數(shù)器效果指的是使用代碼實現(xiàn)隨著元素數(shù)目增多數(shù)值也跟著變大的效果圖中紅色阿 計數(shù)器效果可是說是content的重中之重, 此功能非常強大、實用, 且不具有可替代性, 甚至可以實現(xiàn)連js都不好實現(xiàn)的效果. 這個地方放慢節(jié)奏, 細...
摘要：上一篇文章手把手教你如何用構建技術文章聚合平臺一介紹了如何使用搭建的運行環(huán)境，并且將與集成，對掘金進行技術文章的抓取，最后可以查看抓取結果。本篇文章將繼續(xù)講解如何利用編寫一個精簡的聚合平臺，將抓取好的文章內容展示出來。 上一篇文章《手把手教你如何用Crawlab構建技術文章聚合平臺(一)》介紹了如何使用搭建Crawlab的運行環(huán)境，并且將Puppeteer與Crawlab集成，對掘金、...
摘要：重構系統(tǒng)是一項非常具有挑戰(zhàn)性的事情。架構與說起來，我一直是一個黨。如下圖是采用的架構這與我們在項目上的系統(tǒng)架構目前相似。而這是大部分所不支持的。允許內容通過內容服務更新使用于是，有了一個名為的框架用于管理內容，并存儲為。 重構系統(tǒng)是一項非常具有挑戰(zhàn)性的事情。通常來說，在我們的系統(tǒng)是第二個系統(tǒng)的時候才需要重構，即這個系統(tǒng)本身已經(jīng)很臃腫。我們花費了太量的時間在代碼間的邏輯，開發(fā)新的功能變得...
閱讀 2205·2023-04-25 17:48
閱讀 3656·2021-09-22 15:37
閱讀 2992·2021-09-22 15:36
閱讀 6147·2021-09-22 15:06
閱讀 1697·2019-08-30 15:53
閱讀 1499·2019-08-30 15:52
閱讀 783·2019-08-30 13:48
閱讀 1189·2019-08-30 12:44
