css画制流体边框

_LIU_A

已于 2023-06-11 14:16:55 修改

阅读量109

点赞数

分类专栏： css动画文章标签： css html 前端

于 2023-06-11 14:14:51 首次发布

本文链接：https://blog.csdn.net/m0_52410816/article/details/131152888

版权

css动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html结构

 <div class="box">
        <div class="text"> CSS</div>
    </div>

CSS：

父盒子样式

 .box {
        width: 200px;
        height: 300px;
        background-color: rgb(15, 15, 15);
        position: relative;
        left: 100px;
        top: 100px;
        border-radius: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

字体样式

 .box .text {
        color: white;
        font-size: 4em;
        text-shadow: 2px 2px pink;
        z-index: 1;
    }

为父盒子添加before伪元素

  .box::before {
        content: '';
        display: block;
        position: absolute;
        width: 100px;
        height: 360px;
        background: linear-gradient(#00ccff, #d500f9);
        animation: text 6s linear infinite;  //为伪元素设置动画
        border-radius: 5px;
    }

为父盒子添加after伪元素

 .box::after {
        content: '';
        position: absolute;
        inset: 6px;
        background-color: black;
    }

定义动画

 /* 定义动画 */
    @keyframes text {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }