Question

我试图在textarea上制作动画（使用SVG路径）：

我有两个div：

Svg：

<svg class="graph" width="400px" heigth="100px" viewBox="0 0 400 100" preserveAspectRatio="none">
  <path d="m0,0l400,0l0,100l-400,0l0,-100z" />
</svg>

Textarea：

<textarea placeholder="message"></textarea>

我试图叠加两个元素（textarea下面的svg元素）。 svg将是textarea的边界。

这是两个单独工作的codepen： http://codepen.io/Dipiks/pen/ogMErr

SVG在悬停时作出反应。

Answer 1

您可以只使用背景并为其设置动画：

textarea{
  resize:none;
  border:none;
  border-radius:0;
  width:400px;
  height:100px;
  left:10px;
  position:relative;
  display:block;
  text-align:left;
  cursor:left;
  background: #f0f0f0;
  -webkit-appearance: none;
  background:
    linear-gradient(to left, black, black)  no-repeat,    
    linear-gradient(to top, black, black)  no-repeat,    
    linear-gradient(to right, black, black) no-repeat,    
    linear-gradient(to bottom, black, black)  no-repeat
    ;
  background-position: left bottom  ,right 100px , 500px top,left -100px ; 
  background-size: 100% 2px, 2px 100%;
  animation : bordout 0.5s linear reverse;
}
textarea:hover {
  animation : bordin 0.5s linear forwards;
}
@keyframes bordin {
  33% {
    background-position: left bottom  ,right 0, 500px top, left -100px;
  } 
  66% {
    background-position: left bottom  ,right 0 , 0 top, left -100px;
  }
  100%  {
    background-position: left bottom  ,right 0 , 0 top, left 0;
  }
}
@keyframes bordout {
  33% {
    background-position: left bottom  ,right 0, 500px top, left -100px;
  } 
  66% {
    background-position: left bottom  ,right 0 , 0 top, left -100px;
  }
  100%  {
    background-position: left bottom  ,right 0 , 0 top, left 0;
  }

}

<textarea placeholder="message"></textarea>

或在codepen内（带有自动前缀）与

一起玩

如何叠加textarea和SVG

1 个答案: