无法诊断 div
左上角 float 像素的原因。它只在我添加了一个 border-radius
后出现。
仔细观察每个 Angular ,您会看到一些碎片,因为它在应用半径之前应用了直线。也许需要一种不同的技术。
.contest-types {
border: 2px solid #BCCED4;
border-radius: 10px;
color: #1B2437;
padding: 10px;
margin: 20px;
width: 500px;
height: 200px;
background-color: #F9FDFF;
position: relative;
}
.contest-types:before {
content: '';
width: 2px;
height: 2px;
background-color: #5697fc;
position: absolute;
left: -2px;
top: -2px;
display: none;
}
.contest-types:after {
content: '';
position: absolute;
display: block;
background-color: #5697fc;
}
.contest-types:hover {
border: 2px solid #5697FC;
background-color: #FFFFFF;
animation: border 0.5s ease-out 1;
}
.contest-types:hover:after {
border-radius: 10px;
animation: border-after 0.5s ease-in-out 1;
}
.contest-types:hover:before {
display: block;
}
@keyframes border {
0%, 24% {
border-color: #BCCED4;
}
25% {
border-top-color: #5697fc;
}
49% {
border-right-color: #BCCED4;
}
50% {
border-right-color: #5697fc;
}
74% {
border-bottom-color: #BCCED4;
}
75% {
border-bottom-color: #5697fc;
}
99% {
border-left-color: #BCCED4;
}
100% {
border-color: #5697fc;
}
}
@keyframes border-after {
0% {
height: 2px;
width: 0;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
24.99% {
width: calc(100% + 2px);
height: 2px;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
25% {
width: 2px;
height: 0;
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
49.99% {
width: 2px;
height: calc(100% + 2px);
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
50% {
width: 0;
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
74.99% {
width: calc(100% + 2px);
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
75% {
width: 2px;
height: 0;
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
100% {
width: 2px;
height: calc(100% + 2px);
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
}
<div class="contest-types" id="group">
</div>
最佳答案
使用溢出:隐藏
.contest-types {
border: 2px solid #BCCED4;
border-radius: 10px;
overflow: hidden;
color: #1B2437;
padding: 10px;
margin: 20px;
width: 500px;
height: 200px;
background-color: #F9FDFF;
position: relative;
}
.contest-types:before {
content: '';
width: 2px;
height: 2px;
background-color: #5697fc;
position: absolute;
left: -2px;
top: -2px;
display: none;
}
.contest-types:after {
content: '';
position: absolute;
display: block;
background-color: #5697fc;
}
.contest-types:hover {
border: 2px solid #5697FC;
background-color: #FFFFFF;
animation: border 0.5s ease-out 1;
}
.contest-types:hover:after {
border-radius: 10px;
animation: border-after 0.5s ease-in-out 1;
}
.contest-types:hover:before {
display: block;
}
@keyframes border {
0%, 24% {
border-color: #BCCED4;
}
25% {
border-top-color: #5697fc;
}
49% {
border-right-color: #BCCED4;
}
50% {
border-right-color: #5697fc;
}
74% {
border-bottom-color: #BCCED4;
}
75% {
border-bottom-color: #5697fc;
}
99% {
border-left-color: #BCCED4;
}
100% {
border-color: #5697fc;
}
}
@keyframes border-after {
0% {
height: 2px;
width: 0;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
24.99% {
width: calc(100% + 2px);
height: 2px;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
25% {
width: 2px;
height: 0;
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
49.99% {
width: 2px;
height: calc(100% + 2px);
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
50% {
width: 0;
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
74.99% {
width: calc(100% + 2px);
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
75% {
width: 2px;
height: 0;
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
100% {
width: 2px;
height: calc(100% + 2px);
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
}
<div class="contest-types" id="group">
</div>
关于html - DIV 左上角 CSS 动画后的额外像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52010455/