chatgpt練習(1秒生成酷炫網頁特效)

2023/03/30閱讀時間約 3 分鐘

<!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屬性可以實現旋轉動畫。

為什麼會看到廣告

于正龍（Ricky）的沙龍

27會員

48內容數

前往沙龍

人工智能工作經驗跟研究

前往沙龍

留言0

查看全部

發表第一個留言支持創作者！