대화형 효과를 얻기 위해 JS 대신 CSS3를 사용하는 방법-CSS 튜토리얼-php.cn

대화형 효과를 얻기 위해 JS 대신 CSS3를 사용하는 방법

php中世界最好的语言

풀어 주다： 2018-03-21 16:17:14

원래의

2366명이 탐색했습니다.

이번에는 JS 대신 CSS3를 사용하여 인터랙티브 효과를 얻는 방법과 CSS3를 사용하여 JS를 대체하여 인터랙티브 효과를 얻을 때 주의할 점은 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

【CSS3 및 JS】

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

[CSS3의 다른 용도]

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

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

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

로그인 후 복사

[설명]

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

저는 이미 많은 사람들이 위의 구현 방법을 구현했다고 믿습니다. 저는 주로 제가 거의 4년 동안 일해 왔습니다. 기술에 대한 통찰력과 비전을 위해 저는 제가 얼마나 빨리 성장했는지 알고 있지만, 마찬가지로 많은 지식을 사용할 수 있고 이를 사용하는 방법도 알고 있습니다. .. 의미만 알 뿐 진정한 의미를 모른다는 것은 무엇을 의미합니까?

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

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

.listcon .input:checked+label

로그인 후 복사

위 사용법에 대해 CSS3에서 추가된 다양하고 강력한 선택기를 사용하여 더 나은 대화형 효과를 얻을 수 있습니다. 이제부터 JS를 사용하여 DOM을 변경하는 비극을 버리고 CSS에 더 의지하겠습니다. 읽어보신 후에는 이 방법을 마스터하셨으리라 믿습니다. 이 기사의 사례 외 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!