2018年07月19日(木)

このCSSアニメーションのアイデアすごい！CSSの疑似クラスで実装するフローティングラベル

• 0
• 110
• 47
• 141

* {

  box-sizing: border-box;

}

.inp {

  position: relative;

  margin: auto;

  width: 100%;

  max-width: 280px;

}

.inp .label {

  position: absolute;

  top: 16px;

  left: 0;

  font-size: 16px;

  color: #9098a9;

  font-weight: 500;

  transform-origin: 0 0;

  transition: all 0.2s ease;

}

.inp svg {

  position: absolute;

  left: 0;

  bottom: 0;

  height: 26px;

  fill: none;

}

.inp svg path {

  stroke: #c8ccd4;

  stroke-width: 2;...