<!DOCTYPE html>
<html>
<head>
<title>旋轉矩形</title>
<style>
/* 定義黑色正方形樣式 */
#box {
width: 200px;
height: 200px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 定義螢光綠色邊條樣式 */
#border {
width: 100%;
height: 100%;
border: 5px solid #00ff00;
border-radius: 10px;
position: relative;
animation: rotate 5s linear infinite;
}
/* 定義旋轉動畫 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
/* 定義文字樣式 */
#text {
color: white;
font-size: 48px;
font-weight: bold;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div id="box">
<div id="border">
<div id="text">Line</div>
</div>
</div>
</body>
</html>
這段代碼會創建一個黑色正方形，其中包含一個螢光綠色邊條和一個顯示 "Line" 文字的正方形，邊條會逆時針旋轉。使用CSS中的position和transform屬性可以將正方形放置在畫面中央。使用animation屬性可以實現旋轉動畫。
