【每日一练】81—CSS实现输入文本动画效果

共 2047字，需浏览 5分钟

· 2022-10-15

我们练习的这个效果，是一个登录页面的文本信息输入的动画效果，具体效果如下：

看完了效果，我们再来看一下代码实现过程，具体代码如下：

HTML代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>【每日一练】81—CSS实现输入文本动画效果</title></head><body>  <div class="inputBox">    <input type="text" required="required">    <span>昵称</span>    <i></i>  </div>  <div class="inputBox">    <input type="text" required="required">    <span>真名</span>    <i></i>  </div></body></html>

CSS代码：

*{  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: 'Poppins', sans-serif;}body {  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  flex-direction: column;  gap: 30px;  background: #222;}.inputBox {  position: relative;  width: 250px;}.inputBox input {  width: 100%;  padding: 10px 0 5px;  background: transparent;  outline: none;  box-shadow: none;  border: none;  color: #fff;  font-size: 1em;  letter-spacing: 0.1em;  transition: 0.5s;}.inputBox span {  position: absolute;  left: 0;  padding: 10px 0 5px;  pointer-events: none;  font-size: 1em;  color: rgba(255,255,255,0.5);  text-transform: uppercase;  letter-spacing: 0.1em;  transition: 0.5s;}.inputBox input:valid ~ span,.inputBox input:focus ~ span {  color: #2196f3;  transform: translateY(-16px);  font-size: 0.65em;}.inputBox i {  position: absolute;  left: 0;  bottom: 0;  width: 100%;  height: 2px;  background: #fff;  overflow: hidden;}.inputBox i::before {  content: '';  position: absolute;  left: -100%;  width: 100%;  height: 100%;  background: linear-gradient(90deg,#ff1b69,#ff0,#2196f3,#9c27b0,#ff1b69);  animation: animate 2s linear infinite;  transition: 0.5s;}.inputBox input:valid ~ i::before,.inputBox input:focus ~ i::before {  left: 0;} @keyframes animate {  0%   {    background-position-x: 0;  }  100%   {    background-position-x: 250px;  }}

写在最后

以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能
请点击下方公众号

【每日一练】81—CSS实现输入文本动画效果

学习更多技能请点击下方公众号

学习更多技能
请点击下方公众号