纯css写类似手风琴一样的动画效果

最新推荐文章于 2024-07-15 23:16:45 发布

蘭骏骏

最新推荐文章于 2024-07-15 23:16:45 发布

阅读量231

点赞数 1

本文链接：https://blog.csdn.net/LuoaL_/article/details/118193549

版权

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<style type="text/css">
	.box{
		height: 0;
		overflow: hidden;
		transition: all .5s ease-out;
		background-color: pink;
		transform: scaleY(0);
		transform-origin: top;
	}
	:checked ~ .element .box{
		height: auto;
		transform: scaleY(1);
	}
	</style>
	<body>
		<input id="check" type="checkbox">
		<div class="element">
			<div class="box" style="width: 100%;">溫馨提示： 這款軟體只能在 PC 或 Mac 電腦下載並使用。</div>
		</div>
		<label for="check" >收缩</label>
	</body>
</html>
<script>
</script>

使用到的属性：scale()，scale()是对元素进行缩放，分别为有两个属性scaleX()是控制的是水平方向的缩放，scaleY()控制的是垂直方向的缩放。scale()的缩放起始位置是从中间开始的，这时候，我们想要从顶部开始缩放的话，就要使用transfrom-origin这个属性，来修改它缩放的起始位置了。