用CSS制造出光泽一闪而过的图片效果

我曾在Addy Osmani的博客里看到过这种效果。这种当鼠标悬停时光泽一闪而过。十分的简单，但非常的漂亮。在重新设计网站版面时，我很想在我的logo上使用这种效果。只需要两个HTML元素和一个CSS变换，我就能创造出我自己的闪光效果。让我们来实现它！

效果演示

呈现光泽图片

下面就是这张Addy在他博客上使用的图片：

shine.png

比我需要的要大一些，但你可以把它裁剪一些。

HTML代码

制作这种闪光效果，需要有两个元素：一个外框架，另一个内部元素用来呈现光泽。我这里使用了A标签和SPAN标签：

<a href="/" class="logo"><span></span></a>

HTML代码总是最简单的。

CSS代码

A元素的样式很简单，溢出的部分要隐藏，保证光泽的正常显示，最后设置元素的长宽：

a.logo {display: block;background: url("logo.png") 0 0 no-repeat;height: 70px;width: 91px;overflow: hidden;
}

负责光泽的SPAN元素也十分简单；设置它的长宽和背景位置就行了：

a.logo span {display: block;background: url("shine.png") -60px -80px no-repeat; transition-property: all;transition-duration: .8s;height: 70px;width: 91px;
}

最后一步是设置鼠标悬停时的动作：

a.logo:hover span {background-position: 100px 100px;
}

因为脸部是弧线形，这里做了一些特殊处理，我用border-radius将内部的SPAN变成了椭圆形：

a.logo span {border-radius: 50%;
}

这就是当鼠标悬停时光泽一闪而过的效果了，非常简单！

用这样少的代码创造出这么炫的效果，完全值得放在网站上。很多年前我们都需要使用JavaScript工具库才能完成这样的效果——而现在轻松的只需要几行CSS代码。希望你们也觉得这个效果很有趣，你可以换成你的头像试一下！

原文摘录：http://www.webhek.com/sheen-effect

用CSS制造出光泽一闪而过的图片效果相关推荐

【用HTML+CSS实现简单的轮播图片效果】
本文主要从两种方式上实现轮播图片效果方法一 ***================================================================== 本方法为渐变轮 ...
使用threejs点云秀出酷炫的图片效果(一)
来源:http://blog.csdn.net/srk19960903/article/details/70214556 使用了点云拼凑出了照片轮播十分有趣,于是用threejs实现这个效果. 首先这 ...
PS动作怎么做出水墨散开GIF动态图片效果
动作支持CS6以上版本PS软件,首先到陌鱼社区下载"制作水墨人物揭示GIF动画效果PS动作"然后用这个动作即可制作出下图GIF动态图片效果啦,下面请看演示教程. 01.打开软件,载 ...
用css实现聊天对话框向上小三角效果
背景:有时候,我们会遇到用CSS设计对话框效果的样式,我们可以用CSS设计出对话框的尖角效果. 一.尖角效果的实现原理 <!DOCTYPE html> <html> <h ...
闪光css,CSS实现的一闪而过的图片闪光效果
只需要两个html元素和一个css变换,我就能创造出我自己的闪光效果.让我们来实现它! 呈现光泽图片下面就是这张addy在他博客上使用的图片: 比我需要的要大一些,但你可以把它裁剪一些. 注意:左边 ...
html图片自带闪光效果,CSS实现的一闪而过的图片闪光效果
只需要两个HTML元素和一个CSS变换,我就能创造出我自己的闪光效果.让我们来实现它! 呈现光泽图片下面就是这张Addy在他博客上使用的图片: 比我需要的要大一些,但你可以把它裁剪一些. 注意:左边 ...
图片上的文字用CSS写出毛玻璃效果
图片上的文字用CSS写出毛玻璃效果 2016-10-04 08:11 网页设计标签:css 1297 发表评论半透明颜色最初的使用场景之一就是作为背景.将其叠放在照片类或其他 ...
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法把以前兼容IE6.7学习的东西搬出来了,还以为不见了.兼容性问题 1.IE6margin双边距问题 2.IE67 li间隙问题 3.图片间 ...
CSS、JavaScript和Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
html导航图片滚动条,CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在标签中让元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: ul.na ...

用CSS制造出光泽一闪而过的图片效果

用CSS制造出光泽一闪而过的图片效果相关推荐

最新文章

热门文章