如何在输入焦点上为渐变边框设置动画？答案

【问题标题】：How to animate a gradient border on input focus?如何在输入焦点上为渐变边框设置动画？
【发布时间】：2019-05-29 05:06:20
【问题描述】：

我正在尝试为输入焦点上的渐变边框设置动画。下面的例子是我想要实现的，但是如何将它扩展到渐变边框呢？

感谢您的帮助！

:focus{outline: none;}

.wrapper{position: relative; width:200px}
input[type="text"]{width: 100%; box-sizing: border-box}

.effect-9 ~ .focus-border:before,
.effect-9 ~ .focus-border:after{content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.2s; transition-delay: 0.2s;}
.effect-9 ~ .focus-border:after{top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s;}
.effect-9 ~ .focus-border i:before,
.effect-9 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.2s;}
.effect-9 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s;}
.effect-9:focus ~ .focus-border:before,
.effect-9:focus ~ .focus-border:after{width: 100%; transition: 0.2s; transition-delay: 0.6s;}
.effect-9:focus ~ .focus-border:after{transition-delay: 0.2s;}
.effect-9:focus ~ .focus-border i:before,
.effect-9:focus ~ .focus-border i:after{height: 100%; transition: 0.2s;}
.effect-9:focus ~ .focus-border i:after{transition-delay: 0.4s;}

<div class="wrapper">
  <input class="effect-9" type="text">
  <span class="focus-border">
    <i></i>
  </span>
</div>

【问题讨论】：

这可能对你有帮助：stackoverflow.com/a/48695388/8620333 你可以只用一个元素和背景做同样的事情，然后你可以轻松调整颜色以使其成为渐变
您是否尝试过将背景渐变与背景大小和位置混合。我的一个老例子 codepen.io/gc-nomade/details/pKwby 灵感来自 codepen.io/gc-nomade/pen/HcDFk，当时 SVG 使用起来不太方便 :)

标签： html css border css-animations

【解决方案1】：

:focus{outline: none;}

.wrapper{position: relative; width:500px; }
input[type="text"]{width: 100%; height: 60px; box-sizing: border-box;font-size: 20px; padding: 0 10px;}

.effect-9 ~ .focus-border:before,
.effect-9 ~ .focus-border:after{content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background: linear-gradient(to right, rgba(75,105,142,0.65) 0%,rgba(0,0,0,0) 100%); transition: 0.2s; transition-delay: 0.2s;}
.effect-9 ~ .focus-border:after{top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s;}
.effect-9 ~ .focus-border i:before,
.effect-9 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background: linear-gradient(to bottom, rgba(75,105,142,0.65) 0%,rgba(0,0,0,0) 100%); transition: 0.2s;}
.effect-9 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s;}
.effect-9:focus ~ .focus-border:before,
.effect-9:focus ~ .focus-border:after{width: 100%; transition: 0.2s; transition-delay: 0.6s;}
.effect-9:focus ~ .focus-border:after{transition-delay: 0.2s;}
.effect-9:focus ~ .focus-border i:before,
.effect-9:focus ~ .focus-border i:after{height: 100%; transition: 0.2s;}
.effect-9:focus ~ .focus-border i:after{transition-delay: 0.4s;}

检查是否是您要查找的内容，更改了一些高度和宽度以提高可见性

【讨论】：