Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Simple CSS3 click responsive animation example

Simple CSS3 click responsive animation example

php中世界最好的语言
Release： 2018-03-08 14:18:13
Original
1612 people have browsed it

This time I will bring you a simple CSS3 click-response animation case. What are the precautions for using CSS3 to create click-response animation? The following is a practical case, let's take a look. 

 <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>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to turn the browser into an editor

##Javascript script used to download images

The above is the detailed content of Simple CSS3 click responsive animation example. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
css css3
source：php.cn
Previous article：The most comprehensive solution to cross-domain ajax Next article：js hexadecimal conversion example
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template