html圆圈中打钩代码,CSS实现打勾

最新推荐文章于 2024-04-05 14:34:58 发布

weixin_39661780

最新推荐文章于 2024-04-05 14:34:58 发布

阅读量1.5k

点赞数

文章标签： html圆圈中打钩代码

这篇博客介绍了如何使用HTML和CSS实现一个圆圈中带打钩标记的复选框效果。通过CSS的伪元素、动画和变换属性，详细展示了创建这种视觉效果的步骤和代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

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;

}