css3 盒子线性流动效果

css 复制代码
        .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;
        }
html 复制代码
    <div class="box">
        <h2>线性流动</h2>
    </div>
相关推荐
归于尽8 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟8 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦8 分钟前
前端列表页大数据内存优化的思考
前端·面试
爱学习的茄子9 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
欢乐时光c13 分钟前
常见请求头响应头的含义
前端·面试
wzyoung13 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
用户730870117930814 分钟前
使用 CSS background-blend-mode 创造惊艳的视觉效果
前端
高端章鱼哥14 分钟前
Python 项目快速部署到 Linux 服务器基础教程
前端
李剑一15 分钟前
前端使用Web Cryptography API进行内容加密,几乎无法破解
前端
搬砖码16 分钟前
优雅实现!自定义滚动刻度选择器,精准选择无压力
前端