我在过渡时遇到了一些困难。 如果检查我的CodePen,您会看到边框在悬停时旋转,最终结果是一个完整的圆圈。
这是我想要的效果,但是,我希望这种情况在页面加载时发生。
因此,页面加载后,边框就会旋转一次,直到我们有一个完整的360度圆。
我怀疑需要这样做@Keyframes,但是到目前为止我还没有看。
我已经在互联网上进行搜索,试图弄清楚这一点,但我没有运气。
在此方面的任何帮助将不胜感激。
谢谢。
https://codepen.io/naomi-sharif/pen/pxyaRy?editors=1100
button {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px $red;
color: $red;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
&::before,
&::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
}
// Border spins around element
// ::before holds three borders that appear separately, one at a time
// ::after holds one border that spins around to cover ::before's borders, making their appearance seem smooth
.spin {
width: 5em;
height: 5em;
padding: 0;
&:hover {
color: $blue;
}
&::before,
&::after {
top: 0;
left: 0;
}
&::before {
border: 2px solid transparent; // We're animating border-color again
}
&:hover::before {
border-top-color: $blue; // Show borders
border-right-color: $blue;
border-bottom-color: $blue;
transition:
border-top-color 0.15s linear, // Stagger border appearances
border-right-color 0.15s linear 0.10s,
border-bottom-color 0.15s linear 0.20s;
}
&::after {
border: 0 solid transparent; // Makes border thinner at the edges? I forgot what I was doing
}
&:hover::after {
border-top: 2px solid $blue; // Shows border
border-left-width: 2px; // Solid edges, invisible borders
border-right-width: 2px; // Solid edges, invisible borders
transform: rotate(270deg); // Rotate around circle
transition:
transform 0.4s linear 0s,
border-left-width 0s linear 0.35s; // Solid edge post-rotation
}
}
.circle {
border-radius: 100%;
box-shadow: none;
&::before,
&::after {
border-radius: 100%;
}
}
<section class="buttons">
<button class="spin circle">1</button>
</section>