• 技术文章 >web前端 >js教程

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

    php中世界最好的语言php中世界最好的语言2018-03-08 14:18:13原创1037
    这次给大家带来简易的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核实处理。

    前端(VUE)零基础到就业课程：点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架：点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐：CSS3 css 样式表
    上一篇：解决ajax跨域的最全方案 下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程，总价3725元，会员免费学• ❤️‍🔥接口自动化测试不想写代码？• 聊聊用pkg将Node.js项目打包为可执行文件的方法• Node实战：运用Cookie&Session进行登录验证• 手把手带你了解Angular中的依赖注入• jQuery插件分享：Turn.js实现一个移动端电子书翻页效果• Angular学习之聊聊notification（自定义服务）
    1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载