比較好用的6個前端HTML+CSS特效

這篇文章將為大家詳細講解有關比較好用的6個前端HTML+CSS特效，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

css的基本語法是什么

css的基本語法是：1、css規則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

1.圖片慢慢靠近

當我們在看圖片時，可能覺得圖片有點小，那我們就給用戶一種體驗，當用戶把鼠標移入時，圖片慢慢變大。

知識點：

• CSS3之“過渡”：transition()----定義如何放大圖片和放大過程的時間

• CSS3之“2D轉換”：transform:scale()----放大圖片

• CSS3之“溢出”:overflow:hidden----當圖片放大時，溢出要隱藏

代碼：

<div class="imgDiv">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589451318456&di=6aa6f77e865a4b51ab43b265753ab260&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201506%2F27%2F20150627225153_AwJYF.thumb.700_0.jpeg">
</div>

.imgDiv{
    width:300px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    border:5px solid rgba(0,0,0,0.6);
    box-sizing: border-box;
}
.imgDiv img{
    width:300px;
}
.imgDiv img:hover{
    transform:scale(1.1) ;
    transition: 0.5s linear;
}

2.給放大的圖片加特效

知識點：

1. CSS之“filter”。
2. CSS灰色濾鏡：grayscale()
3. CSS深褐色濾鏡：sepia()

代碼：

.imgDiv{
    width:300px;
    overflow: hidden;
    border:5px solid rgba(0,0,0,0.6);
    box-sizing: border-box;
    display: flex;
    flex:auto;
    margin-top:100px;
    margin-left:100px;
}
.imgDiv img{
    width:300px;
    filter:grayscale(100%);<-新增->
}
.imgDiv img:hover{
    transform:scale(1.1) ;
    transition: 0.5s linear;
    filter:grayscale(0);<-新增->
}

效果圖：

3.軟件的白天與黑夜模式

知識點：

1、CSS之濾鏡：invert()—將圖片顏色反轉，當圖片顏色為白色時，invert(0)為白；invert(1)為黑；反之。

<div id="body">
    <div class="text"><h2 id="text">白天模式</h2></div>
<div class="imgDiv">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589524167527&di=c6cd44a0f1e364a7d37a08e8a61d52b6&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F80833e85c3cdc40a722f7d914761bee6e175abf3bcc6f-deDZNA_fw658">
</div>
<div class="container" id="container">
    <button (click)="translate()">切換</button>
</div>
</div>


isChange:boolean=true;
  translate(){
    var body=document.getElementById("body");
    var text=document.getElementById("text");
    var container=document.getElementById("container");
    if(this.isChange){
      body.setAttribute("style","filter:invert(100%)");
      text.innerHTML="白天模式";
      this.isChange=false;
    }else{
      body.setAttribute("style","filter:invert(0%)");
      text.innerHTML="黑夜模式";
      this.isChange=true;
    }
  }

效果圖：

注意：

• 這不是“正經”的白天與黑夜模式，因為在父元素設置了反轉濾鏡之后，其子元素的顏色也會被反轉。這樣會導致像圖片這類型的子元素失去本該有的樣子。

• 在運用反轉濾鏡，需先給元素設置背景顏色，否則不起作用。

• 反轉濾鏡不只是對黑白反轉，每種顏色有對應的反轉。

4.CSS過渡實現白天\黑暗模式

知識點：

1. CSS之過渡：transition
2. 在這里子元素也用到了上面的invert()，將字體換色，也可以直接用js將字體的color屬性轉換，但濾鏡效率更高

代碼：

<div id="body">
    <div id="translate"></div>
    <div class="text"><h2 id="text">白天模式</h2></div>
<div class="imgDiv">
    <img src="http://img5.imgtn.bdimg.com/it/u=2473598420,2292311239&fm=26&gp=0.jpg">
</div>
<div class="container" id="container">
    <button (click)="translate()">切換</button>
</div>
</div>

<-只展示id=translate的css->
#translate{
    position: absolute;
    width:0px;
    height:0px;
    transition:width 2s,height 2s;
    background-color:black;
}

export class HoverToLargeImageComponent implements OnInit {
  isChange:boolean=true;
  translate(){
    var text=document.getElementById("text");
    var translate=document.getElementById("translate");
    if(this.isChange){
      translate.setAttribute("style","width:990px;height:690px;");
      text.innerHTML="黑夜模式";
      text.setAttribute("style","filter:invert(100%)")
      this.isChange=false;
    }else{
      translate.setAttribute("style","width:0px;height:0px");
      text.innerHTML="白天模式";
      text.setAttribute("style","filter:invert(0)")
      this.isChange=true;
    }
  }
}

效果圖：

注意：

• 這個白天/黑夜模式是不會影響其它元素背景色，因此字體顏色如果為白色或黑色的就需要隨著切換模式來字體顏色，否則字體看不見。

• 有興趣的可以將

  小容器移動到大容器任意部位，例如移到中間，設置使得效果向兩邊延伸或以圓的方式呈現。

5. 混合模式

知識點：

CSS之混合模式：mix-blend-mode

該屬性有16個值：

• normal 正常

• multiply 正片疊底

• screen 濾色

• overlay 疊加

• darken 變暗

• lighten 變亮

• color-dodge 顏色減淡

• color-burn 顏色加深

• hard-light 強光

• soft-light 柔光

• difference 差值

• exclusion 排除

• hue 色相

• saturation 飽和度

• color 顏色

• luminosity 亮度

代碼：

<div class="container">
    <h2>混合模式學習</h2>
</div>
<div class="first background"><div class="middle"></div></div>
<div class="second background"><div class="middle"></div></div>
<div class="third background"><div class="middle"></div></div>
<div class="fourth background"><div class="middle"></div></div>

.first{
    background-image: url(https://source.unsplash.com/1920x1080?city);
}
.second{
    background-image: url(https://source.unsplash.com/1920x1080?landscape);
}
.third{
    background-image: url(https://source.unsplash.com/1920x1080?portrait);
}
.fourth{
    background-image: url(https://source.unsplash.com/1920x1080?stars);
}
.container,.middle:before{
    height: 200px;
    width:300px;
    position: fixed;
    box-sizing: content-box;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
    line-height: 200px;
    mix-blend-mode: lighten;
}
.container{
    background-color:cornsilk;
    z-index: 10;
}
.background{
    height:750px;
    width:1500px;
    position: relative;
    margin:0px auto;
    background-size: cover;
    background-repeat: no-repeat;
    
}
.middle:before{
    content:"  ";
    padding:50px;
}


.middle{
    position: absolute;
    width:500px;
    height:100%;
    margin-left: 500px;
    clip:rect(auto,auto,auto,auto);
}
.first .middle:before{
    background-color: red;
    mix-blend-mode: lighten;
}
.second .middle:before{
    background-color:gold;
    mix-blend-mode: difference;
}
.third .middle:before{
    background-color: aqua;
    mix-blend-mode: color-dodge;
}
.fourth .middle:before{
    background-color: brown;
    mix-blend-mode: soft-light;
}

效果：

注意：

• z-index屬性：z-index屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總會處于堆疊順序較低的元素的前面。

  所在的HTML位置，本該被后面的元素覆蓋而無法顯示出來，但使用了z-index之后就可以解決元素覆蓋問題。

• isolation屬性：隔離，主要與mix-blend-mode屬性一起使用，將混合模式只應用于某一個元素或某一組元素。可取值：auto|isolate(創建新的堆疊上下文)。使用了isolate之后，該元素就不會再與父元素混合，而是與它的子元素混合。

• 這里用了四張圖片，四種不同的混合屬性值和背景色，感受混合模式的炫。

6. 視覺效果差，超炫酷

知識點：

CSS之背景固定：background-attachment

上代碼：

<div class="container">
    <div class="parallax-img">
        <div class="title">
            <h2>因為愛，所以愛</h2>
        </div>
    </div>
   <div class="myLove">
       <div><img src="http://f.hiphotos.baidu.com/zhidao/pic/item/a50f4bfbfbedab642e3fbc9af436afc379311e1e.jpg"></div>
       <div class="article">
           <article>與你一見如故，是我今生最美麗的相遇。
        與你一諾相許，是我素色年華里最永恒的風景。
        一直想說，無論走到哪里，最想去的是你的身邊。
        愿我們彼此相愛，一直到時間的盡頭。
        我相信我們可以一起，等青絲變白發。
        你在，我在，就是海枯石爛。
        沒有過多的華麗，只有一句我喜歡你，卻能讓彼此牽掛于心。
        親愛的，你知道嗎，哪怕遍體鱗傷，我仍有愛你的余力。
        有的人你只看了一眼，卻影響其一生。
        生活就像是包餃子，不管你是什么餡，我都會緊緊的把你包在我心里，任生活的沸水怎樣煮，都磨不掉		      我對你的愛！
        好久沒有見你了，心中十分掛念，可是又不敢去看你，因為害怕打擾你，你會不開心，所以我盡力的控制自己思念的心。
 
不知道這些日子，你是不是跟我一樣，牽掛你，想念你；我是真的特別想你，想看看你的笑，想看看你純真的臉；想著你，我就特別來勁，晚上都無法睡好！
            </article>
        </div>
   </div>
   <div class="parallax-img1">
       <div>
           <h2>我愛你，無畏人海的擁擠</h2>
       </div>
   </div>
   <div class="parallax-img2">
    <div>
        <h2>你小心一吻便顛倒眾生  一吻便救一個人</h2>
    </div>
   </div>
 </div>
 
 
.container {
    height: 100vh;
}
.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");
}
.title{
    position: relative;
    width:300px;
    height: 150px;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-color: gray;
    line-height: 150px;
    text-align: center;
    color:tan;
} 
.myLove{
    display: flex;
    height:400px;
    width:100%;
    background-color: gray;
}
.myLove div{
    width:30%;
    height: 80%;
    margin-left: 100px;
    margin-top:50px;
}
.myLove div img{
    width:100%;
    height:100%;
}
.myLove .article{
    margin-left: 250px;
}
.parallax-img1 {
    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/5/thumb.jpg");
}

.parallax-img2{
    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/181/10/thumb.jpg");
}
.parallax-img1 div,.parallax-img2 div {
    position: relative;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-color: gray;
    width:40%;
    height:50px;
    text-align: center;
    color: tan;
}

效果圖：

注意：

• 如果能錄全屏則效果更佳，但由于圖片上傳大小限制，只能錄制中間部分和快速拉過。如果喜歡，可以自己試試，代碼已全部粘貼出來。

• 其實就是一個CSS屬性的知識，就看你如何配置圖片、色效使效果更炫酷。

• 圖片能決定視圖效果，因此，上面三張圖片來源于原博客。

關于“比較好用的6個前端HTML+CSS特效”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。