跑马灯边框、动态边框的实现

最新推荐文章于 2024-04-16 14:16:52 发布

cobek

最新推荐文章于 2024-04-16 14:16:52 发布

阅读量306

点赞数

分类专栏： JavaScript 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/cobek/article/details/127312218

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
    <html>
    <head>
        <!-- 声明当前页面的编码集： chartset=gbk,gb2312(中文编码)， utf-8（国际编码） -->
        <meta charset="UTF-8">
        <!-- 当前页面三要素 -->
        <title>动态边框</title>
        <meta name="keywords" >
        <meta name="description">
        <style>
            /* 重置浏览器默认样式 start */
            * { margin: 0; padding: 0; }
            body {
              background: #212534;
              margin: 0;
              padding: 0;
              height: 100vh;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
            }
            a { text-decoration: none; }
            ul li { list-style: none; }
            /* 重置浏览器默认样 end */
            .spin {
              overflow: hidden;
              position: relative;
              width: 300px;
              height: 300px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .spin-circle {
              position: absolute;
              width: 500px;
              height: 500px;
              border-radius: 50%;
              background: linear-gradient(#e1ff5d, #209471, #2c0270, #910472) ;
              z-index: -1;
              animation: spin 2s linear infinite;
            }
            .pause {
              animation-play-state: paused;
            }
            .content {
              width: 280px;
              height: 280px;
              background: linear-gradient(#d9c9e0, #b0a3b6, #97879e, #8543a3);
            }
            @keyframes spin {
              0% {
                transform: rotate(0);
              }
              100% {
                transform: rotate(360deg);
              }
            }
            button {
              margin-top: 20px;
              width: 150px;
              height: 50px;
              font-size: 20px;
              border-radius: 10px;
            }
        </style>
    </head>
    <body>
      <div class="spin">
        <div class="spin-circle"></div>
        <div class="content"></div>
      </div>
      <button onclick="onPause()">暂停/播放</button>
    </body>
</html>
<script>
  function onPause() {
    let el = document.querySelector('.spin-circle');
    if (el.classList.contains('pause')) {
      el.classList.remove('pause');
    } else {
      el.classList.add('pause');
    }
  }
</script>