css3实现打钩按钮特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3实现打钩按钮特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css3ʵ�ֹ�ѡЧ��</title>
<link rel="stylesheet" href="css/zzsc.css">
</head>

<body>
<input type="checkbox" id="check">
<label for="check" class="loadcheck" id="loadcheck">
  <span class="entypo-cancel"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="entypo-check"></span>
</label>

<input type="checkbox" id="check1" checked>
<label for="check1" class="loadcheck" id="loadcheck1">
  <span class="entypo-cancel"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="load"></span>
  <span class="entypo-check"></span>
</label>
</body>
</html>

CSS代码(zzsc.css):

@import url(family=entypo);/* entypo */
[class*="entypo-"]:before{font-family:'entypo',sans-serif;}
body{font-family:"helvetica Neue";background:#444;}
p{text-align:center;font-weight:100;letter-spacing:1px;color:#fff;opacity:0;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-ms-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s;}
p a{color:#6fcbed;text-decoration:none;}
#check:checked ~ p{opacity:1;letter-spacing:2px;}
input[type="checkbox"]{display:none;}
#loadcheck{position:absolute;left:0;right:0;margin:100px auto;}
#loadcheck1{position:absolute;left:0;right:0;margin:180px auto;}
.loadcheck{width:135px;height:40px;font-size:35px;}
.loadcheck span{float:left;}
.load{display:block;width:7px;height:7px;margin:20px 5px;border-radius:10px;transition:.5s;cursor:pointer;}
.load:nth-child(2){background:#db1536;}
.load:nth-child(3){background:rgba(219,21,54,.7);}
.load:nth-child(4){background:rgba(219,21,54,.5);}
.load:nth-child(5){background:rgba(219,21,54,.3);}
.load:nth-child(6){background:rgba(219,21,54,.1);}
span[class*="entypo"]{cursor:pointer;}
span[class*="cancel"]{font-size:40px;color:#db1536;transition:.5s;transition-delay:.1s;}
span[class*="check"]{color:rgba(0,0,0,.1);transition:.5s;transition-delay:.1s;}
#check:checked + .loadcheck .entypo-check{color:#58d37b;}
#check:checked + .loadcheck .entypo-cancel{color:rgba(0,0,0,.1);}
#check:checked + .loadcheck .load:nth-child(2){background:rgba(88,211,123,.1);}
#check:checked + .loadcheck .load:nth-child(3){background:rgba(88,211,123,.3);}
#check:checked + .loadcheck .load:nth-child(4){background:rgba(88,211,123,.5);}
#check:checked + .loadcheck .load:nth-child(5){background:rgba(88,211,123,.7);}
#check:checked + .loadcheck .load:nth-child(6){background:#58d37b;}
#check1:checked + .loadcheck .entypo-check{color:#58d37b;}
#check1:checked + .loadcheck .entypo-cancel{color:rgba(0,0,0,.1);}
#check1:checked + .loadcheck .load:nth-child(2){background:rgba(88,211,123,.1);}
#check1:checked + .loadcheck .load:nth-child(3){background:rgba(88,211,123,.3);}
#check1:checked + .loadcheck .load:nth-child(4){background:rgba(88,211,123,.5);}
#check1:checked + .loadcheck .load:nth-child(5){background:rgba(88,211,123,.7);}
#check1:checked + .loadcheck .load:nth-child(6){background:#58d37b;}

附件:下载该文件资源,减少时间成本(增值服务)