使用CSS渐变背景制作卡片光效边框。
先简要回顾一下CSS3渐变背景的知识。CSS3的背景渐变可通过background-image设置,包括线性、径向和锥型三种渐变。线性渐变是指颜色沿着某条直线渐变过渡;径向渐变是从某一点向外逐渐过渡;锥型渐变是指颜色围绕中心点旋转渐变。
根据上述知识,可进行以下操作:
·先准备一个卡片盒子,并居中对齐样式。通过锥型渐变,可得到背景效果,并添加hover旋转动画,再覆盖内容部分即可完成制作。
该流光边框效果与之前的充电特效有异曲同工之处,都是通过隐藏动画元素实现的。知识是死的,需求是活的,只有举一反三,才能不断进步。
·下面介绍第二种发光边框:
·先准备一个卡片盒子,并居中对齐样式。
·复制一个与卡片1相同的边框。
·背景图层和边框图层的样式几乎相同。但当给背景图层添加flter:blur(10px)时,边框会发光。实际上,这是因为背景图层被模糊了,导致视差效果看起来像边框发光。
·最后也为卡片2添加hover。
今天的视频到此结束,感谢观众老爷的点赞、关注和评论。