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

MageekChiu 發布于2019-08-30 10:59 / 1830人閱讀

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

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

/**核心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.需求:鼠標移動到文字上方時,文字被替換為圖片

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

4.需求:css加載中...動態效果

正在加載中...
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云服務器 asp中&lt&gt的意思 python &lt&gt java &lt=&gt java&lt &gt

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114703.html

摘自<JavaScript語言精粹>經典案例----------持續更新

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

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

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

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

摘要：最新進展與未來展望主題演講嘉賓董韜團隊高級研究員演講實錄閑魚基于的架構演進與創新專題演講嘉賓于佳宗心阿里巴巴閑魚客戶端團隊負責人基于跨平臺框架的動態化平臺建設專題演講嘉賓劉志磊美團大前端技術專家前端開發編程語言的過去現在和未來賀師俊高級前端 Flutter 最新進展與未來展望主題演講嘉賓：董韜Google Flutter 團隊高級研究員 GMTC2019演講實錄|閑魚基于Flutt...

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

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

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

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

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