css特效 一道闪光在图片上划过代码
作者：佚名
字体：[ ] 来源：互联网 时间：02-21 16:18:32
当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的，下面是具体的实现代码，感兴趣的朋友可以参考下
在百度音乐 / 看到这么一个图片效果，当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下： 大体思想是，设计一个透明层i，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。 同时在 i 层使用 cursor:pointer，如果不设置这个的话，需要等透明层动画之后才能看得到 pointer 指针。 打开 fireBUG 调试来看会更加清楚! 代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /& &title&闪光图片&/title& &style& .overimg{ position: display: /* overflow: */ box-shadow: 0 0 10px #FFF; } .light{ cursor: position: left: -180 top: 0; width: 180 height: 90 background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); transform: skewx(-25deg); -o-transform: skewx(-25deg); -moz-transform: skewx(-25deg); -webkit-transform: skewx(-25deg); } .overimg:hover .light{ left:180 -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; transition:0.5s; } &/style& &/head& &body& &p class="overimg"& &a&&img src="http://www.nowamagic.net/librarys/images/4_02_15_01.jpg"&&/a& &i class="light"&&/i& &/p& &/body& &/html&
大家感兴趣的内容
12345678910
最近更新的内容css3动画原理制做的指针时钟
在线预览！CSS3实现的一个时钟效果 ，使用jquery处理样式，使用CSS3 rotate生成指针转动效果 | 日志 | 果壳网 科技有意思
CSS3实现的一个时钟效果 ，使用jquery处理样式，使用CSS3 rotate生成指针转动效果
本文由授权（）发表，文章著作权为原作者所有。
(C)2016果壳网&&&&京ICP证100430号&&&&京网文[-239号&&&&新出发京零字东150005号纯CSS实现图像鼠标悬停效果
今天来看一组纯实现的鼠标悬停效果，在线研究代码点效果一、效果二、效果三，下载收藏点这里，效果预览点这里。
效果1的html文件
这里是个标题呀vc3Bhbj4KPC9kaXY+CjwvcHJlPmNzc87EvP7W0M7Sw8fW99KqyrXP1raozru6zWhvdmVytq+7raGjCjxwPjwvcD4KPHByZSBjbGFzcz0="brush:">/* 图片盒子的样式，宽高、边框、阴影、位置、鼠标样式、溢出 */
width: 500
height: 500
border: 10px solid #333;
box-shadow: 0 0 10px rgba(0,0,0,.6);
margin: 50
/* 图片标题的样式，宽高、背景色、水平垂直居中、定位，透明度 */
.pic span{
bottom: 0;
width: 500
height: 50
background: rgba(0,0,0,.5);
font-size: 24
line-height: 50
text-align:
opacity: 0;
/* 给需要动画的元素加过渡属性 */
.pic img,.pic span{
transition: all .5s;
/* hover之后透明动画 */
.pic:hover span{
opacity: 1;
/* hover之后图片放大的效果 */
.pic:hover img{
transform: scale(2);
下面看效果2，上下滑动打开的实现过程。首先看html文件，我们需要两个图片元素，一个显示上半部分，一个显示下半部分。
OK,You can see it.
css文件如下，我们把实现原理写到注释里，就不一一解释了。
/* 图像盒子的样式设置，宽高、边框、阴影、溢出、位置 */
width: 500
height: 500
margin: 50
border: 10px solid #333;
box-shadow: 0 0 10px rgba(0,0,0,.8);
/* 上下两半部分的统一设置，绝对定位和过渡 */
div.pic img{
transition: all 1s;
/* 上半部分图像的裁剪和定位 */
div.pic img.top{
clip: rect(0px,500px,250px,0px);
/* 下半部分图像的裁剪和定位 */
div.pic img.bottom{
bottom: 0;
clip: rect(250px,500px,500px,0px);
/* hover之后图像的定位改变 */
div.pic:hover img.top{
div.pic:hover img.bottom{
bottom: -50
/* 图像标题的样式设置，文字颜色、水平居中、垂直居中 */
div.pic span{
display: inline-；
width: 100%;
text-align:
line-height: 500
font-size: 24
}重点解释下CSS Clip的裁剪原理。
clip: rect(, , , );这里的top、right、bottom、left指的是裁剪之后的矩形的上右下左四个边到原始边的距离，如下图所示
大家可以看看张鑫旭大牛的《CSS
clip:rect矩形剪裁功能及一些应用介绍》了解详情，或者通过在线体会案例体验裁剪效果。
大家也可以利用Codrops上的《Expanding Overlay Effect》学习clip属性的超酷应用。
效果3的难点在于三角线图像的实现，我们这里主要利用skew()实现。html文件是这样的，我们需要分别在两个图像上加容器，然后分别对图像容器和图像设置相反方向的斜切。
OK,You can see it.
效果css文件
/* 图像盒子的样式，与前两个效果无异 */
width: 500
height: 500
border: 10px solid #333;
box-shadow: 0 0 10px rgba(0, 0, 0, .8);
margin: 50
/* 两个图像的小容器的定位、斜切、溢出，因为图像宽高相同，所以斜切45度 */
.pic .top, .pic .bottom {
width: 500
height: 500
transform: skew(-45deg);
/* 上下两个图像小容器分别设置不同的位置，变换原点 */
.pic .top {
transform-origin: 100% 0;
transition:all 1s, transform 0s;
.pic .bottom {
bottom: 0;
transform-origin: 0 100%;
transition:all 1s, transform 0s;
/* 上下两个图像向相反方向斜切 */
.pic .top img, .pic .bottom img {
width: 100%;
height: 100%;
transform-origin:
transform: skew(45deg);
/* hover之后图像小容器的变化 */
.pic:hover .top {
.pic:hover .bottom {
right: -20
bottom: -20
/* 图像标题的设置 */
.pic span {
transform: rotate(-45deg);
transform-origin: 0 100%;
font-size:20
bottom:-.5
opacity: 0;
transition: all 1s ease-in .2s;
.pic:hover span {
opacity: 1;
text-indent: 15
实现原理如下图所示，蓝色线框代表图像盒子.top，我们分别给图像和图像盒子不同方向相同角度的斜切实现效果，只有线框内的图像显示。
这样我们可以实现图像的三角形裁切效果，根据这样的原理大家可以尝试不同形状的实现。欢迎大家提供不同的实现思路。
That"s all. 迎接鼓励，欢迎拍砖。
---------------------------------------------------------------
whqet，关注开发技术，分享网页相关资源。
---------------------------------------------------------------
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'