今天的參考
https://www.youtube.com/watch?v=nor4VK9al4c&list=PL5e68lK9hEzd-ZM4Km6xUia-mxQp52G6U&index=12
程式碼意外的短
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>測試</title>
<link href="C1.css" rel="stylesheet">
</head>
<body>
<svg><rect></rect></svg>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000000;
}
svg{
width: 100px;
height: 100px;
}
svg rect{
width: 100px;
height: 100px;
fill: none;
stroke: #F85DFF;
stroke-width: 100px;
stroke-dasharray: 100;
stroke-dashoffset: 50%;
animation: SQ 2s linear infinite;
}
@keyframes SQ{
to{
stroke-dashoffset: 250%;
}
}
成果
今天先這樣,明天找別的