집 > 기사 > 웹 프론트엔드 > CSS3에서 라디오 버튼 애니메이션 효과를 구현하는 방법

CSS3에서 라디오 버튼 애니메이션 효과를 구현하는 방법

php中世界最好的语言원래의: 2017-11-25 14:05:402007검색

CSS3에서 라디오 버튼 애니메이션 효과를 구현하는 방법은 무엇입니까? 라디오 버튼 애니메이션 효과를 구현해야 하는 이유는 무엇입니까? CSS3를 사용하여 라디오 버튼 애니메이션 효과를 구현하는 데 도움이 되는 두 가지 예를 들어보겠습니다

<div>
<input type="radio" name="radio-1" id="radio-1-1" checked="checked">
<label for="radio-1-1"></label>
<input type="radio" name="radio-1" id="radio-1-2">
<label for="radio-1-2"></label>
<input type="radio" name="radio-1" id="radio-1-3">
<label for="radio-1-3"></label>
</div>

여기서 입력 태그의 유형 값을 radio로 지정하고 모든 라디오의 이름 값은 동일합니다. 단일 선택 효과를 얻을 수 있습니다. 여기 라벨의 for 속성에 대해서는 처음에는 왜 이렇게 설정했는지 이해가 안 됐는데, 나중에 이 속성의 정의를 찾아보니 어쨌든 이 속성이 설정되어 있는 한, 일반적인 의미는 이렇습니다. 레이블 요소를 클릭하고 탐색하면 수신기가 자동으로 라디오로 초점을 이동합니다. 다음으로 CSS를 사용하여 HTML에 효과를 설정합니다.

.radio-1 {        width: 900px;        padding: 3% 0%;        margin: 10px auto;        background-color: darkseagreen;        text-align: center;
}
.radio-1 label {        display: inline-block;        position: relative;        width: 28px;        height: 28px;        border: 1px solid #cccccc;        border-radius: 100%;        cursor: pointer;        background-color: #ffffff;        margin-right: 10px;
}

여기서 먼저 레이블 요소의 설정을 살펴보겠습니다. 이전 기사에서 대부분의 속성을 소개했습니다. 유일하게 익숙하지 않은 속성은 마우스 스타일을 설정하는 데 사용되며 포인터로 설정됩니다. 나중에 마우스를 레이블 요소에 놓으면 마우스 스타일이 손 모양으로 변경됩니다(내 컴퓨터의 경우). 자, 계속해서

.radio-1 label:after {
content: "";        position: absolute;        width: 20px;        height: 20px;        top: 4px;        left: 4px;        background-color: #666;        border-radius: 50%;        transform: scale(0);        transition: transform .2s ease-out;
}

를 살펴보겠습니다. 여기서는 after 선택기를 사용합니다. 왜 이 속성을 설정하나요? 위 그림과 같이 작은 검은 점을 설정하기만 하면 됩니다. 먼저 content 속성을 공백으로 설정합니다. 즉, 배경색을 검정색으로 설정하기만 하면 되기 때문에 콘텐츠로 채울 필요가 없습니다. 그게 전부입니다. 또한 처음에는 변환의 스케일 값을 0으로 설정했습니다. 그 효과는 작은 검은 점을 숨기는 것입니다.

.radio-1 [type="radio"]:checked + label {        background-color: #eeeeee;        transition: background-color .2s ease-in;
}
 
.radio-1 [type="radio"]:checked + label:after {
transform: scale(1);        transition: transform .2s ease-in;
}

여기서 + 기호가 사용된다는 점에 유의하세요. 이는 무엇을 의미하나요? 학명은 인접 형제 선택자(adjacent sibling selector)라고 하는데, 이는 다른 요소 바로 뒤에 있는 요소를 선택한다는 의미이며, 둘 다 동일한 부모 요소를 가지고 있다는 의미입니다. 여기서 의미하는 것은 라디오 뒤에 나타나는 레이블을 선택하는 것입니다. 라벨을 직접 설정하면 됩니다. 매우 큰 시스템에서 혼란을 피하기 위해 label 요소를 여러 번 사용할 수 있다고 가정하면 이 설정이 더 정확할 것입니다. 여기서는 전환 효과를 설정하는 데 사용되는 전환 속성을 볼 수 있습니다. 마지막으로 라디오를 숨기면 완료됩니다.

.radio-1 [type="radio"]{        display: none;
}
Action two

두 번째 특수 효과입니다

demo2.gif

사실 이 애니메이션을 봤을 때 첫인상은 변형 속성이 회전으로 설정되어 있다는 점만 빼면 전작과 똑같다는 것이었습니다. 더 이상 설명하지 마세요. 이전 예제를 결합하면 이러한 효과를 쉽게 만들 수 있습니다. 코드로 바로 이동해 보겠습니다.

 
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Radio</title>
<style>
.radio-2 { width: 900px;padding: 3% 0; margin: 50px auto;  background-color: darkseagreen; text-align: center;
}
.radio-2 label { display: inline-block; width: 28px;            height: 28px; overflow: hidden; border: 1px solid #eeeeee;            border-radius: 100%; margin-right: 10px;  background-color: #ffffff; position: relative;cursor: pointer;
}
.radio-2 label:after { content: ""; position: absolute;top: 4px; left: 4px; width: 20px; height: 20px;  background-color: #666666; border-radius: 50%;  transform: rotate(-180deg);transform-origin: -2px 50%; transition: transform .2s ease-in;
}        .radio-2 [type="radio"] {            display: none;
}
 
.radio-2 [type="radio"]:checked + label:after{
transform: rotate(0deg);            transition: transform .2s ease-out;
}    </style></head><body><div>
<input type="radio" name="radio-2" id="radio-2-1" checked="checked">
<label for="radio-2-1"></label>
<input type="radio" name="radio-2" id="radio-2-2">
<label for="radio-2-2"></label>
<input type="radio" name="radio-2" id="radio-2-3">
<label for="radio-2-3"></label></div></body><ml>

이 글을 읽고 나면 모두가 이미 CSS3에서 라디오 버튼 애니메이션 효과를 구현하는 방법을 이해했을 것입니다. 이 두 가지 예를 살펴보세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!