接上篇：前端必看的8個HTML+CSS技巧（下）

原文：https://blog.csdn.net/TriDiamond6/article/details/105222289

5. 圖片視差效果

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

僅使用CSS

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

實現理論：

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

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

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

就那麼簡單哦！不用懷疑，馬上上代碼，大家都可以自己去試試哦！

HTML

<code>
這裡填寫一堆文字就可以了，儘量多一點哦
CSS
<code>.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; 
  // 當你的文字內容不夠，也能撐出足夠的高度來看到效果，當然如果你文字足夠多，就不需要了
}/<code>
知識總結
background-attachment: fixed — 把背景相對於視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內容滾動。
background-size: cover — 可以讓圖片大小自動適應，在很大的屏幕也會顯示完整的圖片。
使用CSS + JavaScript
 
有些童鞋可能沒有被這個震撼到或者還是覺得不夠刺激。那我們再來一個高級例子，上面的例子在滑動的時候圖片是固定死的。如果我們加上JavaScript的助力，我們可以讓窗口的圖片緩慢的跟隨這個頁面滑動，使得效果更有動力和更有衝擊感。
實現理論
首先講一下排版，因為我們需要在我們滑動頁面的時候使用JavaScript偏移圖片，所以我們需要給圖片一個CSS屬性讓我們可以讓圖片可以根據一個速度來往上或者往下移動。這個例子裡面我們讓所有圖片包裹在一個div裡面，class名為block。這個div給予相對定位屬性position: relative，這個時候我們就可以在裡面加入圖片，然後讓圖片絕對定位position: absolute在這個div盒子裡面。
但是圖片是可能很大的，我們需要把圖片不超出我們定義個盒子，所以我們的div同時也給予了overflow: hidden和一個高度height: 100%。這樣圖片超出div盒子就會被隱藏。

佈局代碼如下：
<code>  
     
視差速度 -1
  
  
視差速度 1
/<code>
<code>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
}/<code>
實現這個佈局，在你滑動的時候，圖片是不會移動的。因為最後一步就是加入JavaScript的輔助，讓圖片活起來。
<code>/<code>
知識總結
position: relative — 相對定位。
position: absolute — 絕對定位。
 
overflow: hidden — 如果需要，內容將被剪裁以適合填充框。不提供滾動條。
6. 裁剪圖像的動畫
 
在有CSS3之前裁剪圖片實現也是頗有難度的。現在我們有了兩個非常方便簡單的CSS3屬性可以實現裁剪，那就是object-fit和object-position, 這兩個屬性可以讓我們改變圖片的大小，但是不影響圖片的長寬比。
當然我們可以使用圖片處理工具或者使用JavaScript等插件來實現圖片裁剪功能。但是因為有了CSS3的屬性，我們不只可以裁剪，我們還可以用裁剪的屬性來做圖片的動態效果。
為了讓我們的例子更加簡單，我們這裡使用了複選框元素，這樣我們就可以使用:checked的偽類來觸發啟動效果。所以在例子裡面我們完全不需要JavaScript的協助。
實現原理：
一、首先給予圖片一個寬高height: 1080px，width: 1920px。
二、然後用CSS選擇器，鎖定當input被選中後img標籤的樣式變化。當被選中時，給圖片設定一個新的寬高，這裡我們給寬高各自500像素：width: 500px，height: 500px。
三、然後我們加上了過渡效果和時間讓圖片改變寬高時有動畫過渡效果：transition: width 2s, height 4s;。
四、最後加上object-fit: cover和object-position: left-top這兩個屬性來保持圖片的寬高比例，這樣就大功告成了！ 
我們來看看完成的代碼：
<code>勾選裁剪圖片 
  
    

    /<code>
<code>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;
}/<code>
知識總結
object-fit — CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。
object-position — 用來切換被替換元素的內容對象在元素框內的對齊方式。
 
transition — 過渡可以為一個元素在不同狀態之間切換的時候定義不同的過渡效果。
7. 混合模式（Blend）
 
如果有使用過Photoshop的同學對blend混合模式應該是非常熟悉了，我們都知道混合模式是非常強大，也是p圖時非常常用的一個功能。但是你們有沒有想象過可以在瀏覽器的CSS中直接使用呢？對我們不需要設計師給我們做圖，我們前端也可以實現混合模式了。
在CSS中我們不只可以對background背景加入混合模式，我們可以對任何一個元素的自帶背景加入混合模式，讓你可以做出很多之前沒有想過的效果和排版。
往一個元素加入混合模式，我們只需要使用到一個CSS屬性mix-blend-mode即可。
簡單實現原理：
首先我們只需要加一個h1標題標籤
<code>
混合模式：顏色減淡
/<code>
然後我們給h1標籤加入mix-blend-mode中的顏色減弱模式color-dodge，但是要注意的是我們需要給body和html加入背景顏色background: white，要不你會發現這個效果會無效。因為h1我們沒有給顏色，會自動往上級繼承，並且混合模式是針對背景顏色的過濾，所以body和html需要有背景顏色才行。 
<code>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; 
}/<code>
換換背景圖和h1標籤的字體顏色就可以弄出各種不同的特效了。
知識總結
mix-blend-mode — CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。
 
8. 瀑布流佈局
CSS Grid和Flexbox讓我們可以更簡便，更容易和更快的實現各式各樣的響應佈局，並且讓我們快捷方便的在佈局中實現橫向劇中和豎向劇中。但是回想一下以前是頗為困難的。
雖然這些新出的佈局方式可以讓我們解決很多以前的佈局難題，但是像瀑布流佈局這種，就無法用它們簡單來實現了。因為瀑布流一般來說都是寬度一致，但是高度是根據圖片自適應的。並且圖片的位置也是根據在上方圖片的位置而定的。 
其實最好實現瀑布流佈局的辦法就是用CSS的列屬性套件，這套屬性大多數都是用於排版雜誌中的文本列。但是用於佈局瀑布流也是特別實用哦。因為以前需要實現瀑布流，就必須有JavaScript的輔助來計算圖片高度然後決定每張圖片的定位和位置，所以現在有了列屬性就可以使用純CSS實現了。
實現原理：
實現這個佈局，首選我們需要把所有的內容先包裹在一個div元素裡面，然後給這個元素column-width和column-gap屬性。
然後，為了防止任何元素被分割到兩個列之間，將column-break-inside: avoid添加到各個元素中。
神奇的效果就完美實現了，零JavaScript。
我們來看看代碼：
<code>    
  	  
      
	    
     
  
    
      
      
    
      
     
  
    
      
      
    
      
     
  
    
      
      
    
      
     
  
    
      
      
    
      
     
  
  
/<code>
<code>.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;
}/<code>
知識總結
column-width — CSS屬性建議一個最佳列寬。列寬是在添加另一列之前列將成為最大寬度。
column-width — 該 CSS 屬性用來設置元素列之間的間隔 (gutter) 大小。
column-break-inside — 設置或檢索對象內部是否斷。
 
總結
我希望這8個前端小技巧和特效對大家有幫助，或多或少有吸收一點新的前端知識。這篇文章提到的內容，其實很多都是值得深挖和學習的。有一些例子我做的比較簡單，但是其實是有無限的可能性。喜歡前端的童鞋們，讓我們繼續在前端領域中一起深挖，讓我們的熱愛無限的燃燒起來吧！
在最後我想給大家講一下我對前端的熱愛和態度。
回想前端這幾年，發展真的是突飛猛進，從前端排版，HTML5+CSS3做H5頁面，到前端組件化，各種UI框架滿天飛。
一開始我隨著熱潮用起了UI框架，起初覺得特別方便，來一個新的項目就直接上一個UI框架，研發速度也非常快。但是久而久之就覺得前端開發變成了處理數據，對接接口，實現交互。
某天在閱覽國外的一些前端設計和框架的時候，我突然發現國內多數的前端開發者都不再怎麼使用CSS3做出一些很好玩的佈局和特效了。現在市面上的系統和頁面都是千篇一律，普遍都是用一些知名的UI框架搭建系統和APP，基本自己動手去排版已經少之又少。前端已不再是以前的前端，缺少了靈魂。 
但是我們回想一下，我們剛剛開始學習前端的時候，讓我們最有成就感，覺得前端特別有意思的那種感覺。就是那種讓我們覺得神乎奇蹟，不可思議的佈局，特效和交互。那種感覺自己成功實現了很優美，很炫酷的頁面和特效的感覺，讓我們越做越來勁，越做越是興奮。
但是在某些公司，研發部都是要求快速開發，UI設計部門也是受到時間的控制和限制，所以逐步走進了UI框架的限制之中。都是圍繞這一些UI框架來設計和開發系統和應用。
作為一名熱愛前端的開發者，我還是堅持在絕大多數的項目中，自己排版和實現頁面交互特效。然後使用UI框架作為輔助，主要是用來減輕一些小組件和常用組建的快速實現。（可以說我是比較追求完美和外貌協會的程序員 ）
————————————————
版權聲明：本文為CSDN博主「三鑽」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/TriDiamond6/article/details/105222289
 
收藏
舉報
IT實戰聯盟/<code>