[css]旋转流光效果

实现一个矩形的旋转流光边框效果。

需要使用css属性梯度渐变:链接: conic-gradient,他指的是圆锥形变化的梯度。

html 复制代码
// html
 <div class="demo">
 </div>
css 复制代码
// css
body {
   width: 100%;
   height: 100%;
   background-color: black;
}

.demo {
   width: 400px;
   height: 200px;
   background-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, transparent, #70ffaf 14%, transparent 17%);
   background-size: contain;
}

@property --border-gradient-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

上面的代码,指的是从第 0 转位置(中间垂直向上)开始,在中心点位置放置渐变,效果如下:

给上面效果加上动画:

css 复制代码
.demo {
    width: 400px;
    height: 200px;
    background-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, transparent, #70ffaf 14%, transparent 17%);
    background-size: contain;
    animation: buttonBorderSpin 9s linear infinite 0ms;
}
@keyframes buttonBorderSpin {
    0% {
        --border-gradient-angle: 0turn;
    }

    100% {
        --border-gradient-angle: 1turn;
    }
}
@property --border-gradient-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

添加上述代码之后,可以获得一个线性旋转,旋转一整周(1turn)并周期循环的动画。

之后对这个div进行遮挡,在其中添加一个div:

html 复制代码
 <div class="demo">
     <div class="demo-content">
        旋转流光
    </div>
 </div>
css 复制代码
.demo {
    ...
    padding: 1px;
}
 .demo-content {
     width: 100%;
     height: 100%;
     background-color: black;
     color: white;
 }

遮挡后即可看到绕边框一周的旋转流光效果。

改变旋转点还可以获得平移流光效果

css 复制代码
background-image: conic-gradient(from var(--border-gradient-angle) at 30% -30%, transparent 25%, #70ffaf 75%, transparent);
相关推荐
jingling5557 小时前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
Gee Explorer9 小时前
第一篇使用HTML写一个随机点名网页
css·html5·1024程序员节
前端橙一陈10 小时前
彻底理解 Bootstrap 的响应式断点机制:从 CSS 到 SCSS 的实现原理
css·bootstrap·scss
神膘护体小月半11 小时前
css 的 clip-path 属性,绘制气泡
css
代码改变世界1008611 小时前
像素塔防游戏:像素守卫者
css·游戏·css3·1024程序员节
木易 士心15 小时前
CSS 样式用法大全
前端·css·1024程序员节
皓月Code15 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节
水星梦月19 小时前
跨平台开发中的图形渲染:Canvas与View+CSS的性能分析与决策路径
前端·css·图形渲染·canvas
冰暮流星1 天前
css之线性渐变
前端·css
冰暮流星1 天前
css3新增背景图片样式
前端·css·css3