.box{
            position: relative;
            width:180px;
            height:250px;
            background: rgba(0,0,0,0.8);
            border-radius: 20px;
            display: flex;
            justify-content:center;
            align-items: center;
            overflow: hidden;

        }
        .box::before{
            content:'';
            position:absolute;
            width: 100px;
            height: 120%; 
            background:linear-gradient(#ffd900,#f9000c);
            animation:lineRoll 3s linear infinite;
        }
        @keyframes lineRoll{
            0%{
                transform: rotate(0deg);
            }
            50%{
                transform: rotate(180deg);

            }
            to{
                transform: rotate(360deg);
            }
        }
        .box::after{
            content: '';
            position: absolute;
            background: #795548;
            right:4px;
            top:4px;
            left:4px;
            bottom:4px;
            border-radius: 20px;  
        }
        .box h2{
            text-align: center;
            color:white;
            font-size:3em;
            text-shadow:2px 2px pink;
            z-index:1;
        }
    <div class="box"&gt;
        <h2&gt;线性流动</h2&gt;
    </div&gt;

原文地址:https://blog.csdn.net/qq_41429765/article/details/134730068

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_44250.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注