前端必看的8個HTML+CSS技巧

時間 2020-04-14

標籤前端看的 html+css html css 技巧欄目 CSS 简体版

原文原文鏈接

CSS是一個很獨特的語言。看起來很是簡單，可是某種特殊效果看似簡單，實現起來就很有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧，一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們，從新燃起對前端排版和特效的熱愛和熱情！🔥javascript

1. 固定底部內容

這種是一個很是常見的佈局方式，可是對於新手來講是比較常見的難題。css

這種佈局方式在後臺管理系統中比較常見，當咱們內容不足瀏覽器窗口高度時，底部內容須要固定在底部。當內容超出了瀏覽器窗口高度，就會隨着內容日後推。html

在有CSS3以前，實現這個效果是很有難度的。瀏覽器窗口高度是會根據不一樣用戶打開瀏覽器的狀況，屏幕大小的差別和瀏覽器的縮放比例而變。咱們須要藉助JavaScript來實時獲取瀏覽器高度進行運算才能實現。雖說標題是說「固定」底部，可是咱們想要的效果不是position: fixed。使用固定定位，在內容高於窗口高度時，就會擋住咱們的內容。前端

隨着CSS3的來臨，最完美的實現方式是使用Flexbox。實現的關鍵就是使用不太被關注的flex-grow屬性，能夠在咱們的內容標籤元素（好比div）中使用。在咱們下面的例子裏使用了main標籤。java

我來說解一下實現原理吧。jquery

flew-grow是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間。若是咱們使用flex-grow: 0，那這個flex元素就徹底不會擴展了。因此咱們須要把頭部和底部之間的內容標籤元素設置爲flex-grow: 1或者flex-grow: auto，這樣內容部分就會自動填充滿頭部和底部以外的全部空間。git

爲了不底部內容受內容部分擴充空間的影響，咱們給footer底部元素flex-shrink: 0屬性。flex-shrink的做用與flex-grow是偏偏相反，用來控制flex元素收縮的空間，這裏咱們給了flex-shrink: 0就是爲了底部footer的大小不受影響。程序員

咱們直接上HTML和CSS代碼看看是怎麼實現的。github

HTML

<div id="document">
	<nav>
		<h1>頭部內容</h1>
	</nav>
	<main>
		<p>能夠添加更多內容看看底部的變化哦！</p>
	</main>
	<footer>
		<h1>底部內容</h1>
	</footer>
</div>
複製代碼

#document {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #202020;
    font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}

nav, footer {
    background: #494949;
    display: flex;
    justify-content: center;
}

main {
    color: #bdbdbd;
    flex: auto;
}

footer {
    flex-shrink: 0;
}

* {
    margin: 0;
}

h1,
p {
    padding: 15px;
}

nav > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}

footer > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}
複製代碼

🌟知識點總結：web

flex-grow --- 是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間

flex-shrink --- 做用與flex-grow是偏偏相反，用來控制flex元素收縮的空間

預覽實際效果 ｜ GitHub源碼 ｜喜歡的童鞋 🌟star 一下謝謝

2. 懸停放大圖片特效

懸停放大圖片是一個特別吸引眼球的特效，比較經常使用於可點擊的圖片。當用戶懸停鼠標在圖片上，圖片會稍微的放大。

其實實現這個特效是很是簡單的。首先咱們須要一個div包裹這img標籤，這個包裹層是用來遮擋住圖片，當圖片放大時不會出現圖片超出咱們規定的寬高之外。

首先咱們來說講div包裹的屬性，咱們須要給它一個固定的width寬和height高。而後咱們必須給予這個元素overflow: hidden屬性。讓圖片放大的時候不會超出這個div元素的寬高。有了這個包裹層，咱們就能夠編寫img的各類效果了。

個人例子裏面用了transform: scale(1,1)做爲懸停時的圖片特效，這個transform是用於改變任何元素的屬性的，而後scale是用於放大（整數就會放大）或者縮小（負數就會縮小）元素的。

上代碼讓你們看看：

html body中放入

<div class="img-wrapper">
  <img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
</div>
複製代碼

.img-wrapper {
  width: 400px;
  height: 400px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.img-wrapper img {
  height: 400px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.img-wrapper img:hover {
  transform: scale(1.1);
}

.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #000;
}
複製代碼

若是大家想讓圖片更加炫酷能夠加上圖片過濾屬性filter，讓圖片變灰或者變深褐色，而後懸停時候出現更加炫酷的顏色變幻。灰化的屬性是filter: grayscale(100%);，而後深褐色化的屬性是filter: sepia(100%)。其實圖片還有不少過濾屬性的，你們有興趣也能夠去嘗試一下哦！

加入特殊效果的代碼以下：

HTML

<!-- 灰度過濾 -->
<div class="img-wrapper">
  <img class="grayscale-img" src="https://img-blog.csdnimg.cn/2020032211021728.png" />
</div>

<!-- 深褐色過濾 -->
<div class="img-wrapper">
  <img class="sepia-img" src="https://img-blog.csdnimg.cn/2020032122230564.png" />
</div>
複製代碼

/* ============== * 灰度過濾 * ==============*/
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* ============== * 深褐色過濾 * ==============*/
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}
複製代碼

🌟知識總結

transform --- 用於改變元素

scale --- 對元素進行放大和縮小

filter --- 圖片過濾器

grayscale --- 灰度過濾

sepia --- 深褐色過濾

預覽實際效果 ｜ GitHub源碼 ｜喜歡的童鞋 🌟star 一下謝謝

3. 瞬間黑暗模式

最近微信也逃脫不了黑暗時代的到來，網頁也不少都作了黑暗模式的兼容和主題。若是咱們在作的一個網站想瞬間實現黑暗模式能夠怎麼實現呢？

其實有一個很快的方式，咱們可使用invert和hue-rotate兩個CSS3過濾器來實現。

filter: invert() — 是從0到1的刻度，1是從白變黑。 filter: hue-rotate() — 用於改變你元素的顏色，同時或多或少保持本來相同的色系。這個屬性的值能夠從0deg到360deg。

在咱們頁面的body標籤上添加這兩個屬性，咱們就能夠快速嘗試把咱們的網站變成"黑暗模式"。這裏須要注意的是，若是body和html上沒有設置background背景顏色，這個過濾就會不起效了哦。

CSS的代碼以下：

html {
  background: #fff;
}

body {
  background: #fff;
  filter: invert(1) hue-rotate(270deg);
}
複製代碼

實現效果

這裏咱們會發現圖片的顏色會受影響，並非很美觀，使用css過濾器是沒法完美切換黑暗模式的。不過使用JavaScript輔助就能夠完美的切換黑暗模式。

最近出了一個JavaScript輔助插件叫Darkmode.js。

🌓 Darkmode.js

其實Darkmode.js運用的也是css裏面的一個特性叫mix-blend-mode — 「CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合「。加上Javascript的輔助判斷哪些頁面上的元素須要黑化的，哪些是不須要黑化的。就會想咱們以前那種作法，致使其餘不須要黑化的元素，好比圖片，受到影響致使顏色出現問題。

使用Darkmode.js很是簡單，只要在腳本里面添加如下代碼就能夠立刻加入一個插件，

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script> // 這些是這個插件的可配置項： var options = { bottom: "32px", // 定位底部距離 - 默認: '32px' right: "32px", // 定位右邊距離 - 默認: '32px' left: "unset", // 定位左邊距離 - 默認: 'unset' time: "0.5s", // 默認動畫時間: '0.3s' mixColor: "#fff", // 須要改變的顏色 - 默認: '#fff' backgroundColor: "#fff", // 背景顏色 - 默認: '#fff' buttonColorDark: "#262728", // 黑暗模式下按鈕顏色 - 默認: '#100f2c' buttonColorLight: "#fff", // 日間模式下按鈕顏色 - 默認: '#fff' saveInCookies: true, // 是否在cookie保存當前模式 - 默認: true, label: "🌓", // 切換模式按鈕圖標 - 默認: '' autoMatchOsTheme: true // 是否自動根據系統適應模式 - 默認: true }; let darkmode = new Darkmode(options); darkmode.showWidget(); </script>
複製代碼

若是你不但願用這個插件的默認按鈕，你能夠在你的JavaScript代碼中自主控制。咱們能夠經過.toggle()方法來切換模式，同時可使用.isActivated()來檢測是否已經進入黑暗模式。

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // 若是已經進入黑暗模式會返回 true
複製代碼

🌟知識總結

filter: invert() — 能夠把頁面從白變黑，也能夠從黑變白。

filter: hue-rotate() — 用於改變你元素的顏色，同時或多或少保持本來相同的色系。

Darkmode.js — 瞬間實現黑暗模式。

Invert方式黑暗模式：預覽實際效果｜ GitHub源碼｜喜歡的童鞋 🌟star 一下謝謝 Darkmode.js黑暗模式：預覽實際效果｜ GitHub源碼｜喜歡的童鞋 🌟star 一下謝謝

4. 自定義列表符號

ul， li的無序列表有默認的符號 ·，可是在不少狀況下咱們但願能夠給這個符號加入本身的樣式和顏色，甚至是換成自定義的符號。默認的符號咱們是沒法作任何的樣式處理，並且默認的符號在CSS屬性裏面只有幾個選擇可使用，不少狀況下都是沒法知足咱們的設計。

其實自定義無序列表符號不難，咱們只須要使用僞元素::before加content屬性就能夠實現。

在我這個例子裏面我作了兩個任務列表，一個是待處理任務，一個是已完成任務，各自給了不同的列表符號和顏色。

實現原理

1、首先咱們禁用了ul的默認符號樣式list-style: none

2、在li的:before僞元素上給予content內容值，待處理任務使用🗹，已完成任務li.completed:before使用✔

3、爲了展現效果更加好看我分別給了li和li .completed兩個不一樣的顏色

上代碼看看是怎麼實現的吧：

HTML

<div>
  <h2>待處理</h2>
  <ul>
    <li>待辦任務1</li>
    <li>待辦任務2</li>
    <li>待辦任務3</li>
    <li>待辦任務4</li>
    <li>待辦任務5</li>
  </ul>
</div>
<div>
  <h2>已完成</h2>
  <ul>
    <li class="completed">完成任務1</li>
    <li class="completed">完成任務2</li>
    <li class="completed">完成任務3</li>
  </ul>
</div>
複製代碼

CSS

ul {
  list-style: none;
  color: #fff;
  font-size: 20px;
  border: 3px solid #000;
  padding: 1rem 2rem;
  min-height: 200px;
  margin: 15px 2rem 0 0;
  background: #323232;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  border-radius: 8px;
}

li {
  padding: 0.3rem 0;
}

li::before {
  content: "🗹 ";
  color: aqua;
}

li.completed::before {
  content: "✔ ";
  text-decoration: none;
  color: greenyellow;
}

li.completed {
  text-decoration: line-through;
  color: #bdbdbd;
}
複製代碼

::before和::after僞元素加content屬性能夠用來作不少特殊的效果，也是當代前端排版比較經常使用的「魔法」。說到僞元素的使用，我再給你們說一個比較經常使用的使用場景。

在管理後臺或者是文章展現中，咱們常常能夠見到的「麪包屑導航」也是用僞元素來插入每一個目錄中間的符號的。

實現邏輯

1、這個導航含有3個a標籤，首先給每一個a標籤加入一個僞元素::after，而後在content屬性插入/符號。

2、而後使用a:first-child，這個僞類會選擇到第一個a標籤，而後使用content屬性加入»符號。

3、由於咱們第一步在每一個a標籤的後面插入了/符號, 因此咱們須要在最後一個a標籤清除掉。這裏咱們使用:last-child選擇到最後一個a標籤，而後用content: " "屬性把僞類的內容清楚掉。

HTML

<div class="breadcrumb">
  <a>三鑽</a>
  <a>前端</a>
  <a>教程</a>
</div>
複製代碼

CSS

.breadcrumb {
  font-size: 1.6rem;
  color: #fff;
}
.breadcrumb a:first-child {
  color: #82fcfd;
}
.breadcrumb a:first-child::before {
  content: " » ";
}
.breadcrumb a::after {
  content: " /";
  color: #ef6eae;
}
.breadcrumb a:last-child::after {
  content: "";
}
複製代碼

🌟知識總結

::before | ::after — 僞元素用於向某些選擇器添加特殊的效果。

content — CSS 屬性用於在元素的 ::before 和 ::after 僞元素中插入內容。使用content 屬性插入的內容都是匿名的可替換元素。

:first-child — CSS僞類表示在一組兄弟元素中的第一個元素。

:last-child — CSS僞類表明父元素的最後一個子元素。

自定義無序列表：預覽實際效果 ｜ GitHub源碼 ｜喜歡的童鞋 🌟star 一下謝謝 麪包屑導航：預覽實際效果 ｜ GitHub源碼 ｜喜歡的童鞋 🌟star 一下謝謝

5. 圖片視差效果

這個超級炫酷的效果在官網中很是的受歡迎，這種效果能夠給用戶帶來視覺衝擊，也給咱們的網站帶來了活力。普通的網頁圖片會跟隨着網頁一塊兒滑動，可是視覺差效果圖就會固定在底部，只有圖片所在的窗口上的元素會移動。

僅使用CSS

對你沒有看錯，這個效果只須要用到CSS就能輕易的實現！咱們只要使用一個CSS背景圖的屬性background-attachment: fixed，這個特性會把背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。

實現理論：

1、在含有圖片的元素中加入background: url()和background-size: cover（第二個屬性適用於定義圖片爲封面，可讓圖片大小自動適應，在很大的屏幕也會顯示完整的圖片）

2、而後附加固定背景圖的屬性background-attachment: fixed

3、最後給這個元素加入一個高度height: 100%或者任意的高度height: 400px

就那麼簡單哦！不用懷疑，立刻上代碼，你們均可以本身去試試哦！

HTML

<div class="wrapper">
   <div class="parallax-img"></img>
   <p>這裏填寫一堆文字就能夠了，儘可能多一點哦</p>
</div>
複製代碼

CSS

.wrapper {
  height: 100wh;
}
.parallax-img {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {
  font-size: 20px;
  padding: 1.5rem 3rem;
  min-height: 1000px; // 當你的文字內容不夠，也能撐出足夠的高度來看到效果，固然若是你文字足夠多，就不須要了
}
複製代碼

若是想作到我動圖裏面同樣的效果，或者想看是怎麼實現的，能夠查看下面總結裏面的「預覽實際效果」或者看「GitHub源碼」。

🌟知識總結

background-attachment: fixed — 把背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。

background-size: cover — 可讓圖片大小自動適應，在很大的屏幕也會顯示完整的圖片。

預覽實際效果 ｜ GitHub源碼 ｜喜歡的童鞋 🌟star 一下謝謝

使用CSS + JavaScript

有些童鞋可能沒有被這個震撼到或者仍是以爲不夠刺激。那咱們再來一個高級例子，上面的例子在滑動的時候圖片是固定死的。若是咱們加上JavaScript的助力，咱們可讓窗口的圖片緩慢的跟隨這個頁面滑動，使得效果更有動力和更有衝擊感。

實現理論 首先講一下排版，由於咱們須要在咱們滑動頁面的時候使用JavaScript偏移圖片，因此咱們須要給圖片一個CSS屬性讓咱們可讓圖片能夠根據一個速度來往上或者往下移動。這個例子裏面咱們讓全部圖片包裹在一個div裏面，class名爲block。這個div給予相對定位屬性position: relative，這個時候咱們就能夠在裏面加入圖片，而後讓圖片絕對定位position: absolute在這個div盒子裏面。

可是圖片是可能很大的，咱們須要把圖片不超出咱們定義個盒子，因此咱們的div同時也給予了overflow: hidden和一個高度height: 100%。這樣圖片超出div盒子就會被隱藏。

佈局代碼以下：

<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax" />
  <h2>視差速度 -1</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax" />
  <h2>視差速度 1</h2>
</div>
複製代碼

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Amatic SC', cursive;
}
.block{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.block h2{
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10vw;
  color: white;
  font-weight: 400;
}
.img-parallax {
  width: 100vmax;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  pointer-events: none
}
複製代碼

實現這個佈局，在你滑動的時候，圖片是不會移動的。由於最後一步就是加入JavaScript的輔助，讓圖片活起來。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script> // 循環獲取每個圖片元素 $(".img-parallax").each(function () { var img = $(this); var imgParent = $(this).parent(); function parallaxImg() { var speed = img.data("speed"); // 獲取每張圖片設置了的偏移速度 var imgY = imgParent.offset().top; // 獲取圖片盒子所在的Y位置 var winY = $(this).scrollTop(); // 獲取當前滑動到的位置 var winH = $(this).height(); // 獲取瀏覽器窗口高度 var parentH = imgParent.innerHeight(); // 獲取圖片盒子的內高度 // 瀏覽器窗口底部的所在位置 var winBottom = winY + winH; // 當前圖片是否進入瀏覽器窗口 if (winBottom > imgY && winY < imgY + parentH) { // 運算圖片須要開始移動的位置 var imgBottom = (winBottom - imgY) * speed; // 運算出圖片須要中止移動的位置 var imgTop = winH + parentH; // 獲取從開始移動到結束移動的%（根據開始與結束像素 + 移動速度） var imgPercent = (imgBottom / imgTop) * 100 + (50 - speed * 50); } img.css({ top: imgPercent + "%", transform: "translate(-50%, -" + imgPercent + "%)", }); } $(document).on({ scroll: function () { parallaxImg(); }, ready: function () { parallaxImg(); }, }); }); </script>
複製代碼

🌟知識總結

position: relative — 相對定位。

position: absolute — 絕對定位。

overflow: hidden — 若是須要，內容將被剪裁以適合填充框。不提供滾動條。

預覽實際效果 ｜ GitHub源碼 ｜喜歡的童鞋 🌟star 一下謝謝

6. 裁剪圖像的動畫

在有CSS3以前裁剪圖片實現也是很有難度的。如今咱們有了兩個很是方便簡單的CSS3屬性能夠實現裁剪，那就是 object-fit和 object-position, 這兩個屬性可讓咱們改變圖片的大小，可是不影響圖片的長寬比。

固然咱們可使用圖片處理工具或者使用JavaScript等插件來實現圖片裁剪功能。可是由於有了CSS3的屬性，咱們不僅能夠裁剪，咱們還能夠用裁剪的屬性來作圖片的動態效果。

爲了讓咱們的例子更加簡單，咱們這裏使用了<input type="checkbox">複選框元素，這樣咱們就可使用:checked的僞元素來觸發啓動效果。因此在例子裏面咱們徹底不須要JavaScript的協助。

實現原理：

1、首先給予圖片一個寬高height: 1080px，width: 1920px。

2、而後用CSS選擇器，鎖定當input被選中後img標籤的樣式變化。當被選中時，給圖片設定一個新的寬高，這裏咱們給寬高各自500像素：width: 500px，height: 500px。

3、而後咱們加上了過渡效果和時間讓圖片改變寬高時有動畫過渡效果：transition: width 2s, height 4s;。

4、最後加上object-fit: cover和object-position: left-top這兩個屬性來保持圖片的寬高比例，這樣就大功告成了！

咱們來看看完成的代碼：

勾選裁剪圖片 <input type="checkbox" />
<br />
<img src="https://img-blog.csdnimg.cn/2020032122230564.png" alt="Random" />
複製代碼

input {
  transform: scale(1.5); /* 只是用來放大複選框大小 */
  margin: 10px 5px;
  color: #fff;
}

img {
  width: 1920px;
  height: 1080px;
  transition: 0s;
}

/* css選擇器鎖定複選框被選中時的狀態 */
input:checked + br + img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  object-position: left-top;
  transition: width 2s, height 4s;
}
複製代碼

🌟知識總結

object-fit — CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度肯定的框。

object-position — 用來切換被替換元素的內容對象在元素框內的對齊方式。

transition — 過渡能夠爲一個元素在不一樣狀態之間切換的時候定義不一樣的過渡效果。

預覽實際效果 ｜ GitHub源碼 ｜喜歡的童鞋 🌟star 一下謝謝

7. 混合模式（Blend）

若是有使用過Photoshop的同窗對 blend混合模式應該是很是熟悉了，咱們都知道混合模式是很是強大，也是p圖時很是經常使用的一個功能。可是大家有沒有想象過能夠在瀏覽器的CSS中直接使用呢？對咱們不須要設計師給咱們作圖，咱們前端也能夠實現混合模式了。

在CSS中咱們不僅能夠對background背景加入混合模式，咱們能夠對任何一個元素的自帶背景加入混合模式，讓你能夠作出不少以前沒有想過的效果和排版。

往一個元素加入混合模式，咱們只須要使用到一個CSS屬性mix-blend-mode便可。

簡單實現原理：

首先咱們只須要加一個h1標題標籤

<h1>混合模式：顏色減淡</h1>
複製代碼

而後咱們給h1標籤加入mix-blend-mode中的顏色減弱模式color-dodge，可是要注意的是咱們須要給body和html加入背景顏色background: white，要不你會發現這個效果會無效。由於h1咱們沒有給顏色，會自動往上級繼承，而且混合模式是針對背景顏色的過濾，因此body和html須要有背景顏色才行。

h1 {
   mix-blend-mode: color-dodge;
   font-family: yahei;
   font-size: 5rem;
   text-align: center;
   margin: 0; 
   padding: 20vh 200px;
   color: #D1956C;
 }

 html,
 body {
   margin: 0;
   background-color: white;
 }

 body {

   background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
   overflow: hidden;
 }
複製代碼

換換背景圖和h1標籤的字體顏色就能夠弄出各類不一樣的特效了。

🌟知識總結

mix-blend-mode — CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。

預覽實際效果 ｜ GitHub源碼 ｜喜歡的童鞋 🌟star 一下謝謝

8. 瀑布流佈局

CSS Grid和Flexbox讓咱們能夠更簡便，更容易和更快的實現各式各樣的響應佈局，而且讓咱們快捷方便的在佈局中實現橫向劇中和豎向劇中。可是回想一下之前是頗爲困難的。

雖然這些新出的佈局方式可讓咱們解決不少之前的佈局難題，可是像瀑布流佈局這種，就沒法用它們簡單來實現了。由於瀑布流通常來講都是寬度一致，可是高度是根據圖片自適應的。而且圖片的位置也是根據在上方圖片的位置而定的。

其實最好實現瀑布流佈局的辦法就是用CSS的列屬性套件，這套屬性大多數都是用於排版雜誌中的文本列。可是用於佈局瀑布流也是特別實用哦。由於之前須要實現瀑布流，就必須有JavaScript的輔助來計算圖片高度而後決定每張圖片的定位和位置，因此如今有了列屬性就可使用純CSS實現了。

實現原理：

實現這個佈局，首選咱們須要把全部的內容先包裹在一個div元素裏面，而後給這個元素column-width和column-gap屬性。

而後，爲了防止任何元素被分割到兩個列之間，將column-break-inside: avoid添加到各個元素中。

神奇的效果就完美實現了，零JavaScript。

咱們來看看代碼：

<div class="columns">
  <figure>
    <img src="https://source.unsplash.com/random?city" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?night" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?developer" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?building" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?water" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?coding" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?stars" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?forest" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?girls" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?working" alt="" />
  </figure>
</div>
複製代碼

.columns {
  column-width: 320px;
  column-gap: 15px;
  width: 90%;
  max-width: 1100px;
  margin: 50px auto;
}
.columns figure {
  display: inline-block;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  column-break-inside: avoid;
  border-radius: 8px;
}
.columns figure img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 8px;
}
複製代碼

🌟知識總結

column-width — CSS屬性建議一個最佳列寬。列寬是在添加另外一列以前列將成爲最大寬度。

column-width — 該 CSS 屬性用來設置元素列之間的間隔 (gutter) 大小。

column-break-inside — 設置或檢索對象內部是否斷。

預覽實際效果 ｜ GitHub源碼 ｜喜歡的童鞋 🌟star 一下謝謝

總結

我但願這8個前端小技巧和特效對你們有幫助，或多或少有吸取一點新的前端知識。這篇文章提到的內容，其實不少都是值得深挖和學習的。有一些例子我作的比較簡單，可是實際上是有無限的可能性。喜歡前端的童鞋們，讓咱們繼續在前端領域中一塊兒深挖，讓咱們的熱愛無限的燃燒起來吧！

在最後我想給你們講一下我對前端的熱愛和態度。

回想前端這幾年，發展真的是日新月異，從前端排版，HTML5+CSS3作H5頁面，到前端組件化，各類UI框架滿天飛。

一開始我隨着熱潮用起了UI框架，起初以爲特別方便，來一個新的項目就直接上一個UI框架，研發速度也很是快。可是長此以往就以爲前端開發變成了處理數據，對接接口，實現交互。

某天在閱覽國外的一些前端設計和框架的時候，我忽然發現國內多數的前端開發者都再也不怎麼使用CSS3作出一些很好玩的佈局和特效了。如今市面上的系統和頁面都是千篇一概，廣泛都是用一些知名的UI框架搭建系統和APP，基本本身動手去排版已經少之又少。前端已再也不是之前的前端，缺乏了靈魂。

可是咱們回想一下，咱們剛剛開始學習前端的時候，讓咱們最有成就感，以爲前端特別有意思的那種感受。就是那種讓咱們以爲神乎奇蹟，難以想象的佈局，特效和交互。那種感受本身成功實現了很優美，很炫酷的頁面和特效的感受，讓咱們越作越來勁，越作越是興奮。

可是在某些公司，研發部都是要求快速開發，UI設計部門也是受到時間的控制和限制，因此逐步走進了UI框架的限制之中。都是圍繞這一些UI框架來設計和開發系統和應用。

做爲一名熱愛前端的開發者，我仍是堅持在絕大多數的項目中，本身排版和實現頁面交互特效。而後使用UI框架做爲輔助，主要是用來減輕一些小組件和經常使用組建的快速實現。（能夠說我是比較追求完美和外貌協會的程序員 😂）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。