摘自<css世界>(張?chǎng)涡裰?經(jīng)典案例---------持續(xù)更新中

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

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

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

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

2.需求:展開(kāi)收起,帶有滑動(dòng)效果

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

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

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

4.需求:css加載中...動(dòng)態(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);}
}

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114703.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

摘要：畢竟這是張?chǎng)涡衿吣昵暗奈恼隆Ｃǖ囊馑季褪菈K元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。但此法沒(méi)有經(jīng)過(guò)大型項(xiàng)目的考驗(yàn)，希望大神們來(lái)探討一下可行性。本文主要是探討傳統(tǒng)項(xiàng)目中的css命名，vue、react等單頁(yè)應(yīng)用都可以使用css-module來(lái)解決這個(gè)問(wèn)題作為一名初級(jí)前端，免不了要切圖(寫(xiě)css、html靜態(tài)部分)，寫(xiě)css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，...

crossoverJie 2019-08-01 16:52 評(píng)論0 收藏0