如何叠加一个textarea和一个SVG [英] How to superpose a textarea and a SVG

问题描述

我有两个div：

Svg：

 < svg class =graphwidth =400pxheigth =100px viewBox =0 0 400 100preserveAspectRatio =none> 
 < / svg> 
  

Textarea：

 < textarea placeholder =message>< / textarea> 
  

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

以下是两个元素独立工作的代码：
http://codepen.io/Dipiks/pen/ogMErr

解决方案

您可以使用背景并为它们设置动画效果：

  textarea {resize：none;边界：无;边界半径：0;宽度：400像素;高度：100像素;左：10px的;位置：相对;显示：块;文本对齐：左;光标：左;背景：＃f0f0f0; -webkit-appearance：none;背景：线性渐变（向左，黑色，黑色）不重复，线性渐变（向上，黑色，黑色）不重复，线性渐变（向右，黑色，黑色）不重复，线性渐变（底部，黑色，黑色）不重复;背景位置：左下角，右侧100px，500px顶部，左侧-100px; background-size：100％2px，2px 100％;动画：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％{背景位置：左下角，右侧0,0顶部，左侧-100px; } 100％{背景位置：左下角，右侧0,0顶部，左侧0; }} @ keyframes bordout {33％{background-position：left bottom，right 0，500px top，left -100px;}} } 66％{背景位置：左下角，右侧0,0顶部，左侧-100px; } 100％{背景位置：左下角，右侧0,0顶部，左侧0; }}  

< textarea placeholder =message> < / textarea>

或者在 codepen （带自动前缀）与
一起玩

I'm trying to make an animation (With a SVG Path) on a textarea:

I have two 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>

I'm trying to superpose the two element (svg element below the textarea). The svg will be the border of the textarea.

Here is the codepen of the two element working separately : http://codepen.io/Dipiks/pen/ogMErr

The SVG react on hover.

解决方案

You may just use backgrounds and animate them :

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>

or inside a codepen (with auto prefix) to play with

这篇关于如何叠加一个textarea和一个SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！