先简要回顾一下CSS3渐变背景的知识。
CSS3的背景渐变可通过background-image设置,包括线性、径向和锥型三种渐变。
线性渐变是指颜色沿着某条直线渐变过渡;径向渐变是从某一点向外逐渐过渡;锥型渐变是指颜色环绕中央点旋转渐变。

根据上述知识,可进行以下操作:

·先准备一个卡片盒子,并居中对齐样式。
通过锥型渐变,可得到背景效果,并添加hover旋转动画,再覆盖内容部分即可完成制作。

该流光边框效果与之前的充电殊效有异曲同工之处,都是通过隐蔽动画元素实现的。
知识是去世的,需求是活的,只有举一反三,才能不断进步。

视频CSS3渐变背景制作卡片光效边框的方法

·下面先容第二种发光边框:

·先准备一个卡片盒子,并居中对齐样式。

·复制一个与卡片1相同的边框。

·背景图层和边框图层的样式险些相同。
但当给背景图层添加flter:blur(10px)时,边框会发光。
实际上,这是由于背景图层被模糊了,导致视差效果看起来像边框发光。

·末了也为卡片2添加hover。

本日的视频到此结束,感谢不雅观众老爷的点赞、关注和评论。