html - 使用 HTML 和 CSS 修复按钮动画
问题描述
我有一个用 HTML 和 CSS 制作的基本按钮,当悬停在它上面时会显示一个文本。我想纠正动画效果,这不太正确。
当光标移开时,动画会急剧减小按钮的大小。那么也许它可以通过过渡效果来完成?
我希望我足够清楚!
.home-button {
line-height: 100%;
padding: 5px 40px 5px 5px;
font-family: Arial;
font-size: 12px;
position: relative;
}
.home-button span {
position: absolute;
top: 20px;
opacity: 0;
font-weight: 600;
color: #454b54;
}
.home-button:hover {
animation-name: enlarge;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.home-button:hover span {
animation-name: appear;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
.home-button::before {
margin-right: 5px;
background-image: url(https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/d7bb4928-a156-4682-9677-d0d5b47c3a21.png);
background-size: 40px 40px;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100%;
content: "";
}
.home-complement-button {
background-color: #fff;
border-radius: 100px;
box-shadow: 0 4px 8px #dadce0;
transition: 0.3s;
}
.home-complement-button:focus {
background-color: #e8f0fb !important;
}
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes enlarge {
from {
padding-right: 40px;
}
to {
padding-right: 50px;
}
}
<div style="display:flex;user-select:none"><a class="home-button home-complement-button" href="https://esims.one/" style="-webkit-tap-highlight-color:rgba(0,0,0,0);text-decoration:none"><span>Home</span></a></div>
解决方案
你不需要为此使用动画。只需使用过渡。这更流畅。
.home-button {
line-height: 100%;
padding: 5px 40px 5px 5px;
font-family: Arial;
font-size: 12px;
position: relative;
transition: 1s;
}
.home-button span {
position: absolute;
top: 20px;
opacity: 0;
font-weight: 600;
color: #454b54;
}
.home-button:hover {
padding-right: 50px;
}
.home-button:hover span {
transition: opacity 1.5s; /* I added the transition here because I want it to take 0 seconds when come back. */
opacity: 1;
}
.home-button::before {
margin-right: 5px;
background-image: url(https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/d7bb4928-a156-4682-9677-d0d5b47c3a21.png);
background-size: 40px 40px;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 100%;
content: "";
}
.home-complement-button {
background-color: #fff;
border-radius: 100px;
box-shadow: 0 4px 8px #dadce0;
transition: 0.3s;
}
.home-complement-button:focus {
background-color: #e8f0fb !important;
}
<div style="display:flex;user-select:none"><a class="home-button home-complement-button" href="https://esims.one/" style="-webkit-tap-highlight-color:rgba(0,0,0,0);text-decoration:none"><span>Home</span></a></div>
推荐阅读
- java - 接收方不可用时 ActiveMQ 消息丢失
- r - 如何在 Ui 中返回服务器对象?
- javascript - 单击按钮时无法将值传递给函数
- elasticsearch - 如何使用匹配的_version查询父/子关系?
- javascript - 添加到购物车
- javascript - 当单击从父组件传递时,为什么子组件未定义“this”?
- regex - Environment Modules: is-loaded 可以查找一系列模块文件名吗?
- python - 获取特定 NCT ID 历史记录的临床试验
- c# - (Unity) AdMob 问题 RealAds 未显示
- java - 如何使用 Spring Cloud Stream 指定向 RabbitMQ 发送消息的超时时间?