zoukankan      html  css  js  c++  java
  • css实现鼠标悬浮字体流光背景模糊效果

    美丽的天空

    原文地址:→看过来

    写在前面

    有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额。

    效果图

    看过来

    源码地址→传送门

    预览地址→传送门

    小知识点

    filter: blur(npx);

    这个过滤器用来将图片模糊,但是兼容性不太好,n代表模糊度,值越大越模糊。

    background-clip: text;

    background-clip是用于背景图片的裁剪,决定背景从哪里开始显示。当设置为text时,即可将背景设置在字体上。

    text-fill-color

    这个属性为字体颜色填充,在这里设置成transparent,然后在自己填充一个颜色渐变的字体颜色。

    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;
                 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 {
                 100%;
                left: 0;
            }
    

    左和右边框同理实现。

    小结

    以前感觉好多属性用不上,这下用上了好多个,以后继续写写写~

  • 相关阅读:
    C#与数据库访问技术总结(三)之 Connection对象的常用方法
    ConnectionState详解
    SQL Server 中 RAISERROR 的用法
    C# 捕获数据库自定义异常
    "在创建窗口句柄之前,不能在控件上调用 Invoke 或 BeginInvoke"
    查询sql语句的执行时间
    c# 多线程 创建对象实例
    C#中IDisposable的用法-垃圾回收
    c#中的引用类型和值类型
    C++运行出现"what(): std::bad_alloc"的解决办法
  • 原文地址:https://www.cnblogs.com/visugar/p/7247419.html
Copyright © 2011-2022 走看看