html圆圈中打钩代码,CSS实现打勾html,body {
padding:0;
margin:0;
background-color:#667788;
color:#efefef;
font-family:'Open Sans';
}
.container {
box-sizing:border-box;
padding:25px;
text-align:center;
}
.container h2 {
margin-bottom:40px;
}
.container p {
margin-top:40px;
}
@-moz-keyframes dothabottomcheck {
0% {
height:0;
}
100% {
height:50px;
}
}@-webkit-keyframes dothabottomcheck {
0% {
height:0;
}
100% {
height:50px;
}
}@keyframes dothabottomcheck {
0% {
height:0;
}
100% {
height:50px;
}
}@keyframes dothatopcheck {
0% {
height:0;
}
50% {
height:0;
}
100% {
height:120px;
}
}@-webkit-keyframes dothatopcheck { 0% {
height:0;
}
50% {
height:0;
}
100% {
height:120px;
}
}@-moz-keyframes dothatopcheck { 0% {
height:0;
}
50% {
height:0;
}
100% {
height:120px;
}
}input[type=checkbox] {
display:none;
}
.check-box {
height:100px;
width:100px;
background-color:transparent;
border:10px solid black;
border-radius:5px;
position:relative;
display:inline-block;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-transition:border-color ease 0.2s; -o-transition:border-color ease 0.2s;
-webkit-transition:border-color ease 0.2s; transition:border-color ease 0.2s; cursor:pointer;
}
.check-box::before,.check-box::after {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
height:0;
width:20px;
background-color:#34b93d;
display:inline-block;
-moz-transform-origin:left top;
-ms-transform-origin:left top;
-o-transform-origin:left top;
-webkit-transform-origin:left top;
transform-origin:left top;
border-radius:5px;
content:' ';
-webkit-transition:opacity ease .5;
-moz-transition:opacity ease .5;
transition:opacity ease .5;
}
.check-box::before {
top:72px;
left:41px;
borderbox
box-shadow:0 0 0 5px #667788;
-moz-transform:rotate(-135deg);
-ms-transform:rotate(-135deg);
-
o-transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
transform:rotate(-135deg);
}
.check-box::after {
top:37px;
left:5px;
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
input[type=checkbox]:checked + .check-box,.check-box.checked {
border-color:#34b93d;
}
input[type=checkbox]:checked + .check-box::after,.check-box.checked::after { height:50px;
-moz-animation:dothabottomcheck 0.2s ease 0s forwards;
-o-animation:dothabottomcheck 0.2s ease 0s forwards;
-webkit-animation:dothabottomcheck 0.2s ease 0s forwards;
animation:dothabottomcheck 0.2s ease 0s forwards;
}
input[type=checkbox]:checked + .check-box::before,.check-box.checked::before { height:120px;
-moz-animation:dothatopcheck 0.4s ease 0s forwards;
-o-animation:dothatopcheck 0.4s ease 0s forwards;
-webkit-animation:dothatopcheck 0.4s ease 0s forwards;
animation:dothatopcheck 0.4s ease 0s forwards;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。