D19看YT學 CSS動畫_方形動畫

2022 iThome 鐵人賽

DAY 19

自我挑戰組

CSS UI(動畫)相關系列第 19 篇

14th鐵人賽

kypss95120

2022-10-03 18:49:48

270 瀏覽

分享至

今天的參考
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%;
	}
}

成果

今天先這樣，明天找別的