Html 过渡起源

我目前正在制作一个非常简单的登录页面。我希望在

.form-input[type=“text”]：focus、.form-input[type=“password]

之间进行转换，而不是逐渐淡入颜色，而是从左向右切换新颜色

这是我的密码：

。表单输入[type=“text”]，
.表单输入[type=“password”]{
边际上限：0；
边缘底部：5px；
边界：无；
边框底宽：2px；
边框底部样式：实心；
边框底色：黑色；
背景：透明；
大纲：无；
高度：2.5vh；
颜色：黑色；
边界半径：0；
字体大小：100%；
过渡属性：边框底色；
过渡时间：350ms；
过渡计时功能：立方贝塞尔（0.4,0.0,0.2,1）；
}
.表单输入[type=“text”]：焦点，
.表单输入[type=“password”]：焦点{
边框底色：#66bb6a；
}

---

我能够做到这一点，但需要使用javascript

const-inputs=document.querySelectorAll（'.input-container-input'）；
输入。forEach（（输入）=>{
input.addEventListener（'focus'，（）=>{
input.parentElement.classList.add（'focused'）；
})
input.addEventListener（'blur'，（）=>{
input.parentElement.classList.remove（'focused'）；
})
})

。输入容器{
位置：相对位置；
显示：内联块；
}
.输入容器：在{
内容：''；
位置：绝对位置；
底部：0；
左：0；
高度：2倍；
宽度：0；
背景色：#000；
过渡：.24秒放松；
}
.输入容器输入{
边界：无；
背景：透明；
边框底部：1px实心#ccc；
大纲：无；
}
.输入容器.聚焦：之后{
宽度：100%；
}

---

我能够做到这一点，但需要使用javascript

const-inputs=document.querySelectorAll（'.input-container-input'）；
输入。forEach（（输入）=>{
input.addEventListener（'focus'，（）=>{
input.parentElement.classList.add（'focused'）；
})
input.addEventListener（'blur'，（）=>{
input.parentElement.classList.remove（'focused'）；
})
})

。输入容器{
位置：相对位置；
显示：内联块；
}
.输入容器：在{
内容：''；
位置：绝对位置；
底部：0；
左：0；
高度：2倍；
宽度：0；
背景色：#000；
过渡：.24秒放松；
}
.输入容器输入{
边界：无；
背景：透明；
边框底部：1px实心#ccc；
大纲：无；
}
.输入容器.聚焦：之后{
宽度：100%；
}

---

我已经创建了一个

span（输入栏）

，并添加了

：before

和

：after

属性，对于从左到右的移动，

before

应该是

0%

，afterr应该是

100%

。（也可以尝试在

之前
到
50%
和
之后
到
50%
并查看从中间开始的移动效果）这是我的代码


*：焦点{
大纲：无；
}
输入{
显示：块；
边界：无；
边框底部：1px实心#000；
字体系列：投石机MS；
背景：无；
}
.输入栏{
位置：相对位置；
显示：块；
宽度：290px；
}
.输入栏：在，
.输入栏：在{
内容：“；
显示：块；
位置：绝对位置；
底部：0；
宽度：0；
背景#66bb6a；
高度：2倍；
过渡：所有0.2秒缓解；
}
.输入栏：在{
右：100%；
}
.输入栏：在{
左：0%；
}
输入：焦点~。输入栏：之前，
输入：焦点~。输入栏：之后{
宽度：50%；
}
我已经创建了一个
span（输入栏）
，并添加了
：before
和
：after
属性，对于从左到右的移动，
before
应该是
0%
，after
r应该是
100%
。（也可以尝试在
之前
到
50%
和
之后
到
50%
并查看从中间开始的移动效果）这是我的代码


*：焦点{
大纲：无；
}
输入{
显示：块；
边界：无；
边框底部：1px实心#000；
字体系列：投石机MS；
背景：无；
}
.输入栏{
位置：相对位置；
显示：块；
宽度：290px；
}
.输入栏：在，
.输入栏：在{
内容：“；
显示：块；
位置：绝对位置；
底部：0；
宽度：0；
背景#66bb6a；
高度：2倍；
过渡：所有0.2秒缓解；
}
.输入栏：在{
右：100%；
}
.输入栏：在{
左：0%；
}
输入：焦点~。输入栏：之前，
输入：焦点~。输入栏：之后{
宽度：50%；
}

如果你能为你的代码创建一个or，这有助于审稿人更快地回答问题。你想要的是，当你专注于输入时，绿线不是逐渐出现，而是从左边开始，然后向右边增长。对吗？@Alvarontro是的，这就是我的目标。黑线应该还在吗？如果你能做到的话你的代码的一个或多个，这有助于审阅者更快地回答。你想要的是，当你专注于输入时，绿线不是逐渐出现，而是从左边开始，然后向右边增长。对吗？@Alvarontoro是的，这就是我的目标。黑线应该还在吗？