关于css3:举重若轻流水行云前端纯CSS3实现质感非凡的图片Logo鼠标悬停hover光泽一闪而过的光影特效

115次阅读

共计 2955 个字符,预计需要花费 8 分钟才能阅读完成。

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197

喜爱看电影的敌人必定会留神到一个乏味的细节,就是电影出品方肯定会在片头的 Logo 环节做一个小特效:阴影流动之间光泽一闪而过,这样做不仅能够进步 Logo 的辨识度,还能够晋升质感,两全其美。参照华纳兄弟影业 (Warner Bros. Pictures) 的例子:

那么,在前端畛域,如果应用纯 CSS 技术,能不能实现相似的特效呢?答案当然是能够的,这次咱们以本站的 Logo 为例子,以一持万、提纲挈领地解说一下如何应用纯 CSS 技术实现图片 Logo 鼠标悬停光泽一闪而过的光影特效。

个别状况下,大多数前端开发会抉择 linear-gradient(),这个办法创立一个示意两种或多种色彩线性突变的图片。其后果属于 <gradient> 数据类型,是一种特地的 <image> 数据类型。

简略用法:

/* 突变轴为 45 度,从蓝色突变到红色 */  
linear-gradient(45deg, blue, red);  
  
/* 从右下到左上、从蓝色突变到红色 */  
linear-gradient(to left top, blue, red);  
  
/* 从下到上,从蓝色开始突变、到高度 40% 地位是绿色突变开始、最初以红色完结 */  
linear-gradient(0deg, blue, green 40%, red);

那么它怎么和 logo 图片联合应用呢?首先创立一个对象,因为是 logo,所以我应用 a 标签,也就是超级链接,随后申明伪类 mylogo:

<a href="/" class="mylogo" title="刘悦的技术博客"></a>

之后,定义 logo 的款式:

.mylogo{      
        display:block;  
        margin: 0 auto;  
    width:255px;  
    height:200px;  
    background-image:/logo.png;  
    background-repeat: no-repeat;  
}

接着就是 linear-gradient()出场,原理并不简单,利用 linear-gradient 绘制一个红色半透明突变层,利用背景的负坐标暗藏起来,同时配合 transition 属性,在鼠标悬停 (hover) 的时候,设置 1 秒钟的延时动画,逐步将光斑的坐标进行位移,产生一种光泽掠过的成果:

.mylogo{  
            width: 255px;  
            height: 200px;  
   
            background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat;  
            transition: 1s ease;  
        }  
  
.mylogo:hover {background-position: 200px 0, 0 0;}

这里须要留神的是,默认负坐标肯定要超过 logo 本体的宽度,否则位移就不够充沛,成果是上面这样的:

看起来还不错,这里 transition 的属性设置在 logo 本体的伪类下面,此时如果 logo 本体失去鼠标的焦点,光斑地位又会回到原来的负坐标,此时光影又会在回闪一次,也就是一次悬停产生两次位移,闪动两次,如果只想闪一次,能够将 transition 加载 hover 伪类中,这样来到后不会二次位移,因为动画成果只会呈现在鼠标悬停上,鼠标来到后,就没有动画回闪了:

.mylogo{  
            width: 255px;  
            height: 200px;  
            /* 间接应用 background 缩放版本 */  
            /* 每个突变点的地位不能太小,不然会呈现完好光斑 */  
            /*no-repeat -270px 0:将光斑定位暗藏起来 */  
            background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat;  
           /* transition: 1s ease;  */  
        }  
  
.mylogo:hover{  
    /* 鼠标滑过实现光斑滑动,然而在多背景状况下,须要多个 background-position 属性值,否则会影响其余背景 */  
    background-position: 200px 0, 0 0;  
    transition: 1s ease;  
}

成果是这样的:

然而这就完结了吗?还没有,因为这看起来仿佛。。。有点一律千篇?

如果所有人都用 linear-gradient,就不免有点无趣了,那么有没有别的不落窠臼的玩儿法呢?

既然知道了原理,无非就是位移产生的小把戏,那么咱们齐全脱离 linear-gradient,应用一张带光泽质感的背景图片 shine.png:

因为应用了背景图,所以咱们须要对代码进行批改,为实体的背景图增加一个容器,span 标签:

<a href="/" class="mylogo" title="刘悦的技术博客"><span></span></a>

款式和 linear-gradient 差不多,也是利用负坐标将 span 标签内的背景图暗藏起来:

.mylogo span {  
    display: block;  
    background: url("/shine.png") -360px -380px no-repeat;      
  
    transition-property: all;  
    transition-duration: .7s;  
  
    height: 200px;  
    width: 255px;  
}

接下来要比 linear-gradient 要简略地多,间接设置悬停属性,让背景图片产生位移:

.mylogo:hover span {background-position: 100px 300px;}

成果是这样的:

如果仔细观察,会发现背景图更加符合光影掠过的成果,因为 linear-gradient 每个突变点在不同分辨率的屏幕下并不对立,也就是说在高分辨下会呈现完好光斑。

暗黑模式下的成果是这样的:

看起来仿佛更加有质感一点,除此之外,兴许你还想利用 transition 玩一些更加刺激的成果:

.mylogo:hover {-webkit-transform: rotate(666turn);  
            transform: rotate(666turn);  
            transition-delay: 1s;  
            transition-property: all;  
            transition-duration: 59s;  
            transition-timing-function: cubic-bezier(.34, 0, .84, 1)  
}

让咱们旋转、跳跃、闭着眼:

结语:两套计划都能够很好的实现光影特效,区别在于 linear-gradient 并不会耗费网站的带宽,但会耗费电脑的 CPU 和内存,而与背景突变相比,背景图像成果会更好一点,然而将会更多地应用网络带宽,而 webp 技术又能够帮忙咱们对图片进行极致的压缩(参见:https://v3u.cn/a\_id\_190),所以咱们能够了解这是一种衡量,毕竟,书本上写的是情理,然而事实中考究的是取舍,不是吗?

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197

正文完
 0