vue 流光边框矩形圆形容器

实现流光边框一般是用渐变背景加动画实现,然后使用内部盒子遮挡内部空间,达到边框流光的效果

思路:背景渐变+旋转动画

功能:

  • 自定义渐变(是否渐变<不渐变没有流光效果>,渐变颜色,渐变角度,渐变宽度)
  • 自定义动画时间

1 基础实现








vue 流光边框矩形圆形容器_第1张图片

动图(略)

2 封装组件

2.1 圆形边框

使用mask属性,使得中间部分背景不被遮挡




vue 流光边框矩形圆形容器_第2张图片

vue 流光边框矩形圆形容器_第3张图片​​​​​​​

2.2 矩形边框

使用伪元素,自定义中间部分背景




vue 流光边框矩形圆形容器_第4张图片

你可能感兴趣的:(vue,scene,css,vue.js,javascript,前端,css)