집 >웹 프론트엔드 >CSS 튜토리얼 >대화형 효과를 얻기 위해 JS 대신 CSS3를 사용하는 방법

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

php中世界最好的语言원래의: 2018-03-21 16:17:142349검색

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

【CSS3 및 JS】

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

[CSS3의 다른 용도]

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

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

c9ccee2e6ea535a969eb3f532ad9fe89
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;}
531ac245ce3e4fe3d50054a55f265927
28859b2ba70e98e5703d7b62483afef7
    9890cd3db8af2c13be66110fccb4c149
        efa64630fb67b2f5e868af04ec249fd694b3e26ee717c64999d7867364b1b4a3
        4cd7a1c97800370822b14b86c8fd82a0
        2e1cf0710519d5598b1f0f14c36ba674啥地方垃圾费8c1ecd4bb896b2264e0711597d40766c
    94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

[설명]

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

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

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

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

.listcon .input:checked+label

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