纯CSS实现图像鼠标悬停效果

分手后的思念是犯贱 2022-08-26 11:19 364阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

今天来看一组纯CSS实现的鼠标悬停效果，在线研究代码点[效果一][Link 1]、[效果二][Link 2]、[效果三][Link 3]，下载收藏[点这里][Link 4]，[效果预览][Link 5]点这里。

### 效果1 ###

效果1的html文件

<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文件，我们需要两个图片元素，一个显示上半部分，一个显示下半部分。

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指的是裁剪之后的矩形的上右下左四个边到原始边的距离，如下图所示

![SouthEast][]  
大家可以看看张鑫旭大牛的《[CSS clip:rect矩形剪裁功能及一些应用介绍][CSS clip_rect]》了解详情，或者通过[在线体会][Link 6]案例体验裁剪效果。

大家也可以利用Codrops上的《[Expanding Overlay Effect][]》学习clip属性的超酷应用。

### 效果3 ###

效果3的难点在于三角线图像的实现，我们这里主要利用skew()实现。html文件是这样的，我们需要分别在两个图像上加容器，然后分别对图像容器和图像设置相反方向的斜切。

效果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，我们分别给图像和图像盒子不同方向相同角度的斜切实现效果，只有线框内的图像显示。

![SouthEast 1][]

这样我们可以实现图像的三角形裁切效果，根据这样的原理大家可以尝试不同形状的实现。欢迎大家提供不同的实现思路。

That's all. 迎接鼓励，欢迎拍砖。

\---------------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Link 1]: http://codepen.io/whqet/pen/brdmh
[Link 2]: http://codepen.io/whqet/pen/gBzfh
[Link 3]: http://codepen.io/whqet/pen/votAw
[Link 4]: http://pan.baidu.com/s/1jGgaG0u
[Link 5]: http://skx.zjipc.cn/blog/imageCaption/pic1.html
[SouthEast]: /images/20220824/c2a73a7a10df4f7b910b8d6bdf8232f2.png
[CSS clip_rect]: http://www.zhangxinxu.com/wordpress/2011/04/css-cliprect%E7%9F%A9%E5%BD%A2%E5%89%AA%E8%A3%81%E5%8A%9F%E8%83%BD%E5%8F%8A%E4%B8%80%E4%BA%9B%E5%BA%94%E7%94%A8%E4%BB%8B%E7%BB%8D/
[Link 6]: http://www.zhangxinxu.com/study/201103/css-rect-demo.html
[Expanding Overlay Effect]: http://tympanus.net/Tutorials/ExpandingOverlayEffect/
[SouthEast 1]: /images/20220824/597ffcccb1334ded8339a37ac3075336.png
[whqet]: http://blog.csdn.net/whqet