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

대화형 튜토리얼을 구현하기 위해 JS 대신 CSS3를 사용하는 방법

巴扎黑

풀어 주다： 2017-08-12 15:25:12

원래의

1655명이 탐색했습니다.

이 글에서는 상호 작용을 위해 JS 대신 CSS3를 사용하는 방법을 주로 소개합니다. CSS3 애니메이션과 JS 애니메이션을 비교하는 관점에서 볼 때 프런트 엔드 프레임워크를 사용하면 페이지 애니메이션이 점점 더 많이 사용될 것입니다. CSS3. 구체적인 예제 코드는 이 글을 참조하세요

[CSS3 및 JS]

CSS를 아는 학생들은 구현 측면이나 JS가 인터페이스를 제공하는 측면에서 가장 낮은 수준이라는 것을 알고 있습니다. CSS3 애니메이션과 JS 애니메이션을 비교하는 관점에서 볼 때 더 명확해질 것이며 프런트 엔드 프레임워크를 사용하면 점점 더 많은 페이지 애니메이션이 CSS3

[CSS3의 다른 용도]

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

먼저 예를 살펴보겠습니다. of 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에 더 의지하겠습니다.

위 내용은 대화형 튜토리얼을 구현하기 위해 JS 대신 CSS3를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!