【前端设计】输入框

最新推荐文章于 2024-10-16 16:25:58 发布

@fishv

最新推荐文章于 2024-10-16 16:25:58 发布

阅读量584

点赞数 12

分类专栏： css案例文章标签：前端

本文链接：https://blog.csdn.net/weixin_55939638/article/details/135733195

版权

css案例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和CSS创建一个具有动态波浪动画的输入框，以及如何为前端项目添加创意元素，提升用户体验。

摘要由CSDN通过智能技术生成

欢迎来到前端设计专栏，本专栏收藏了一些好看且实用的前端作品，使用简单的html、css语法打造创意有趣的作品，为网站加入更多高级创意的元素。

html

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <link rel="stylesheet" href="./card1.css">

</head>
<body>
<div class="wave-group">
  <input required="" type="text" class="input">
  <span class="bar"></span>
  <label class="label">
    <span class="label-char" style="--index: 0">N</span>
    <span class="label-char" style="--index: 1">a</span>
    <span class="label-char" style="--index: 2">m</span>
    <span class="label-char" style="--index: 3">e</span>
  </label>
</div>
</body>
</html>

css

.wave-group {
  position: relative;
}

.wave-group .input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 200px;
  border: none;
  border-bottom: 1px solid #515151;
  background: transparent;
}

.wave-group .input:focus {
  outline: none;
}

.wave-group .label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  display: flex;
}

.wave-group .label-char {
  transition: 0.2s ease all;
  transition-delay: calc(var(--index) * .05s);
}

.wave-group .input:focus ~ label .label-char,
.wave-group .input:valid ~ label .label-char {
  transform: translateY(-20px);
  font-size: 14px;
  color: #5264AE;
}

.wave-group .bar {
  position: relative;
  display: block;
  width: 200px;
}

.wave-group .bar:before,.wave-group .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.wave-group .bar:before {
  left: 50%;
}

.wave-group .bar:after {
  right: 50%;
}

.wave-group .input:focus ~ .bar:before,
.wave-group .input:focus ~ .bar:after {
  width: 50%;
}