<style type="text/css">
.m-box{width:70px;height:70px;position:relative;margin:10px auto;background-color:#B50025;border-radius:50%;}
.m-duigou{width:45px;height:30px;position:absolute;left:90%;top:78%;margin:-40px 0 0 -50px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);overflow:hidden;}
.m-duigou:before,.m-duigou:after{content:"";position:absolute;background:#fff;}
.m-duigou:before{width:10px;height:30px;left:0;-webkit-animation:dgLeft 0.3s linear 200ms 1 both;animation:dgLeft 0.3s linear 200ms 1 both}
.m-duigou:after{width:45px;height:10px;bottom:0;-webkit-animation:dgRight 0.2s linear 600ms 1 both;animation:dgRight 0.2s linear 600ms 1 both}
@-webkit-keyframes dgLeft{0%{top:-100%}100%{top:0%}}
@-webkit-keyframes dgLeft{0%{top:-100%}100%{top:0%}}
@-webkit-keyframes dgRight{0%{left:-100%}100%{left:0%}}
@-webkit-keyframes dgRight{0%{left:-100%}100%{left:0%}}
.error {
width: 15px;
height: 15px;
margin: auto;
position: relative;
margin-left: 32px;
}
.error::before,
.error::after {
content: "";
position: absolute;
height: 40px;
width: 9px;
top: 15px;
right: 8px;
background:white;
}
.error::before {
transform: rotate(45deg);
}
.error::after {
transform: rotate(-45deg);
}
</style>
<div class="m-box" id="m-box">
<div class="m-duigou" id="m-duigou"></div>
<div class="error" id="error"></div>
</div>
css 对号 叉号
最新推荐文章于 2024-01-17 06:33:43 发布