css动态边框

CiL#

已于 2024-09-27 11:10:17 修改

阅读量205

点赞数 1

分类专栏： CSS 文章标签： css 前端

于 2024-09-27 11:01:25 首次发布

本文链接：https://blog.csdn.net/KMINLIKE/article/details/142587874

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考：

Clip-path实现按钮流动边框动画_在线clip-path-CSDN博客

https://www.5axxw.com/questions/simple/9ju5yt#google_vignette

              <div class="bottom-top-item-centent bottom-top-item-left">
                <vue-seamless-scroll :data="listLeftData" :class-option="defaultLeftOption">
                  <ul class="ul-scoll">
                    <li v-for="(item, index) in listLeftData" :key='index'>
                      <span class="title">{{ item.title }}</span>
                      <span class="date">{{ item.time }}</span>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>

            .bottom-top-item-left {
              width: 94%;
              height: 130px;
              overflow: hidden;
              border: 1px solid #283dff;
              // animation: border-flow 2s linear infinite;
              position: relative;
              transition: all .5s;


              .ul-scoll {
                padding: 10px;
                margin: 0 auto;
                border: 2px solid transparent;


                /* 背景不重复 */
                li {
                  list-style: none;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin: 4px;
                  padding: 2px;
                  color: #fff;
                  font-size: 14px;
                  // background: rgba(198, 142, 226, 0.2);
                }

                &:last-child {
                  padding: 0;

                  li {
                    &:last-child {
                      // padding: 0 2px;
                      padding-bottom: 0;
                      margin: 0 4px;
                    }

                    &:first-child {
                      margin-top: 0;
                    }
                  }
                }
              }

              &::after,
              &::before {
                content: "";
                position: absolute;
                border: 2px solid rgb(216, 125, 13);
                width: 99%;
                height: 126px;
                // border-radius: 10px;
                /* 简写为 */
                inset: 0px;
                /* 添加动画 */
                animation: pathRotate 3s infinite linear;
              }

              &::before {
                // border-color: rgb(250, 255, 192);
                border-color: #0efcff;
              }

              @keyframes pathRotate {

                0%,
                100% {
                  clip-path: inset(0 0 98% 0);
                  // border-image: linear-gradient(to right, #f0c3e3 0%, #8ec5fc 100%);
                  // border-image-slice: 1;
                }

                25% {
                  clip-path: inset(0 98% 0 0);
                  // border-image: linear-gradient(to right, #8ec5fc 0%, #f0c3e3 100%);
                  // border-image-slice: 1;
                }

                50% {
                  clip-path: inset(98% 0 0 0);
                }

                75% {
                  clip-path: inset(0 0 0 98%);
                }
              }

              &::after {
                animation-delay: -1.5s;
              }

              &:hover {
                filter: brightness(1.5);
              }

            }

            // @keyframes border-flow {
            //   0% {
            //     border-left-color: #000;
            //     border-top-color: #afc;
            //   }

            //   25% {
            //     border-top-color: transparent;
            //     border-right-color: #afc; //#bcf;
            //   }

            //   50% {
            //     border-right-color: transparent;
            //     border-bottom-color: #afc; // pink;
            //   }

            //   75% {
            //     border-bottom-color: transparent;
            //     border-left-color: #afc; // #dcf;
            //   }

            //   100% {
            //     border-left-color: transparent;
            //     border-top-color: #afc; // hotpink;
            //   }
            // }