简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  간단한 CSS3 클릭 반응형 애니메이션 예제

간단한 CSS3 클릭 반응형 애니메이션 예제

php中世界最好的语言
php中世界最好的语言원래의
2018-03-08 14:18:131573검색

이번에는 간단한 CSS3 클릭 응답 애니메이션 사례를 가져오겠습니다. CSS3를 사용하여 클릭 응답 애니메이션을 만들 때 주의 사항은 무엇인가요? 

 <html>
<head>
    <style>
        label{ margin: 0 auto}
        /*1*/
         
        #che1 {
            position: relative;
            border: 2px #666 solid;
            cursor: pointer;
            border-radius: 50%;
            display: block;
            width: 24px;
            height: 24px;
        }
         
        #che1 input[type="checkbox"] +div {
            position: absolute;
            width: 100%;
            height: 100%;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            /* Firefox 4 */
            -o-transition: all 0.2s;
            /* Opera */
            transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            /* IE 9 */
            -webkit-transform: rotate(135deg);
            /* Safari and Chrome */
            -o-transform: rotate(135deg);
            /* Opera */
            -moz-transform: rotate(135deg);
        }
         
        #che1 input[type="checkbox"] +div>div {
            position: absolute;
            width: 18px;
            height: 4px;
            background: #333;
            top: 42%;
            left: 14%;
        }
         
        #che1 input[type="checkbox"] +div>div:nth-child(1) {
            transform: rotate(45deg);
        }
         
        #che1 input[type="checkbox"] +div>div:nth-child(2) {
            transform: rotate(-45deg);
        }
         
        #che1 input[type="checkbox"] {
            display: none;
        }
         
        #che1 input[type="checkbox"]:checked+div {
            transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            /* IE 9 */
            -webkit-transform: rotate(0deg);
            /* Safari and Chrome */
            -o-transform: rotate(0deg);
            /* Opera */
            -moz-transform: rotate(0deg);
        }
        /*2*/
         
        #che2 {
            text-align: center;
            border: 1px #666 solid;
            cursor: pointer;
            border-radius: 50%;
            display: block;
            width: 20px;
            height: 20px;
        }
         
        #che2 input[type="checkbox"] {
            display: none;
        }
         
        #che2 input[type="checkbox"]+ div {
            color: #fff;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.8);
            -webkit-transition-duration: 0.4s;
            -webkit-transition-property: background-color, transform;
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
        }
         
        #che2 input[type="checkbox"]:checked + div {
            -webkit-transform: rotate(-180deg);
            -moz-transform: rotate(-180deg);
            background-color: rgb(204, 204, 204);
            color: #555;
        }
        /*3*/
         
        #che3 {
            cursor: pointer;
            display: block;
            width: 26px;
            height: 26px;
        }
         
        #che3 input[type="checkbox"] {
            display: none;
        }#che3 input[type="checkbox"]+ div {
            display: block;
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 25px solid #666;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            /* Firefox 4 */
            -o-transition: all 0.2s;
            /* Opera */
        }
         
        #che3 input[type="checkbox"]:checked + div {
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
        }
        /*4*/
        #che4 {
            cursor: pointer;
            display: block;
            width: 20px;
            height: 26px;
            position: relative;
        }
         
        #che4 input[type="checkbox"] {
            display: none;
        }
         
        #che4 > div {
            cursor: pointer;
            position: absolute;
            width: 20px;
            height: 3px;
            background: #333;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che4 input[type="checkbox"]+ div {
            top: 3px;
            left: 2px;
            transform: rotate(-45deg)  ;
            -ms-transform: rotate(-45deg)  ;
            /* IE 9 */
            -webkit-transform: rotate(-45deg)   ;
            /* Safari and Chrome */
            -o-transform: rotate(-45deg) ;
            /* Opera */
            -moz-transform: rotate(-45deg)  ;
            /* Firefox */
        }
        #che4 input[type="checkbox"]+ div+ div{
            top: 16px;
            left: 2px;
            transform: rotate(45deg)  ;
            -ms-transform: rotate(45deg)  ;
            /* IE 9 */
            -webkit-transform: rotate(45deg)   ;
            /* Safari and Chrome */
            -o-transform: rotate(45deg)  ;
            /* Opera */
            -moz-transform: rotate(45deg) ;
            /* Firefox */
        }
         
        #che4 input[type="checkbox"]:checked+ div {
            transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            -ms-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* IE 9 */
            -webkit-transform: rotate(45deg)   ;
            /* Safari and Chrome */
            -o-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* Opera */
            -moz-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* Firefox */
        }
         
        #che4 input[type="checkbox"]:checked+ div+ div {
            transform: rotate(-45deg) ;
            -ms-transform: rotate(-45deg) ;
            /* IE 9 */
            -webkit-transform: rotate(-45deg)  ;
            /* Safari and Chrome */
            -o-transform: rotate(-45deg) ;
            /* Opera */
            -moz-transform: rotate(-45deg) ;
            /* Firefox */
        }
        /*5*/
         
        #che5 {
            cursor: pointer;
            display: block;
            width: 24px;
            height: 24px;
            position: relative;
        }
         
        #che5 input[type="checkbox"] {
            display: none;
        }
         
        #che5 input[type="checkbox"]+ div {
            width: 100%;
            height: 100%;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che5 input[type="checkbox"]+ div>div {
            cursor: pointer;
            position: absolute;
            width: 20px;
            height: 3px;
            background: #333;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che5 input[type="checkbox"]+ div>div:nth-child(1) {
            top: 3px;
            left: 2px;
        }
         
        #che5 input[type="checkbox"]+ div> div:nth-child(2) {
            top: 10px;
            left: 2px;
        }
         
        #che5 input[type="checkbox"]+ div> div:nth-child(3) {
            top: 17px;
            left: 2px;
        }
         
        #che5 input[type="checkbox"]:checked+ div {
            transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            /* IE 9 */
            -webkit-transform: rotate(360deg);
            /* Safari and Chrome */
            -o-transform: rotate(360deg);
            /* Opera */
            -moz-transform: rotate(360deg);
        }
         
        #che5 input[type="checkbox"]:checked+ div>div:nth-child(1) {
            top: 10px;
            left: 2px;
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -webkit-transform: rotate(45deg);
            /* Safari and Chrome */
            -o-transform: rotate(45deg);
            /* Opera */
            -moz-transform: rotate(45deg);
            /* Firefox */
        }
         
        #che5 input[type="checkbox"]:checked+ div>div:nth-child(2) {
            transform: scale( 0, 1);
            -ms-transform: scale( 0, 1);
            /* IE 9 */
            -webkit-transform: scale( 0, 1);
            /* Safari and Chrome */
            -o-transform: scale( 0, 1);
            /* Opera */
            -moz-transform: scale( 0, 1);
            /* Firefox */
        }
         
        #che5 input[type="checkbox"]:checked+ div>div:nth-child(3) {
            top: 10px;
            left: 2px;
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            /* IE 9 */
            -webkit-transform: rotate(-45deg);
            /* Safari and Chrome */
            -o-transform: rotate(-45deg);
            /* Opera */
            -moz-transform: rotate(-45deg)
            /* Firefox */
        }
        /*6*/
         
        #che6 {
            cursor: pointer;
            display: block;
            width: 24px;
            height: 24px;
            position: relative;
        }
         
        #che6 input[type="checkbox"] {
            display: none;
        }
         
        #che6 > div {
            cursor: pointer;
            position: absolute;
            width: 20px;
            height: 3px;
            background: #333;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che6 input[type="checkbox"]+ div {
            top: 3px;
            left: 2px;
        }
         
        #che6 input[type="checkbox"]+ div+ div {
            top: 10px;
            left: 2px;
        }
         
        #che6 input[type="checkbox"]+ div+ div+ div {
            top: 17px;
            left: 2px;
        }
         
        #che6 input[type="checkbox"]:checked+ div {
            top: 10px;
            left: 2px;
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -webkit-transform: rotate(45deg);
            /* Safari and Chrome */
            -o-transform: rotate(45deg);
            /* Opera */
            -moz-transform: rotate(45deg);
            /* Firefox */
        }
         
        #che6 input[type="checkbox"]:checked+ div+div {
            transform: scale( 0, 1);
            -ms-transform: scale( 0, 1);
            /* IE 9 */
            -webkit-transform: scale( 0, 1);
            /* Safari and Chrome */
            -o-transform: scale( 0, 1);
            /* Opera */
            -moz-transform: scale( 0, 1);
            /* Firefox */
        }
         
        #che6 input[type="checkbox"]:checked+ div+ div+ div {
            top: 10px;
            left: 2px;
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            /* IE 9 */
            -webkit-transform: rotate(-45deg);
            /* Safari and Chrome */
            -o-transform: rotate(-45deg);
            /* Opera */
            -moz-transform: rotate(-45deg)
            /* Firefox */
        }
        /*7*/
         
        #che7 {
            cursor: pointer;
            display: block;
            width: 24px;
            height: 24px;
            position: relative;
        }
         
        #che7 input[type="checkbox"] {
            display: none;
        }
         
        #che7 > div {
            cursor: pointer;
            position: absolute;
            width: 20px;
            height: 3px;
            background: #333;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che7 input[type="checkbox"]+ div {
            top: 3px;
            left: 2px;
        }
         
        #che7 input[type="checkbox"]+ div+ div {
            top: 10px;
            left: 2px;
        }
         
        #che7 input[type="checkbox"]+ div+ div+ div {
            top: 17px;
            left: 2px;
        }
         
        #che7 input[type="checkbox"]:checked+ div {
            transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            -ms-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* IE 9 */
            -webkit-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* Safari and Chrome */
            -o-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* Opera */
            -moz-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* Firefox */
        }
         
        #che7 input[type="checkbox"]:checked+ div+ div+ div {
            transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
            -ms-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
            /* IE 9 */
            -webkit-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
            /* Safari and Chrome */
            -o-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
            /* Opera */
            -moz-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
            /* Firefox */
        }
        /*8*/
         
        #che8 {
            cursor: pointer;
            display: block;
            width: 24px;
            height: 24px;
            position: relative;
        }
         
        #che8 input[type="checkbox"] {
            display: none;
        }
         
        #che8 input[type="checkbox"]+ div {
            position: absolute;
            width: 100%;
            height: 100%;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che8 input[type="checkbox"]+ div> div {
            position: absolute;
            width: 20px;
            height: 3px;
            background: #333;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che8 input[type="checkbox"]+ div>div:nth-child(1) {
            top: 3px;
            left: 2px;
        }
         
        #che8 input[type="checkbox"]+ div> div:nth-child(2) {
            top: 10px;
            left: 2px;
        }
         
        #che8 input[type="checkbox"]+ div> div:nth-child(3) {
            top: 17px;
            left: 2px;
        }
         
        #che8 input[type="checkbox"]:checked+div {
            transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            /* IE 9 */
            -webkit-transform: rotate(180deg);
            /* Safari and Chrome */
            -o-transform: rotate(180deg);
            /* Opera */
            -moz-transform: rotate(180deg);
        }
         
        #che8 input[type="checkbox"]:checked+ div> div:nth-child(1) {
            transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            -ms-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* IE 9 */
            -webkit-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* Safari and Chrome */
            -o-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* Opera */
            -moz-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
            /* Firefox */
        }
         
        #che8 input[type="checkbox"]:checked+ div> div:nth-child(3) {
            transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
            -ms-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
            /* IE 9 */
            -webkit-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
            /* Safari and Chrome */
            -o-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
            /* Opera */
            -moz-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
            /* Firefox */
        }
        /*9*/
         
        #che9 {
            cursor: pointer;
            display: block;
            width: 20px;
            height: 20px;
            position: relative;
        }
         
        #che9 input[type="checkbox"] {
            display: none;
        }
         
        #che9 input[type="checkbox"]+ div {
            width: 100%;
            height: 100%;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che9 input[type="checkbox"]+ div>div {
            top: 10px;
            left: 2px;
            cursor: pointer;
            position: absolute;
            width: 20px;
            height: 3px;
            background: #333;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che9 input[type="checkbox"]+ div>div:nth-child(1) {
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -webkit-transform: rotate(45deg);
            /* Safari and Chrome */
            -o-transform: rotate(45deg);
            /* Opera */
            -moz-transform: rotate(45deg);
            /* Firefox */
        }
         
        #che9 input[type="checkbox"]+ div> div:nth-child(2) {
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            /* IE 9 */
            -webkit-transform: rotate(-45deg);
            /* Safari and Chrome */
            -o-transform: rotate(-45deg);
            /* Opera */
            -moz-transform: rotate(-45deg)
            /* Firefox */
        }
         
        #che9 input[type="checkbox"]:checked+ div {
            transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            /* IE 9 */
            -webkit-transform: rotate(360deg);
            /* Safari and Chrome */
            -o-transform: rotate(360deg);
            /* Opera */
            -moz-transform: rotate(360deg);
        }
         
        #che9 input[type="checkbox"]:checked+ div>div:nth-child(1) {
            top: 13px;
            left: 3px;
            width: 10px;
            transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            /* IE 9 */
            -webkit-transform: rotate(30deg);
            /* Safari and Chrome */
            -o-transform: rotate(30deg);
            /* Opera */
            -moz-transform: rotate(30deg);
            /* Firefox */
        }
        #che9 input[type="checkbox"]:checked+ div>div:nth-child(2) {
            top: 10px;
            left:8px;
            width: 18px;
            transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
            /* IE 9 */
            -webkit-transform: rotate(-60deg);
            /* Safari and Chrome */
            -o-transform: rotate(-60deg);
            /* Opera */
            -moz-transform: rotate(-60deg);
        }
        /*10*/
         
        #che10 {
            cursor: pointer;
            display: block;
            width: 20px;
            height: 20px;
            position: relative;
        }
         
        #che10 input[type="checkbox"] {
            display: none;
        }
         
        #che10 input[type="checkbox"]+ div {
            width: 100%;
            height: 100%;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che10 input[type="checkbox"]+ div>div {
            top: 10px;
            left: 2px;
            cursor: pointer;
            position: absolute;
            width: 20px;
            height: 3px;
            background: #333;
            transition: all 0.26s;
            -moz-transition: all 0.26s;
            /* Firefox 4 */
            -webkit-transition: all 0.26s;
            /* Safari 和 Chrome */
            -o-transition: all 0.26s;
        }
         
        #che10 input[type="checkbox"]+ div>div:nth-child(1) {
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -webkit-transform: rotate(45deg);
            /* Safari and Chrome */
            -o-transform: rotate(45deg);
            /* Opera */
            -moz-transform: rotate(45deg);
            /* Firefox */
        }
         
        #che10 input[type="checkbox"]+ div> div:nth-child(2) {
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            /* IE 9 */
            -webkit-transform: rotate(-45deg);
            /* Safari and Chrome */
            -o-transform: rotate(-45deg);
            /* Opera */
            -moz-transform: rotate(-45deg)
            /* Firefox */
        }
         
        #che10 input[type="checkbox"]:checked+ div {
            /*transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             IE 9 */
            /*-webkit-transform: rotate(360deg);
             Safari and Chrome */
            /*-o-transform: rotate(360deg);
             Opera
            -moz-transform: rotate(360deg);*/
        }
         
        #che10 input[type="checkbox"]:checked+ div>div:nth-child(1) {
            top: 13px;
            left: 3px;
            width: 10px;
            transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            /* IE 9 */
            -webkit-transform: rotate(30deg);
            /* Safari and Chrome */
            -o-transform: rotate(30deg);
            /* Opera */
            -moz-transform: rotate(30deg);
            /* Firefox */
        }
        #che10 input[type="checkbox"]:checked+ div>div:nth-child(2) {
            top: 10px;
            left:8px;
            width: 18px;
            transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
            /* IE 9 */
            -webkit-transform: rotate(-60deg);
            /* Safari and Chrome */
            -o-transform: rotate(-60deg);
            /* Opera */
            -moz-transform: rotate(-60deg);
        }
    </style>
</head>
 
<body>
    <label id="che1">
        <input type="checkbox" />
        <div>
            <div></div>
            <div></div>
        </div>
    </label>
    <br />
    <label id="che2">
        <input type="checkbox" />
        <div>></div>
    </label>
    <br />
    <label id="che3">
        <input type="checkbox" />
        <div></div>
    </label>
    <br />
    <label id="che4">
        <input type="checkbox" />
        <div></div>
        <div></div>
    </label>
    <br />
    <label id="che5">
        <input type="checkbox" />
        <div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </label>
    <br />
    <label id="che6">
        <input type="checkbox" />
        <div></div>
        <div></div>
        <div></div>
    </label>
    <br />
    <label id="che7">
        <input type="checkbox" />
        <div></div>
        <div></div>
        <div></div>
    </label>
    <br />
    <label id="che8">
        <input type="checkbox" />
        <div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </label>
    <br />
    <label id="che9">
        <input type="checkbox" />
        <div>
            <div></div>
            <div></div>
        </div>
    </label>
    <br />
    <label id="che10">
        <input type="checkbox" />
        <div>
            <div></div>
            <div></div>
        </div>
    </label>
</body>
 
</html>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

브라우저를 편집기로 전환하는 방법

이미지 다운로드를 위한 javascript 스크립트

위 내용은 간단한 CSS3 클릭 반응형 애니메이션 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：크로스 도메인 Ajax에 대한 가장 포괄적인 솔루션다음 기사：크로스 도메인 Ajax에 대한 가장 포괄적인 솔루션

관련 기사

더보기