html - 链接悬停动画问题(骑士动画)
问题描述
我创建了运行悬停链接的动画。
我使用输入和输出关键帧创建了动画。
但我有问题。我认为这是因为骑士出动动画。但我需要那个鼠标离开。
问题是页面加载时它会自动运行。代码笔链接
.container {
padding: 50px;
max-width: 500px;
}
.dashBottom {
padding-left: 0px;
position: relative;
padding-bottom: 15px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: black;
text-decoration: none;
}
.dashBottom:after {
position: absolute;
content: "";
bottom: 0px;
width: 30px;
background-color: black;
height: 4px;
left: 0;
right: auto;
-webkit-animation: knight-rider-out 0.5s;
animation: knight-rider-out 0.5s;
animation-fill-mode: forwards;
}
.dashBottom:hover:after {
-webkit-animation: knight-rider-in 0.5s;
animation: knight-rider-in 0.5s;
animation-fill-mode: forwards;
}
@keyframes knight-rider-in {
from {
left: 0px;
width: 30px;
}
50% {
left: 0px;
width: 100%;
}
to {
left: calc( 100% - 30px);
width: 30px;
}
}
@keyframes knight-rider-out {
from {
left: calc( 100% - 30px);
width: 30px;
}
50% {
left: 0px;
width: 100%;
}
to {
left: 0px;
width: 30px;
}
}
<div class="container">
<a class="viewMore dashBottom" href="#">View More</a>
</div>
解决方案
为避免这种情况,您可以考虑过渡。这是用更少的代码实现相同效果的另一种方法:
.container {
padding: 50px;
max-width: 500px;
}
.dashBottom {
padding-left: 0px;
position: relative;
padding-bottom: 15px;
transition: all 0.3s;
color: black;
text-decoration: none;
background-image:linear-gradient(#000,#000);
background-size: 200% 4px;
background-position: calc(200% + 30px) 100%;
background-repeat:no-repeat;
transition:0.5s all;
}
.dashBottom:hover {
background-position:calc(-100% - 30px) 100%;
}
<div class="container">
<a class="viewMore dashBottom" href="#">View More</a>
</div>
推荐阅读
- google-cloud-platform - Google 专业云架构师考试 - BigQuery 与 Cloud Spanner
- javascript - React 中的条件对象属性
- typescript - 通过从接口中提取类型来创建接口
- excel - 将多个参数传递给函数以检查数组中的重复值
- angular - Angular 8:FormGroup 更新后不禁用材质输入
- java - 错误:找不到符号方法 setAdListener(
) & ( ) - r - 如何在 gganimate gif 中显示标题中的日期?
- javascript - How do i pick a specific value on a JSON (Webhook) Data?
- matlab - 如何使用 MATLAB 根据另一列对单列中的数据进行分组
- angular - 角度:MatDateRangeInput 过滤器