css-transitions - 页面laod上的边框过渡/旋转
问题描述
我的过渡有些困难。如果你检查我的 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>
解决方案
推荐阅读
- opencv - 使用 python 使用 EventGridEvent 处理创建的 blob
- wordpress - Wordpress:修改主题配置后,高级自定义字段未显示在前端的帖子中
- javascript - 将我的项目连接到 Mongodb 时出错,我该如何解决?
- grails - Grails 4、Ubuntu 20、嵌入式 Tomcat - 请求中没有多部分文件
- linux - 在 Azure Linux Ubuntu 18.04 VM 上发布 Asp.net Core 3.1 Web Api
- javascript - Discord.js 响应多种类型的表情符号
- python - 我需要帮助我的 Python Jarvis 助手
- gitlab - 如何通过网络在本地运行 gitlab
- python - 字典和文件:当我使用 defaultdict 时,普通的字典不起作用,反之亦然。为什么?
- typescript - TypeScript:字符串操作属性/字段名称