배울 가치가 있는 6가지 프런트엔드 HTML+CSS 효과

이 기사에서는 학습할 가치가 있는 6가지 프런트엔드 HTML+CSS 효과를 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

머리말: 배움은 모으는 것에서 멈출 수 없습니다. 스스로 해보고 자신의 생각을 추가해야 합니다.

1. 사진이 점점 가까워집니다

사진을 보면 사진이 좀 작다는 느낌이 들 수 있으므로 사용자가 마우스를 움직일 때, 그림이 점차 커질 것입니다.

렌더링:

지식 포인트:

• CSS3 "Transition": Transition()----이미지 확대 방법과 확대 프로세스 시간 정의

• CSS3의 "2D 변환": 변환:scale()----그림 확대

• CSS3의 "오버플로":overflow:hidden----그림이 확대되면 오버플로가 숨겨져야 합니다

코드:

<div class="imgDiv">
    <img  src="/static/imghw/default1.png"  data-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"  class="lazy"   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 "필터".
2. CSS 회색 필터: greyscale()
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(1)은 검정색입니다.

<div id="body">
    <div class="text"><h1 id="白天模式">白天模式</h1></div>
<div class="imgDiv">
    <img  src="/static/imghw/default1.png"  data-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"  class="lazy"   alt="배울 가치가 있는 6가지 프런트엔드 HTML+CSS 효과" >
</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. Day-to-Dark 모드를 구현하기 위한 CSS 전환

지식 포인트:

1. CSS 전환: 전환
2. 위의 invert()는 여기에서 하위 요소에도 사용됩니다. 글꼴 색상을 변경하려면 js를 직접 사용하여 글꼴의 색상 속성을 변환할 수도 있지만 필터가 더 효율적입니다.

Code:

<div id="body">
    <div id="translate"></div>
    <div class="text"><h1 id="白天模式">白天模式</h1></div>
<div class="imgDiv">
    <img  src="/static/imghw/default1.png"  data-src="http://img5.imgtn.bdimg.com/it/u=2473598420,2292311239&fm=26&gp=0.jpg"  class="lazy"   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;
    }
  }
}

Rendering:

참고:

• 이 낮/밤 모드는 다른 요소의 배경색에 영향을 미치지 않으므로 글꼴 색상이 흰색 또는 검은색인 경우 모드 전환 시 글꼴 색상을 변경해야 합니다. 그렇지 않으면 글꼴이 표시되지 않습니다.

• 관심 있으신 분들은

  작은 용기를 큰 용기의 어느 부분으로든 이동(예를 들어 중앙)하여 효과가 양쪽으로 퍼지거나 원형으로 나타나도록 설정하시면 됩니다.

5. 혼합 모드

지식 포인트:

CSS 혼합 모드: mix-blend-mode

이 속성에는 16개의 값이 있습니다:

• normal

• 곱하기 장편 영화 오버레이

• 화면 필터

• 오버레이 오버레이

• 어둡게 어둡게

• 밝게 밝게

• color-dodge color dodge

• color-burn color deepen

• 하드라이트 강함 빛

• 소프트 라이트 소프트 라이트

• 차이 차이

• 제외 제외

• 색상

• 채도 채도

• 색상

• 광도

코드:

<div class="container">
    <h1 id="混合模式学习">混合模式学习</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 class="container">
    <div class="parallax-img">
        <div class="title">
            <h1 id="因为爱-所以爱">因为爱，所以爱</h1>
        </div>
    </div>
   <div class="myLove">
       <div><img  src="/static/imghw/default1.png"  data-src="http://f.hiphotos.baidu.com/zhidao/pic/item/a50f4bfbfbedab642e3fbc9af436afc379311e1e.jpg"  class="lazy"   alt="배울 가치가 있는 6가지 프런트엔드 HTML+CSS 효과" ></div>
       <div class="article">
           <article>与你一见如故，是我今生最美丽的相遇。
        与你一诺相许，是我素色年华里最永恒的风景。
        一直想说，无论走到哪里，最想去的是你的身边。
        愿我们彼此相爱，一直到时间的尽头。
        我相信我们可以一起，等青丝变白发。
        你在，我在，就是海枯石烂。
        没有过多的华丽，只有一句我喜欢你，却能让彼此牵挂于心。
        亲爱的，你知道吗，哪怕遍体鳞伤，我仍有爱你的余力。
        有的人你只看了一眼，却影响其一生。
        生活就像是包饺子，不管你是什么馅，我都会紧紧的把你包在我心里，任生活的沸水怎样煮，都磨不掉		      我对你的爱！
        好久没有见你了，心中十分挂念，可是又不敢去看你，因为害怕打扰你，你会不开心，所以我尽力的控制自己思念的心。
 
不知道这些日子，你是不是跟我一样，牵挂你，想念你；我是真的特别想你，想看看你的笑，想看看你纯真的脸；想着你，我就特别来劲，晚上都无法睡好！
            </article>
        </div>
   </div>
   <div class="parallax-img1">
       <div>
           <h1 id="我爱你-无畏人海的拥挤">我爱你，无畏人海的拥挤</h1>
       </div>
   </div>
   <div class="parallax-img2">
    <div>
        <h1 id="你小心一吻便颠倒众生-nbsp-nbsp-一吻便救一个人">你小心一吻便颠倒众生  一吻便救一个人</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;
}

效果图：

注意：

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

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

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

更多编程相关知识，请访问：编程视频！！

위 내용은 배울 가치가 있는 6가지 프런트엔드 HTML+CSS 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!