社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 簡易的CSS3點擊響應動畫案列

簡易的CSS3點擊響應動畫案列

php中世界最好的语言
發布： 2018-03-08 14:18:13
原創
1612 人瀏覽過

這次帶給大家簡易的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中文網其他相關文章！

相關標籤：
css css3
來源：php.cn
上一篇：解決ajax跨域的最全方案 下一篇：js進位轉換實例
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板