집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3는 JS를 대체하여 상호 작용을 달성합니다.

CSS3는 JS를 대체하여 상호 작용을 달성합니다.

小云云원래의: 2017-12-19 09:27:131820검색

이 기사에서는 상호 작용을 달성하기 위해 CSS3를 대체하는 방법을 주로 소개합니다. CSS3 애니메이션과 JS 애니메이션을 비교하는 관점에서 볼 때 프런트 엔드 프레임워크를 사용하면 페이지 애니메이션에서 CSS3를 점점 더 많이 사용할 것입니다. 구체적인 샘플 코드는 이 문서를 참조하세요. 도움이 되기를 바랍니다.

【CSS3 및 JS】

CSS를 아는 학생들은 CSS 구현이 구현 방법이나 성능 면에서 가장 낮은 수준이라는 것을 모두 알고 있습니다. 애니메이션에서 인터페이스를 제공하는 JS와 같은 스크립트와 비슷합니다. CSS3 두 가지를 JS 애니메이션과 비교하면 더 명확해지며 프런트 엔드 프레임워크를 사용하면 페이지 애니메이션에서 CSS3를 점점 더 많이 사용하게 됩니다.

[CSS3의 다른 용도]

애니메이션을 대체하는 것 외에도 다양한 상호작용의 구현도 CSS의 힘을 반영하며, CSS3에서 제공하는 선택기가 더 많이 사용됩니다.

먼저 예를 살펴보겠습니다. 이번에는 CSS에 대한 저의 깊은 이해를 더 잘 반영할 수 있습니다

<style>
body{background:#f4f4f4;margin:0;}
/*list*/
.list__con{}
.list__con .box{background:#fff;position:relative;border-bottom:solid 1px #858585;overflow:hidden;}
.list__con .box:hover{background:#f4f4f4;-webkit-transition:all .6s;transition:all .6s;}
.list__con .box:hover .delete{-webkit-transition:all .6s;transition:all .6s;opacity:1;}
.list__con .input{-webkit-appearance:none;appearance:none;position:absolute;top:10px;left:12px;padding:0;border:none;margin:0;width:24px;height:24px;border:solid 2px red;border-radius:50%;box-sizing:border-box;outline:none;cursor:pointer;}
.list__con .input:checked::after{content:&#39;&#39;;width:14px;height:14px;background:red;position:absolute;top:3px;left:3px;border-radius:50%;}
.list__con label{line-height:24px;padding:10px 0 10px 48px;display:block;-webkit-transition:all .4s;transition:all .4s;}
.list__con .input:checked+label{color:#d9d9d9;text-decoration:line-through;}
.list__con .delete{width:44px;height:44px;float:right;position:relative;cursor:pointer;opacity:0;}
.list__con .delete:hover::after{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete:hover::before{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete::after{content:&#39;&#39;;position:absolute;width:2px;height:20px;background:red;top:12px;left:50%;margin-left:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
.list__con .delete::before{content:&#39;&#39;;position:absolute;width:20px;height:2px;background:red;top:50%;left:12px;margin-top:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
</style>
<p class="list__con">
    <p class="box">
        <p class="delete"></p>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </p>
</p>

【설명】

위에는 많은 상호 작용, 호버 상호 작용, 확인된 상호 작용이 포함됩니다.

저는 많은 사람들이 이미 위의 구현 방법을 구현했다고 믿습니다. 기술 분야에서 저는 거의 4년 동안 일해 왔습니다. 이 기간 동안 저는 제가 얼마나 빨리 성장했는지 알고 있지만, 마찬가지로 저는 많은 지식을 사용할 수 있고 그것을 사용하는 방법도 알고 있습니다. 의미만 알고 참된 의미를 모른다는 것이 무엇을 의미하는지, 그리고 그 이유를 진정으로 이해하십시오!

과거에는 위의 인터랙티브 효과를 얻기 위해 CSS와 js를 조합하여 사용하기도 했습니다. 그러나 탐색할 때 저만의 방식에 갇혀 있었습니다. 나는 지금까지 원래 아이디어를 실제로 실현하지 못했습니다.

CSS를 완전히 구현하면 재사용성과 유지 관리성이 향상되고 해당 구성 요소를 구현하는 더 나은 방법을 제공하며 성능도 향상됩니다. 위의 내용을 통해 CSS3에서 추가한 다양하고 강력한 선택기를 사용하여 이제부터 JS를 사용하여 DOM을 변경하는 비극을 버리고 CSS

CSS3는 JS를 대체하여 상호 작용을 달성합니다.

관련 기사