纯CSS实现图像鼠标悬停效果
今天来看一组纯CSS实现的鼠标悬停效果,在线研究代码点效果一、效果二、效果三,下载收藏点这里,效果预览点这里。
效果1
<div class="pic"> <img src="pic.jpg" alt=""> <span>这里是个标题呀</span> </div>css文件中我们主要实现定位和hover动画。
/* 图片盒子的样式,宽高、边框、阴影、位置、鼠标样式、溢出 */ .pic{ width: 500px; height: 500px; border: 10px solid #333; box-shadow: 0 0 10px rgba(0,0,0,.6); margin: 50px auto; position: relative; overflow: hidden; cursor: pointer; } /* 图片标题的样式,宽高、背景色、水平垂直居中、定位,透明度 */ .pic span{ position: absolute; left: 0; bottom: 0; width: 500px; height: 50px; background: rgba(0,0,0,.5); color: #fff; font-size: 24px; line-height: 50px; text-align: center; opacity: 0; } /* 给需要动画的元素加过渡属性 */ .pic img,.pic span{ transition: all .5s; } /* hover之后透明动画 */ .pic:hover span{ opacity: 1; } /* hover之后图片放大的效果 */ .pic:hover img{ transform: scale(2); }
效果2
下面看效果2,上下滑动打开的实现过程。首先看html文件,我们需要两个图片元素,一个显示上半部分,一个显示下半部分。
<div class="pic"> <img class="top" src="pic.jpg" alt="top"> <img class="bottom" src="pic.jpg" alt="bottom"> <span>OK,You can see it.</span> </div>css文件如下,我们把实现原理写到注释里,就不一一解释了。
/* 图像盒子的样式设置,宽高、边框、阴影、溢出、位置 */ div.pic{ width: 500px; height: 500px; cursor: pointer; margin: 50px auto; position: relative; overflow: hidden; border: 10px solid #333; box-shadow: 0 0 10px rgba(0,0,0,.8); } /* 上下两半部分的统一设置,绝对定位和过渡 */ div.pic img{ position: absolute; left: 0; transition: all 1s; } /* 上半部分图像的裁剪和定位 */ div.pic img.top{ top: 0; clip: rect(0px,500px,250px,0px); } /* 下半部分图像的裁剪和定位 */ div.pic img.bottom{ bottom: 0; clip: rect(250px,500px,500px,0px); } /* hover之后图像的定位改变 */ div.pic:hover img.top{ top: -50px; } div.pic:hover img.bottom{ bottom: -50px; } /* 图像标题的样式设置,文字颜色、水平居中、垂直居中 */ div.pic span{ display: inline-block;; width: 100%; text-align: center; line-height: 500px; font-size: 24px; }重点解释下CSS Clip的裁剪原理。
clip: rect(<top>, <right>, <bottom>, <left>);这里的top、right、bottom、left指的是裁剪之后的矩形的上右下左四个边到原始边的距离,如下图所示
大家可以看看张鑫旭大牛的《CSS
clip:rect矩形剪裁功能及一些应用介绍》了解详情,或者通过在线体会案例体验裁剪效果。
大家也可以利用Codrops上的《Expanding Overlay Effect》学习clip属性的超酷应用。
效果3
<div class="pic"> <div class="top"> <img src="http://gx.zptc.cn/whqet/img/road.jpg"> </div> <div class="bottom"> <img class="bottom" src="http://gx.zptc.cn/whqet/img/road.jpg"> </div> <span>OK,You can see it.</span> </div>效果css文件
/* 图像盒子的样式,与前两个效果无异 */ .pic { width: 500px; height: 500px; overflow: hidden; cursor: pointer; border: 10px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, .8); margin: 50px auto; position: relative; } /* 两个图像的小容器的定位、斜切、溢出,因为图像宽高相同,所以斜切45度 */ .pic .top, .pic .bottom { width: 500px; height: 500px; overflow: hidden; position: absolute; transform: skew(-45deg); } /* 上下两个图像小容器分别设置不同的位置,变换原点 */ .pic .top { left: 0; top: 0; transform-origin: 100% 0; transition:all 1s, transform 0s; } .pic .bottom { right: 0; bottom: 0; transform-origin: 0 100%; transition:all 1s, transform 0s; } /* 上下两个图像向相反方向斜切 */ .pic .top img, .pic .bottom img { width: 100%; height: 100%; transform-origin: inherit; transform: skew(45deg); } /* hover之后图像小容器的变化 */ .pic:hover .top { left: -20px; top: -20px; } .pic:hover .bottom { right: -20px; bottom: -20px; } /* 图像标题的设置 */ .pic span { transform: rotate(-45deg); transform-origin: 0 100%; position: absolute; font-size:20px; bottom:-.5em; opacity: 0; transition: all 1s ease-in .2s; } .pic:hover span { opacity: 1; text-indent: 15em; }
实现原理如下图所示,蓝色线框代表图像盒子.top,我们分别给图像和图像盒子不同方向相同角度的斜切实现效果,只有线框内的图像显示。
这样我们可以实现图像的三角形裁切效果,根据这样的原理大家可以尝试不同形状的实现。欢迎大家提供不同的实现思路。
That‘s all. 迎接鼓励,欢迎拍砖。
---------------------------------------------------------------
前端开发whqet,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。