龙空技术网

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

小高的专属摄影师 440

前言:

当前我们对“css3 特效”大约比较关注,姐妹们都需要知道一些“css3 特效”的相关文章。那么小编同时在网上收集了一些对于“css3 特效””的相关资讯,希望我们能喜欢,咱们快快来了解一下吧!

使用CSS渐变背景制作卡片光效边框。

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

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

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

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

·下面介绍第二种发光边框:

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

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

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

·最后也为卡片2添加hover。

今天的视频到此结束,感谢观众老爷的点赞、关注和评论。

标签: #css3 特效 #html怎么给图片加立体边框颜色