Css“三剑客”实现简单的过渡特效

最新推荐文章于 2022-09-18 15:44:58 发布

李小白cc

最新推荐文章于 2022-09-18 15:44:58 发布

阅读量192

点赞数

分类专栏： web前端文章标签： css html css特效图片上浮出文字 transition

本文链接：https://blog.csdn.net/qq_43390061/article/details/88066657

版权

web前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

许多同学误认为页面上的特效都是js实现的，其实不然。css给我们提供了一个极其强大的属性transition。此属性属于css3的属性。它的值可以是一个时间，即过渡的时间。相当于js中setTimeout，setInterval等写出的效果，接下来解释另外两个“剑客”，伪类选择器和position。
伪类选择器“元素:hover”类似于js中的鼠标事件mouseover。但是它多了一个特性就是移出会恢复之前的状态。position的话，我希望大家先去了解再来看此博文，那样就更方便理解了。我们知道能用css写简单特效就不要用js写（涉及到性能问题），所以学会css写特效很重要。今天教大家实现网页上很常见的鼠标移入图片下方出现文字的特效。
首先给大家讲讲思路：
首先写一个div，第二步在里面放一张图。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一个简单的过渡特效</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				margin-left: 50px;
			}
			.box img{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="a.png" alt="小白博客">
		</div>
	</body>
</html>

声明（此处不用在意css代码的格式，因为后期有专门的处理工具将代码格式压缩节省空间）
在这里插入图片描述
然后我们在div中的img下方加一个p标签。给此标签设置宽度为图片宽度，高度随便给一个，然后一个半透明背景，将其定位在div的下方。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一个简单的过渡特效</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				margin-left: 50px;
				position: relative;
			}
			.box img{
				width: 200px;
				height: 200px;
			}
			.box p{
				width: 100%;
				height: 30px;
				line-height: 30px;
				background-color: rgba(225,225,225,0.7);
				position: absolute;
				bottom: -30px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="a.png" alt="小白博客">
			<p></p>
		</div>
	</body>
</html>

在这里插入图片描述
如果所示，我们知道，初始状态下，这个p一般不会给用户看见，所以我们需要隐藏掉（给div设置overflow:hidden），然后利用hover将其重新定位到图片上，此时p的bottom为-30px。我们利用hover将其设置bottom为0即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标没移入时</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				margin-left: 50px;
				position: relative;
				overflow: hidden;/* 这里是将p初始化隐藏掉，不可见 */
			}
			.box img{
				width: 200px;
				height: 200px;
			}
			.box p{
				width: 100%;
				height: 30px;
				line-height: 30px;
				background-color: rgba(225,225,225,0.7);
				position: absolute;
				bottom: -30px;/* 这里是将p初始化定位在div的下方 可见 */
			}
			.box:hover p{
				bottom:0px;/* 这里是鼠标移入div上时,p重新定位至div底部,可见 */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="a.png" alt="小白博客">
			<p></p>
		</div>
	</body>
</html>

写完以上代码后我们来看效果：
鼠标没移入
在这里插入图片描述
鼠标移入

此时我们就做出了最初的效果，其实这也算一个特效，但其实我们用transition给其优化一下效果更好，transition给在变化的元素上，即p上面，给它一个transition:1s；即可。
此部分代码为

.box p{
				width: 100%;
				height: 30px;
				line-height: 30px;
				background-color: rgba(225,225,225,0.7);
				position: absolute;
				bottom: -30px;/* 这里是将p初始化定位在div的下方 可见 */
				transition: 1s;
			}

此时我们就实现了过渡特效，最后只需要给p里面加文字并给上对应的修饰即可。
此方法还有更多的拓展，大家不妨多试试，各种你想不到的特效都能利用这些简单原来实现哦
附上完整源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标移入时</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				margin-left: 50px;
				position: relative;
				overflow: hidden;/* 这里是将p初始化隐藏掉，不可见 */
			}
			.box img{
				width: 200px;
				height: 200px;
			}
			.box p{
				width: 100%;
				height: 30px;
				line-height: 30px;
				background-color: rgba(225,225,225,0.7);
				position: absolute;
				bottom: -30px;/* 这里是将p初始化定位在div的下方 可见 */
				transition: 1s;
			}
			.box:hover p{
				bottom:0px;/* 这里是鼠标移入div上时,p重新定位至div底部,可见 */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="a.png" alt="小白博客">
			<p></p>
		</div>
	</body>
</html>

谢谢大家的支持！

李小白cc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css“三剑客”实现简单的过渡特效

许多同学误认为页面上的特效都是js实现的，其实不然。css给我们提供了一个极其强大的属性transition。此属性属于css3的属性。它的值可以是一个时间，即过渡的时间。相当于js中setTimeout，setInterval等写出的效果，接下来解释另外两个“剑客”，伪类选择器和position。伪类选择器“元素:hover”类似于js中的鼠标事件mouseover。但是它多了一个特性就是移出...
复制链接

扫一扫