摘自<css世界>(張鑫旭著)經(jīng)典案例---------持續(xù)更新中

MageekChiu 發(fā)布于2019-08-30 10:59 / 1860人閱讀

摘要：需求頁面某個模塊的文字內(nèi)容是動態(tài)的可能是幾個字也可能是一句話然后希望文字少的時候居中顯示文字超過一行的時候居左顯示該如何實(shí)現(xiàn)呢核心代碼如下需求展開收起帶有滑動效果核心代碼如下一個足夠大的最大高度值需求鼠標(biāo)移動到文字上方時文字被替

1.需求:頁面某個模塊的文字內(nèi)容是動態(tài)的,可能是幾個字,也可能是一句話.然后,希望文字少的時候居中顯示,文字超過一行的時候居左顯示.該如何實(shí)現(xiàn)呢?

/**核心css代碼如下:**/
.box {
  text-align:center;
}
.content {
  display:inline-block;
  text-align:left;
}

2.需求:展開收起,帶有滑動效果

/**核心代碼如下**/
.element {
  max-height:0;
  overflow:hidden;
  transtion: max-height .25s;
}
.element.active {
  max-height:666px; //一個足夠大的最大高度值
}

3.需求:鼠標(biāo)移動到文字上方時,文字被替換為圖片

/**核心代碼如下**/
h1:hover {
  content: url("圖片鏈接")
}

4.需求:css加載中...動態(tài)效果

正在加載中...
dot {
  display:inline-block;
  height:1em;
  line-height:1;
  text-align: left;
  vertical-align: -.25em;
  overflow: hidden;
}
dot::before {
  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);}
}

GPU云服務(wù)器云服務(wù)器 asp中&lt&gt的意思 python &lt&gt java &lt=&gt java&lt &gt

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114703.html

相關(guān)文章

摘自<JavaScript語言精粹>經(jīng)典案例----------持續(xù)更新

摘要：定義一個函數(shù)它設(shè)置一個節(jié)點(diǎn)為黃色然后把它漸變成白色不想當(dāng)廚子的畫家不是一個好老師郭德綱根據(jù)書上的例子有感而發(fā)自己用遞歸也寫了一個類似的使用記憶功能技巧編寫斐波那契數(shù)列得到的總數(shù)原例一普通遞歸的斐波那契數(shù)列共調(diào)用了函數(shù)多次升級 1.定義一個函數(shù),它設(shè)置一個DOM節(jié)點(diǎn)為黃色,然后把它漸變成白色 var fade = function (node) { var level = 1; ...

張遷 2019-08-26 13:49 評論0 收藏0
《第五屆中國CSSConf開發(fā)者大會》參會總結(jié)

摘要：剖析新版，為你所用大漠第二個議題是大漠老師的，大漠老師是的站長，著有圖解核心技術(shù)與案例實(shí)戰(zhàn)。自定義屬性大漠老師多次強(qiáng)調(diào)，這叫做自定義屬性，不叫變量。前言對于我來講，雖然做前端那么多年，但對 CSS 的探索非常少，很多 CSS 知識還是在畢業(yè)之前積累下來。揣著一本《精通CSS:高級Web標(biāo)準(zhǔn)解決方案(第二版)》（現(xiàn)在出第三版了，這是我在 CSS 道路上的啟蒙書）在前端路上走了這么幾...

TerryCai 2019-08-29 18:34 評論0 收藏0
GMTC 全球大前端技術(shù)大會2019匯總（持續(xù)更新）

摘要：最新進(jìn)展與未來展望主題演講嘉賓董韜團(tuán)隊(duì)高級研究員演講實(shí)錄閑魚基于的架構(gòu)演進(jìn)與創(chuàng)新專題演講嘉賓于佳宗心阿里巴巴閑魚客戶端團(tuán)隊(duì)負(fù)責(zé)人基于跨平臺框架的動態(tài)化平臺建設(shè)專題演講嘉賓劉志磊美團(tuán)大前端技術(shù)專家前端開發(fā)編程語言的過去現(xiàn)在和未來賀師俊高級前端 Flutter 最新進(jìn)展與未來展望主題演講嘉賓：董韜Google Flutter 團(tuán)隊(duì) 高級研究員 GMTC2019演講實(shí)錄|閑魚基于Flutt...

qylost 2019-08-23 18:34 評論0 收藏0
關(guān)于css命名的一點(diǎn)思考，探討一下css命名空間的可行性

摘要：畢竟這是張鑫旭七年前的文章。命名法的意思就是塊元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。但此法沒有經(jīng)過大型項(xiàng)目的考驗(yàn)，希望大神們來探討一下可行性。本文主要是探討傳統(tǒng)項(xiàng)目中的css命名，vue、react等單頁應(yīng)用都可以使用css-module來解決這個問題作為一名初級前端，免不了要切圖(寫css、html靜態(tài)部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，...

lk20150415 2019-08-29 12:36 評論0 收藏0
關(guān)于css命名的一點(diǎn)思考，探討一下css命名空間的可行性

摘要：畢竟這是張鑫旭七年前的文章。命名法的意思就是塊元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。但此法沒有經(jīng)過大型項(xiàng)目的考驗(yàn)，希望大神們來探討一下可行性。本文主要是探討傳統(tǒng)項(xiàng)目中的css命名，vue、react等單頁應(yīng)用都可以使用css-module來解決這個問題作為一名初級前端，免不了要切圖(寫css、html靜態(tài)部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，...

crossoverJie 2019-08-01 16:52 評論0 收藏0