chatgpt練習(1秒生成酷炫網頁特效)
<!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屬性可以實現旋轉動畫。
分享至
成為作者繼續創作的動力吧！
自吾撰文，不談虛無飄渺之成功學。吾之出身貧賤，周遭環境不賦吾以施展成功學之機。所談者，皆吾自學之過程、技巧及程式技術等實質硬功。自吾於2019年，獨自自學並考獲微軟資料科學家認證，其資歷達專業等級。曾於明志科技大學服務三年，手中之案件皆辛勤完成，此乃吾所厭惡失敗之性格所致。
