按钮上的 HTML/CSS 底部边框动画
[英]HTML/CSS Bottom Border animated on button
问题描述
Im new to css and html and im trying to make a good looking website for my FiveM RP Server, and im having issues with the buttons
我是 css 和 html 的新手，我试图为我的 FiveM RP 服务器制作一个漂亮的网站，但我的按钮有问题
i wanna make the bottom line animated from center我想让底线从中心动画
a:visited{ color: white; text-decoration: none; } a:link{ color: white; text-decoration: none; } a:after { border-bottom: solid 3px #019fb6; transform: scaleX(0); transition: transform 250ms ease-in-out; } a:hover{ color: green; border-bottom:3px solid #004F10; transform:scaleX'(1); } a:active{ color: darkgreen; }
<body> <header> <ul> <h2><a href="index.html">Home</a></h2> <h2><a href="rules.html">Rules</a></h2> <h2><a href="https://www.discord.gg/K935Cry73b">Discord</a></h2> </ul> </header>3 个解决方案
解决方案1
0 2021-11-28 14:55:22
I have displayed the "a" tag as an inline-block so that it doesn't occupy the whole container width.我已将“a”标签显示为内联块，这样它就不会占据整个容器宽度。
In your code, you forgot to add content property.在您的代码中，您忘记添加内容属性。 And the hover is applied to the::after selector of the "a" tag not the "a" tag itself.并且 hover 应用于“a”标签的::after 选择器，而不是“a”标签本身。 Here is the fix to your code.这是对您的代码的修复。
a{
display: inline-block;
color: white;
text-decoration: none;
}
a::after {
display: block;
content: '';
border-bottom: solid 3px darkgreen;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
a:hover::after{
transform: scaleX(1);
}
a:active{
color: darkgreen;
}
a:visited{
color: white;
text-decoration: none;
}
解决方案2
0 2021-11-28 15:01:00
Check this CodePen from Peter, he did exactly what you want.检查彼得的这个 CodePen，他完全按照你的意愿做了。
Code:代码：
<nav>
<div id="wrapper">
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li class="different"><a href="">item3</a></li>
<li class="different"><a href="">item4</a></li>
</ul>
</div>
</nav>
CSS: CSS：
body, html{
width:100%;
height:100%;
background-color: #999999;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
list-style:none;
font-family: Helvetica;
}
nav{
width: 100%;
height: 50px;
position: fixed;
top: 0;
left:0;
background-color: #333333;
}
#wrapper{
width: 100%;
height: 100%;
overflow: hidden;
display: block;
float: left;
}
#wrapper ul{
diplay: block;
width: 50%;
margin: 0 auto;
height: 100%;
text-align: center;
}
#wrapper li{
display: block;
float: left;
text-align: center;
width: 25%;
height: 100%;
transition: all ease-in-out .2s;
}
#wrapper a{
display: block;
float: left;
color: white;
width: 100%;
padding: 0 .5em;
line-height: 50px;
text-decoration: none;
font-weight: bold;
}
li.different{
border:none;
position: relative;
}
li.different:hover{
border: none;
}
li:hover {
border-bottom: 5px solid #FFFFFF;
}
.different::after{
content: '';
position: absolute;
width: 0px;
height: 5px;
left: 50%;
bottom:0;
background-color: white;
transition: all ease-in-out .2s;
}
.different:hover::after{
width: 100%;
left: 0;
}
解决方案3
0 2021-11-28 15:01:57
There are total 3 animation.共有 3 个 animation。
1st with default top-down animation.第一个默认自上而下 animation。
2nd with fade animation第二个带渐变 animation
3rd with fade and scale animation.第三个带有渐变和缩放 animation。
.main-container{ display: flex; } /* First tag */.testAni { font-size: 50px; display: inline-block; position: relative; color: darkgreen; text-decoration: none; margin-right: 20px; }.testAni:after { content: ''; position: absolute; border-bottom: 5px solid darkgreen; width: 100%; left: 0; top: 30px; transition: 0.5s all ease; }.testAni:hover:after { top: 100%; } /* Second tag */.testAni2:after { content: ''; position: absolute; border-bottom: 5px solid darkgreen; width: 100%; left: 0; top: 30px; transition: 0.5s all ease; opacity: 0; }.testAni2:hover:after { top: 100%; opacity: 1; } /* Third tag */.testAni3:after { content: ''; position: absolute; border-bottom: 5px solid darkgreen; transform: scale(0.1); left: 0; top: 30px; transition: 0.5s all ease; opacity: 0; }.testAni3:hover:after { top: 100%; transform: scale(1); opacity: 1; }
<div class="main-container"> <h2><a class="testAni" href="index.html">Home</a></h2> <h2><a class="testAni testAni2" href="index.html">Home</a></h2> <h2><a class="testAni testAni2 testAni3" href="index.html">Home</a></h2> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.