CSS笔记 - SVG Polyline 图片绘制动画边框

 

  <style>
  div{
    width: 420px;
    height: 200px;
    background: url('./img/timg.jpg') no-repeat;
  }
  polyline{
    stroke: #3366cc; /* 线段颜色 */
    stroke-width: 4;  /* 线段宽度 */
    fill: none;  /* 描绘不填充 */
    stroke-dasharray: 1160px;   /* 线段总长度 */
    stroke-dashoffset: 1160px;  /* 线段未绘制的长度 */ 
    transition: .8s;
  }
  div:hover polyline{
    stroke-dashoffset: 0px;
  }
  </style>
</head>
<body>
  <div class="svgTest">
    <svg width="420" height="200">
      <polyline points="10,10 410,10 410,190 10,190 10,10"></polyline>
      <!-- 绘制路径的四个点 -->
    </svg>
  </div>

 

posted @ 2019-01-27 22:28  CarpenterZoe  阅读(1103)  评论(0)  编辑  收藏  举报