css3动画——四季菜单

最新推荐文章于 2024-03-20 15:35:46 发布

小轩轩12138

最新推荐文章于 2024-03-20 15:35:46 发布

阅读量213

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/zyx990404/article/details/101632987

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图：

在这里插入图片描述

原理：

父子关系嵌套的盒子，父级盒子的右端用position:absolute或float:right固定，左端进行宽度减小变化；子级盒子用position:absolute相对父级盒子右端不动，left调整位置到父级盒子左端，同时进行宽度增加和向右移动变化（与父级宽度减小速度相同）。

原理demo代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			.father{
				position: absolute;
				top: 100px;
				right: 1200px;
				height: 100px;
				width: 100px;
				background: red;
				transition:  1s;
			}
			.son{
				position: absolute;
				top: 0px;
				right: 100px;/*子级盒子放在父级盒子左端，相对右段固定*/
				width: 100px;
				height: 100px;
				background: green;
				transition: 1s;
			}
			.father:hover{
				width: 0px;
			}
			.father:hover .son{
				width: 200px;
				transform: translate(100px, 0px);/*从当前位置向右移动一个父级盒子长度*/
			}
        </style>
	    <div class="father">
		     <div class="son"></div>
		</div>
	</body>
</html>

demo效果图：

在这里插入图片描述

实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul{
				float: right;/*右侧浮动*/
				margin: 50px 0;
				width: 100px;
			}
			li{
				position: relative;/* 作为div的position基准 */
				float: right;
				margin: 30px 0;
				height: 70px;
				width: 100px;
				font-size: 20px;
				text-align: center;
				line-height: 70px;
				color: #fff;
				background-color: #aaa;
				transition: 1s;
			}
			div{
				position: absolute;
				top: 0px;
				right: 100px;
				height: 70px;
				width: 0px;
				background-color: aqua;
				transition: 1s;
				overflow: hidden;
			}
			li:hover{
				width: 1px;/*防止li全部缩进时后面的盒子顶上来*/
			}
			li:hover div{
				width: 200px;
				transform: translate(100px,0px);/*从当前位置，向右移动一个li的长*/
			}
		</style>
		<ul>
			<li class="Spring">Spring<div id="Spring">春</div></li>
			<li class="Summer">Summer<div id="Summer">夏</div></li>
			<li class="Autumn">Autumn<div id="Autumn">秋</div></li>
			<li class="Winter">Winter<div id="Winter">冬</div></li>
		</ul>
	</body>
</html>

小轩轩12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画——四季菜单

效果图：原理：父子关系嵌套的盒子，父级盒子的右端用position:absolute或float:right固定，左端进行宽度减小变化；子级盒子用position:absolute相对父级盒子右端不动，left调整位置到父级盒子左端，同时进行宽度增加和向右移动变化（与父级宽度减小速度相同）。原理demo代码：<!DOCTYPE html><html> <...
复制链接

扫一扫

专栏目录