原文地址:→看过来css
有的时候感受写点小玩意儿挺开心的,还能实践不少的小知识点,因此此次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额。html
源码地址→传送门git
预览地址→传送门github
filter: blur(npx);web
这个过滤器用来将图片模糊,可是兼容性不太好,n表明模糊度,值越大越模糊。字体
background-clip: text;动画
background-clip
是用于背景图片的裁剪,决定背景从哪里开始显示。当设置为text
时,便可将背景设置在字体上。spa
text-fill-color3d
这个属性为字体颜色填充,在这里设置成transparent
,而后在本身填充一个颜色渐变的字体颜色。code
linear-gradient
线性渐变,这里为文字添加一个渐变色,为了实现流光渐变的效果,须要将背景宽度设置为200%,且linear-gradient
的0%和100%颜色同样,便于先后衔接上,具体以下:
background-image: -webkit-linear-gradient(left, red, yellow 25%, red 50%, yellow 75%, red 100%); background-size: 200% 100%;
在设置好背景色以后为字体添加动画,使文字产生流光效果。
鼠标悬浮显示和隐藏
现将元素的透明度设为0,当鼠标悬浮时执行渐变透明度变为1。
边框向两边伸展的效果
在实际中咱们只能设置边框的宽度,而不能改变边框的长度,因此此处不能直接用border的属性。而是经过追加2个元素,并改变其大小来实现本元素的边框向两边伸展的效果。分别设置这两个元素的上下边框及左右边框。
原理图(实现为所设边框,虚线为不设置边宽):
追加元素的实现
追加元素宽或高为0,当鼠标移动到box上时,宽或高渐变到100%,便可。
#content:before { content: " "; position: absolute; left: 50%; top: 0; width: 0; height: 100%; border: 3px solid #fff; border-left: none; border-right: none; transition: all 0.8s; box-sizing: border-box; } #box:hover #content:before { width: 100%; left: 0; }
左和右边框同理实现。
之前感受好多属性用不上,这下用上了好多个,之后继续写写写~