社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 简易的CSS3点击响应动画案列

简易的CSS3点击响应动画案列

php中世界最好的语言
发布： 2018-03-08 14:18:13
原创
1599 人浏览过

这次给大家带来简易的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
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板