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>
相关推荐
小茴香353几秒前
Vue 脚手架(Vue CLI)
前端·javascript·vue.js
午安~婉6 分钟前
ESLint
前端·eslint·检查
“抚琴”的人6 分钟前
C#中获取程序执行时间
服务器·前端·c#
朝阳3916 分钟前
CSS【实战】可编辑元素实现 placeholder -- contenteditable=“true“
css
掘金一周17 分钟前
Flex 布局下文字省略不生效?原因其实很简单| 掘金一周 10.16
前端
Stringzhua22 分钟前
Vue的Axios介绍【9】
前端·javascript·vue.js
摸着石头过河的石头39 分钟前
JavaScript 垃圾收集:内存管理的艺术
前端·javascript
前端小崽子39 分钟前
🔥 踩坑实录:Fabric 在 Intel Iris Xe 显卡上 CPU 飙升 100%
前端
东华帝君44 分钟前
React Suspense组件
前端
siaikin44 分钟前
基于 Astro Starlight 的多框架文档
前端·vue.js·markdown