CSS3 전환을 위한 트리거 방법은 무엇입니까?
- 青灯夜游원래의
- 2021-12-15 11:20:192744검색
css3 전환에는 두 가지 트리거 방법이 있습니다. 1. ":hover", ":focus", ":checked" 등을 포함한 의사 클래스 요소에 의해 트리거됩니다. 2. js 또는 Jquery 코드를 사용하여 수정합니다. CSS 속성을 사용하여 전환의 그라데이션을 트리거합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
transition
전환은 CSS3에서 가장 간단한 애니메이션입니다. 요소의 속성이 변경되면 그라데이션 방식으로 표시할 수 있습니다. 다음 코드는 전환을 추가한 결과입니다. , 길이는 점차 300px로 늘어납니다.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>Css3 전환 트리거 방법
첫 번째: hover, focus,checked 등을 포함한 의사 클래스 요소를 통해 트리거됩니다.
<style>
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: width 1s linear .5s;
}
.box:hover{
width: 400px;
}
</style>
<p class="box"></p>그러나 실제 사용에서는 , 속성을 직접 수정하기 위해 주로 JS 또는 Jquery를 사용하지만 직장에서는 이것이 작동하지 않는 것으로 나타났습니다.
두 번째: JS에 의해 트리거
JS 또는 Jquery를 사용하여 CSS 속성을 직접 수정하는 경우
JS 트리거 방법은 클래스가 변경되어 새로운 스타일을 얻을 수 있어야 합니다.
제가 이해한 바에 따르면, 새로운 속성을 얻을 수 있도록 요소를 변경해야 합니다. 이는 의사 클래스 트리거링의 경우 새로운 스타일을 얻을 수 있도록 클래스를 변경해야 한다는 것입니다. 얻을 수 있습니다.
p에 새 클래스를 추가하여 p가 클래스를 변경하고 획득하게 하면 전환의 그라데이션이 트리거될 수 있습니다.
<style>
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: width 1s linear .5s;
}
.box1{
width: 400px;
}
</style>
<p class="box"></p>
<scrpit>
setTimeout(() => {
let element = document.getElementsByClassName('box')[0];
element.classList.add('box1')
}, 1)
</scrpit>(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3 전환을 위한 트리거 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!