CSS筆記 - SVG Polyline 圖片繪製動畫邊框

時間 2019-11-16

標籤 css 筆記 svg polyline 圖片繪製動畫邊框欄目 CSS 简体版

原文原文鏈接

  <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>

1. HTML5的SVG繪圖筆記2：繪製SVG基本圖形
2. 《SVG 動畫開發實戰》 - ✏️ SVG 描邊動畫（Stroke）
3. SVG繪製環圖
4. svg動畫（跟着圖片描邊）
5. SVG 邊框 (stroke) 基本知識以及 SVG 邊框動畫
6. css邊框動畫
7. svg描邊動畫原理
8. SVG筆記
9. svg繪製折線圖
10. HTML5的SVG繪圖筆記6：濾鏡
更多相關文章...
• SVG - SVG 教程
• R 繪圖 - 餅圖 - R 語言教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 漫談MySQL的鎖機制

相關標籤/搜索