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

简介: 喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的Logo环节做一个小特效:暗影流动之间光泽一闪而过,这样做不仅可以提高Logo的辨识度,还可以提升质感,一举两得。参照华纳兄弟影业(Warner Bros. Pictures)的例子

喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的Logo环节做一个小特效:暗影流动之间光泽一闪而过,这样做不仅可以提高Logo的辨识度,还可以提升质感,一举两得。参照华纳兄弟影业(Warner Bros. Pictures)的例子:

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

一般情况下,大多数前端开发会选择 linear-gradient() ,这个方法创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型,是一种特别的数据类型。

简单用法:

/* 渐变轴为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技术又可以帮助我们对图片进行极致的压缩,所以我们可以理解这是一种权衡,毕竟,书本上写的是道理,但是现实中讲究的是取舍,不是吗?

相关文章
|
1天前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
1天前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
7 2
|
4天前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
11 1
|
4天前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
16 1
|
4天前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
11 1
|
3天前
|
前端开发 容器
【前端基础篇】CSS基础速通万字介绍(下篇)3
【前端基础篇】CSS基础速通万字介绍(下篇)
10 0
|
3天前
|
Web App开发 存储 前端开发
【前端基础篇】CSS基础速通万字介绍(下篇)2
【前端基础篇】CSS基础速通万字介绍(下篇)
12 0
|
3天前
|
前端开发
【前端基础篇】CSS基础速通万字介绍(下篇)1
【前端基础篇】CSS基础速通万字介绍(下篇)
13 0
|
15天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
CSS3鼠标悬停8种动画特效
在线演示 本地下载
1512 0