我在想如何让一个物体从中心变得更宽，而不是从左边变得更宽。 下面是我的HTML:
<html>
<body>
<a href='#'>Hover</a>
</body>
</html>
下面是我的CSS:
body{
margin:0;
padding:0;
background-color:#262626;
}
a{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
padding:10px 25px;
border:2px solid white;
text-decoration:none;
color:white;
font-family:verdana;
font-size:27px;
text-transform:uppercase;
letter-spacing:4px;
transform:1s;
}
a::before{
content:'';
position:absolute;
height:100%;
width:0%;
top:0;
left:50%;
z-index:-1;
background-image:linear-gradient(45deg, #eea949,#ff3984);
transition:.5s;
}
a:hover::before{
width:100%;
}
悬停时不是从中心加宽，而是从左边加宽。 我试过添加transform:translate（-50%，0）； 到a:Hover::之前在css中，它有点工作，但它使它有点摇晃（我不知道如何解释它）。 有人能帮个忙吗？
我想我解决了。 我向元素添加了一个::after，旋转渐变，并使::after向左50%，而使::before向右50%。 像这样:
null
body {
margin: 0;
padding: 0;
background-color: #262626;
}
a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 25px;
border: 2px solid white;
text-decoration: none;
color: white;
font-family: verdana;
font-size: 27px;
text-transform: uppercase;
letter-spacing: 4px;
transform: 1s;
}
a::before {
content: '';
position: absolute;
height: 100%;
width: 0%;
top: 0;
left: 50%;
z-index: -1;
border: none;
outline: none;
background-image: linear-gradient(45deg, #eea949, #ff3984);
transition: .5s;
}
a::after {
content: '';
position: absolute;
height: 100%;
width: 0%;
top: 0;
right: 50%;
z-index: -1;
background-image: linear-gradient(135deg, #ff3984, #eea949);
border: none;
outline: none;
transition: .5s;
}
a:hover::before {
width: 50%;
}
a:hover::after {
width: 50%;
}<html>
<body>
<a href='#'>Hover</a>
</body>
</html>
您可以只使用背景:
null
body {
margin: 0;
padding: 0;
background-color: #262626;
}
a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 25px;
border: 2px solid white;
text-decoration: none;
color: white;
font-family: verdana;
font-size: 27px;
text-transform: uppercase;
letter-spacing: 4px;
transition: 0.5s;
background: linear-gradient(45deg, #eea949, #ff3984) center/0% 100% no-repeat;
}
a:hover {
background-size: 100% 100%;
}<a href='#'>Hover</a>