举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197
喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的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技术又可以帮助我们对图片进行极致的压缩(参见:https://v3u.cn/a_id_190),所以我们可以理解这是一种权衡,毕竟,书本上写的是道理,但是现实中讲究的是取舍,不是吗?
原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_197
举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效相关推荐
- 网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图 (4)使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播 设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
- html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效
这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效.该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被缩小,效果非常的不错. 制作方法 H ...
- 【前端】CSS3、Canvas、SVG等5种方式实现水波纹波浪动画特效
目录 一.CSS3动画+图片波浪效果 1. 效果图 2. 代码 3. 原理 二.纯CSS3圆盘波浪进度效果 三.纯CSS3涟漪效果 四.Canvas波浪效果 五.SVG+jQuery波浪效果 六.源码 ...
- 纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
- 纯CSS3实现牛奶般剔透的3D按钮特效
今天我们要来看一款非常特别的纯CSS3 3D按钮,它的外观酷似纯白剔透的牛奶,点击按钮的时候还会出现一种很柔和的弹力效果.按钮按下时,按钮会轻轻的弹动一下,非常逼真.本文我们在观赏演示的同时,也将源代 ...
- html制作3d按钮,纯CSS3 3D按钮 按钮酷似牛奶般剔透
本文作者html5tricks,转载请注明出处 接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码,总体而言,这款CSS3 3D按钮主要由HTML代码和CSS代码组成.实现原理是用两个spa ...
- 前端使用css3实现人物卡片介绍动画
前端使用css3实现人物卡片介绍动画,鼠标移入后图片缩小现实出人物简介文字,鼠标移出再恢复. <!doctype html> <html lang="zh-CN" ...
- 用html浮雕效果图,纯CSS3炫酷3D浮雕质感文字动画特效
这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效.该特效中文字被制作为浮雕文字,就像是从一块石板上将文字雕刻下来的一样.而且文字还会来回的摆动旋转,效果非常好. 制作方法 HTML结构 该CS ...
- 前端酷炫效果参考_纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- 纯css3鼠标经过出现文字或图片鼠标移走消失
2019独角兽企业重金招聘Python工程师标准>>> 纯css3鼠标经过出现图片鼠标移走消失(文字只需修改样式即可,需要相反的话只需改透明图) css.big_box{margin ...
最新文章
- 交易所频频被盗,你该如何保护自己的数字资产?
- linux 日志主服务器 syslog
- 可以插卡的ipad_ipad哪个可以插手机卡上网的?
- XEN的clone和copy那点事
- storm的基本概念
- Spring构造注入
- XCTF-高手进阶区:Web_php_unserialize(详解)
- HDFS依然是存储的王者
- Java实现多线程售票
- Spring MVC——数据检验步骤
- centos5安装oracle11,CentOS 6.5 x64 安装 Oracle11g R2
- 复制错误:安装程序无法复制文件 Atapi.sys
- foobar2000使用cue文件播放时出现Unable to open item for playback (Object not found):的问题解决
- 阿里云国际站:java应用提速(速度与激情)
- python剪刀石头布小游戏_python小游戏(剪刀石头布)
- MATLAB图像处理(直方图)
- 顶刊数据:三批“智慧城市“”试点名单匹配。全国300直辖市地级市智慧城市试点、最早试点年份(2000-2021年)
- QT之界面切换、子窗口切换主窗口、返回按钮的实现
- 简易图书馆借还书系统(核心部分)
- INTERSPEECH 2020 论文集下载