七夏 发表于 2024-11-6 17:19:47

CSS特效丨自定义文本框，浮动标签动画（第二版）！

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/dLtTnNkuaUxFvIgSeMBm8nquennxMZcSyia5yVOy7TBQjsLeictMPmDoffJZfBRLk4I2YAHEZ7w3icw1ZiahfLdMcQ/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)

```
<body>
 <div class="form-control">
   <input type="value" required="">
   <label>
     <span style="transition-delay:0ms">U</span>
     <span style="transition-delay:50ms">s</span>
     <span style="transition-delay:100ms">e</span>
     <span style="transition-delay:150ms">r</span>
     <span style="transition-delay:200ms">n</span>
     <span style="transition-delay:250ms">a</span>
     <span style="transition-delay:300ms">m</span>
     <span style="transition-delay:350ms">e</span>
   </label>
 </div>
</body>
```

```
<style>
 body {
   padding: 200px;
   background-color: #000;
 }


 .form-control {
   position: relative;
   margin: 20px 0 40px;
   width: 190px;
 }


 .form-control input {
   background-color: transparent;
   border: 0;
   border-bottom: 2px #fff solid;
   display: block;
   width: 100%;
   padding: 15px 0;
   font-size: 18px;
   color: #fff;
 }


 .form-control input:focus,
 .form-control input:valid {
   outline: 0;
   border-bottom-color: lightblue;
 }


 .form-control label {
   position: absolute;
   top: 15px;
   left: 0;
   pointer-events: none;
 }


 .form-control label span {
   display: inline-block;
   font-size: 18px;
   min-width: 5px;
   color: #fff;
   transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }


 .form-control input:focus+label span,
 .form-control input:valid+label span {
   color: lightblue;
   transform: translateY(-30px);
 }
</style>
```
页: [1]
查看完整版本: CSS特效丨自定义文本框，浮动标签动画（第二版）！