比较好用的6个前端HTML+CSS特效

这篇文章将为大家详细讲解有关比较好用的6个前端HTML+CSS特效,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了江源免费建站欢迎大家使用!

css的基本语法是什么

css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变样式的HTML元素;3、每条声明由一个属性和一个值组成;4、属性和属性值被冒号分隔开。

1.图片慢慢靠近

当我们在看图片时,可能觉得图片有点小,那我们就给用户一种体验,当用户把鼠标移入时,图片慢慢变大。

知识点:

  • CSS3之“过渡”:transition()----定义如何放大图片和放大过程的时间

  • CSS3之“2D转换”:transform:scale()----放大图片

  • CSS3之“溢出”:overflow:hidden----当图片放大时,溢出要隐藏

代码:


    
.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)为黑;反之。


    白天模式
    
    切换
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属性转换,但滤镜效率更高

代码:


    
    白天模式

    


    切换



<-只展示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个值:

代码:


    

混合模式学习

.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; }

效果:

比较好用的6个前端HTML+CSS特效

注意:

6. 视觉效果差,超炫酷

知识点:

CSS之背景固定:background-attachment

上代码:


    
        
            

因为爱,所以爱

                         
                   
与你一见如故,是我今生最美丽的相遇。         与你一诺相许,是我素色年华里最永恒的风景。         一直想说,无论走到哪里,最想去的是你的身边。         愿我们彼此相爱,一直到时间的尽头。         我相信我们可以一起,等青丝变白发。         你在,我在,就是海枯石烂。         没有过多的华丽,只有一句我喜欢你,却能让彼此牵挂于心。         亲爱的,你知道吗,哪怕遍体鳞伤,我仍有爱你的余力。         有的人你只看了一眼,却影响其一生。         生活就像是包饺子,不管你是什么馅,我都会紧紧的把你包在我心里,任生活的沸水怎样煮,都磨不掉       我对你的爱!         好久没有见你了,心中十分挂念,可是又不敢去看你,因为害怕打扰你,你会不开心,所以我尽力的控制自己思念的心。   不知道这些日子,你是不是跟我一样,牵挂你,想念你;我是真的特别想你,想看看你的笑,想看看你纯真的脸;想着你,我就特别来劲,晚上都无法睡好!             
                        
           

我爱你,无畏人海的拥挤

       
            
        

你小心一吻便颠倒众生  一吻便救一个人

    
          .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特效

注意:

关于“比较好用的6个前端HTML+CSS特效”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网页标题:比较好用的6个前端HTML+CSS特效
转载源于:http://myzitong.com/article/piojhs.html

其他资讯