如何解决如何使宽度属性从右到左而不是从左到右开始
我希望 [HttpGet]
public async Task<JsonResult> Get(CancellationToken cancellationToken)
{
var output = await ; //start worker
return new JsonResult(output);
}
动画在 ::before
时从右到左开始,当您将其悬停时,动画从左到右(返回)width: 100%;
有没有办法做到这一点css?
width: 0;
span {
display: inline-block;
text-align: center;
line-height: 40px;
transition: ease-in-out 3s;
}
span::before,span::after{
content: " ";
display: block;
width: 100%;
height: 5px;
background-color: red;
transition: ease-in-out 3s;
}
span::before {
left: auto;
bottom: auto;
right: 0;
top: 2px;
transition: ease-in-out 3s;
}
span:hover::after,span:hover::before{
width: 0;
transition: ease-in-out 3s;
}
.kotak:hover {
width: 0%;
}
解决方法
简化您的逻辑,如下所示。在left
和right
之间切换以控制位置
span {
display: inline-block;
line-height: 40px;
background:
linear-gradient(red 0 0) top right,linear-gradient(red 0 0) bottom left;
background-repeat:no-repeat;
background-size:100% 5px;
transition: ease-in-out 1s,background-position 0s 1s;
/* or simply transition: ease-in-out 1s */
}
span:hover{
background-size:0% 5px;
background-position: /* remove this to keep the same position */
top left,bottom right
}
<span>PLACEHOLDER</span>
经过一些测试,我终于找到了我的问题的答案 我在代码片段中添加了注释
/* Use Parent set to relative to contain absolute */
.box {
position: relative;
display: inline-block;
margin-bottom : 20px;
line-height: 60px;
}
/* Set Position to Absolute so we can use top,right,bottom,left */
.box::before,.box::after {
content: "";
display: block;
position: absolute;
background-color: blue;
width: 100%;
height: 10px;
bottom: 0;
transition: 3s;
}
/* Set to right so the ::before start from right side to the left */
.box::before {
top: 0;
right: 0px;
}
.box:hover::after,.box:hover::before {
width: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">PLACE HOLDERDERER</div>
</body>
</html>