2023-03-30|閱讀時間 ‧ 約 3 分鐘

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

分享至

成為作者繼續創作的動力吧！

于正龍（Ricky）的沙龍的其他內容