子元素hover离开时的平滑过渡效果

最新推荐文章于 2022-09-19 15:14:19 发布

weixin_43798882

最新推荐文章于 2022-09-19 15:14:19 发布

阅读量3.9k

点赞数 1

分类专栏： css 文章标签： css hover 动画

本文链接：https://blog.csdn.net/weixin_43798882/article/details/89204010

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

hover时设置的效果离开时平滑过渡：

<!DOCTYPE html>
<html>
    <meta charset="UTF-8" />
    <title>hover平滑过渡效果</title>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				transition: all 1s linear;		//这个是关键
			}
			
			div:hover {
				//这里可以写任何动画效果，比如放大、缩小，
				//但是不可以写如 display:block -> display:none 这种非线性变化
				opacity: 0;
			}
		</style>
	</head>
	
	<body>
		<div></div>
	</body>
</html>

较为复杂的结构中的hover效果

<!DOCTYPE html>
<html>
    <meta charset="UTF-8" />
    <title>hover平滑过渡效果</title>
	<head>
		<style>
	        div{ position: relative; float: left; box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.2); }
		    div img{ margin: 20px auto; margin-top: 40px; width: 40%; display: block;  }
		    div h5{ line-height: 40px; margin: 0px; text-align: center; }
		    div p{ width: 84%; margin: 1em auto; }
		    div span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ff0000; color: #FFF; padding: 14%; box-sizing: border-box; }
		    
		    /*动画效果*/
		   	div:hover span, div:active span{
                opacity: 1;
		   	}
		   	div span{
				transition: all 0.3s linear;
		        opacity: 0;
		   	}
		</style>
	</head>

	<body>
		<div>
			<img src="images/icon_01.png" />
			<h5>标题</h5>
			<p>副标题</p>
			<span>详细文本</span>
		</div>

	</body>

</html>

weixin_43798882

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
子元素hover离开时的平滑过渡效果

hover时设置的效果离开时平滑过渡：<!DOCTYPE html><html> <meta charset="UTF-8" /> <title>hover平滑过渡效果</title> <head> <style> div { width: 100px; heig...
复制链接

扫一扫