CSS实例吧+ 关注 关注: 帖子:1

  纯CSS 加载LOADING动画

  • 123@123.com

    2024-05-18_121151.png

    <!DOCTYPE html>

    <html>

      <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>网站升级中……敬请期待</title>

        <style>

          body {

            margin: 0;

            padding: 0;

            font-family: Arial, Helvetica, sans-serif;

            background-color: #f8f8f8;

          }

          .container {

            width: 100%;

            height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

          }

          .loading {

            width: 60px;

            height: 60px;

            border-radius: 50%;

            border-top: 6px solid #3498db;

            border-right: 6px solid transparent;

            animation: spin 1s linear infinite;

          }

          .text {

            margin-left: 20px;

            font-size: 24px;

            font-weight: bold;

            color: #000;

            text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);

          }

          .contact {

            margin-top: 30px;

            font-size: 16px;

            color: #000;

            text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);

          }

          @keyframes spin {

            0% {

              transform: rotate(0deg);

            }

            100% {

              transform: rotate(360deg);

            }

          }

        </style>

      </head>

      <body>

        <div>

          <div></div>

          <div>网站升级中……敬请期待</div>

        </div>

        <div>

          

        </div>

      </body>

    </html>


    1楼  2024/5/18 12:12:09  回复

  发表回复

    发帖