CSS3 复选框动画特效

hmp07 3年前
   <p><strong>Action one</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4cb765a0b1afc3149f9aae821a3c5744.gif"></p>    <p style="text-align:center">demo1.gif</p>    <pre>  <code class="language-css"><!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>CheckBox</title>      <style>          .checkbox {              width: 900px;              padding: 3% 0%;              margin: 50px auto;              background-color: cornsilk;              text-align: center;          }            .checkbox label {              display: inline-block;              width: 64px;              height: 32px;              margin-right: 10px;              background-color: #ffffff;              border: 1px solid #eeeeee;              border-radius: 17px;              cursor: pointer;              position: relative;              transition: background-color .2s ease-in;          }            .checkbox label:after {              content: "";              width: 30px;              height: 30px;              border-radius: 50%;              background-color: #eeeeee;              position: absolute;              left: 1px;              top: 1px;              transform: translateX(0px);              transition: transform .2s ease-in;          }            .checkbox [type="checkbox"]:checked + label {              background-color: khaki;              transition: background-color .2s ease-in;          }            .checkbox [type="checkbox"]:checked +label:after{              transform: translateX(30px);              transition: transform .2s ease-in;          }            .checkbox [type="checkbox"]{              display: none;          }      </style>  </head>  <body>  <div class="checkbox">      <input type="checkbox" id="checkbox-1">      <label for="checkbox-1"></label>        <input type="checkbox" id="checkbox-2">      <label for="checkbox-2"></label>        <input type="checkbox" id="checkbox-3">      <label for="checkbox-3"></label>  </div>    </body>  </html></code></pre>    <p><strong>Action two</strong></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ec32b11f010a7aad8befc7e567ba27f7.gif"></p>    <p style="text-align:center">demo2.gif</p>    <pre>  <code class="language-css"><!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Title</title>      <style>          .checkbox {              width: 900px;              padding: 3% 0px;              margin: 50px auto;              background-color: cornsilk;              text-align: center;          }            .checkbox label {              position: relative;              display: inline-block;              width: 30px;              height: 30px;              margin-right: 10px;              overflow: hidden;              border: 1px solid #eeeeee;              background-color: #ffffff;              cursor: pointer;          }            .checkbox label:after {              content: "√";              position: absolute;              width: 28px;              height: 28px;              line-height: 26px;              background-color: khaki;              color: #ffffff;              left: 1px;              top: 1px;              text-align: center;              transform: translateY(-30px);              transition: transform .2s ease-out;              border-radius: 4px;          }            .checkbox [type="checkbox"]:checked + label:after {              transform: translateY(0px);              transition: transform .2s ease-in;          }          .checkbox [type="checkbox"]{              display: none;          }      </style>  </head>  <body>  <div class="checkbox">      <input type="checkbox" id="checkbox-1" checked="checked">      <label for="checkbox-1"></label>        <input type="checkbox" id="checkbox-2">      <label for="checkbox-2"></label>        <input type="checkbox" id="checkbox-3">      <label for="checkbox-3"></label>  </div>    </body>  </html></code></pre>    <p>以上代码理解起来并不难,如果你认真阅读了我前几篇文章的话,如果你还没看到,建议你前去查看。</p>    <p> </p>    <p>来自:http://www.jianshu.com/p/fa10f4790e6e</p>    <p> </p>