상호 작용을 달성하기 위해 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>
<div class="list__con">
    <div class="box">
        <div class="delete"></div>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </div>
</div>

설명]

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

저는 이미 위의 구현 방법을 많은 사람들이 구현했다고 믿습니다. 지난 몇 년 동안 나는 내가 얼마나 빨리 성장했는지 알고 있지만, 마찬가지로 나는 많은 지식을 사용하는 방법을 알고 있으며 그것을 사용하는 방법을 알고 있지만 이번에는 무엇을 아는 것이 무엇을 의미하는지 정말로 이해합니다. 즉, 그 진정한 의미를 모르겠습니다. 왜!

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

CSS를 완전히 구현하면 재사용성과 유지 관리성이 향상되고 해당 구성 요소를 구현하는 더 나은 방법을 제공하며 성능도 향상됩니다.

.list__con .input:checked+label

, CSS3에서 추가된 다양하고 강력한 선택기를 사용하여 이제부터 더 나은 대화형 효과를 얻을 수 있습니다. 이제 JS를 사용하여 DOM을 변경하는 비극을 버리고 CSS에 더 의지하겠습니다.

위 내용은 상호 작용을 달성하기 위해 JS 대신 CSS3를 사용하는 방법에 대한 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!