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>
相关推荐
iCoding9133 分钟前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou3339 分钟前
使用 Service Worker 限制请求并发数
前端
张可爱41 分钟前
20251017-Vue2八股文整理(上篇)
前端
FanetheDivine43 分钟前
ts中如何描述一个复杂函数的类型
前端·typescript
lightgis1 小时前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络1 小时前
Vue3 原生移动应用开发来了
前端·javascript·css
GISer_Jing1 小时前
LLM对话框项目技术栈&重难点总结
前端·ai·node.js
我爱学习_zwj1 小时前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
小谭鸡米花1 小时前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
摆烂工程师2 小时前
什么是 ChatGPT Business 会员?与 ChatGPT Plus 有什么不同?
前端·后端·程序员