首頁 >web前端 >html教學 >值得一學的6個前端HTML+CSS特效

值得一學的6個前端HTML+CSS特效

青灯夜游
青灯夜游轉載
2021-04-26 11:08:152665瀏覽

這篇文章跟大家分享6個值得一學的前端HTML CSS特效。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

值得一學的6個前端HTML+CSS特效

前言:學習不能止步於收藏,必須自己來一遍,加入自己的思考。

1.圖片慢慢靠近

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

效果圖:

值得一學的6個前端HTML+CSS特效

值得一學的6個前端HTML+CSS特效

#知識點:

  • 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" alt="值得一學的6個前端HTML+CSS特效" >
</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);<-新增->
}

#效果圖:
值得一學的6個前端HTML+CSS特效

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

知識點:

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

<div>
    <div><h1>白天模式</h1></div>
<div>
    <img  alt="值得一學的6個前端HTML+CSS特效" >
</div>
<div>
    <button>切换</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;
    }
  }

效果圖:

值得一學的6個前端HTML+CSS特效

#注意:

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

  • 在運用反轉濾鏡,需先為元素設定背景顏色,否則無法運作。

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

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

#知識點:

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

程式碼:

<div id="body">
    <div id="translate"></div>
    <div class="text"><h1 id="text">白天模式</h1></div>
<div class="imgDiv">
    <img  src="http://img5.imgtn.bdimg.com/it/u=2473598420,2292311239&fm=26&gp=0.jpg" alt="值得一學的6個前端HTML+CSS特效" >
</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;
    }
  }
}

效果圖:

值得一學的6個前端HTML+CSS特效

注意:

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

  • 有興趣的可以將

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

5. 混合模式

# 知識點:

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

此屬性有16個值:

  • #normal 正常

  • multiply 正片疊底

  • screen 過濾顏色

  • overlay 疊加

  • ##darken 變暗

  • lighten 變亮

  • color-dodge 顏色減淡

  • color-burn 顏色加深

##hard-light 強光

值得一學的6個前端HTML+CSS特效

soft-light 柔光


difference 差值

  • exclusion 排除

    ###hue 色相#############saturation 飽和度############color 顏色#### ########luminosity 亮度###############程式碼:######
    <div class="container">
        <h1>混合模式学习</h1>
    </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>
    <div>
        <div>
            <h1>因为爱,所以爱</h1>
        </div>
    </div>
   <div>
       <div><img  alt="值得一學的6個前端HTML+CSS特效" ></div>
       <div>
           <article>与你一见如故,是我今生最美丽的相遇。
        与你一诺相许,是我素色年华里最永恒的风景。
        一直想说,无论走到哪里,最想去的是你的身边。
        愿我们彼此相爱,一直到时间的尽头。
        我相信我们可以一起,等青丝变白发。
        你在,我在,就是海枯石烂。
        没有过多的华丽,只有一句我喜欢你,却能让彼此牵挂于心。
        亲爱的,你知道吗,哪怕遍体鳞伤,我仍有爱你的余力。
        有的人你只看了一眼,却影响其一生。
        生活就像是包饺子,不管你是什么馅,我都会紧紧的把你包在我心里,任生活的沸水怎样煮,都磨不掉		      我对你的爱!
        好久没有见你了,心中十分挂念,可是又不敢去看你,因为害怕打扰你,你会不开心,所以我尽力的控制自己思念的心。
 
不知道这些日子,你是不是跟我一样,牵挂你,想念你;我是真的特别想你,想看看你的笑,想看看你纯真的脸;想着你,我就特别来劲,晚上都无法睡好!
            </article>
        </div>
   </div>
   <div>
       <div>
           <h1>我爱你,无畏人海的拥挤</h1>
       </div>
   </div>
   <div>
    <div>
        <h1>你小心一吻便颠倒众生  一吻便救一个人</h1>
    </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;
}

效果图:

值得一學的6個前端HTML+CSS特效

注意:

  • 如果能录全屏则效果更佳,但由于图片上传大小限制,只能录制中间部分和快速拉过。如果喜欢,可以自己试试,代码已全部粘贴出来。

  • 其实就是一个CSS属性的知识,就看你如何配置图片、色效使效果更炫酷。

  • 图片能决定视图效果,因此,上面三张图片来源于原博客。

更多编程相关知识,请访问:编程视频!!

以上是值得一學的6個前端HTML+CSS特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除