css3之图片展开效果和盾牌飞入_css3 从右下角展开的效果-CSDN博客

本文链接：https://blog.csdn.net/m0_67932301/article/details/125008200

一、图片展开效果

1.先写一个装图片的容器，设置这个容器的样式

<style>
.box{
    width:300px; height:300px
//宽度和高度为图片的宽高
}

</style>
<body>
    <div class="box"></div>
</body>

2.将图片写到容器中，并将图片定位在一起

定位：（覆盖时需要定位）

<style>
.box{
    width:300px; height:300px; position:relative;//相对于容器左上角为原点
//宽度和高度为图片的宽高
}
 .box img{
    position:absolute; left:0px; top:0px;//绝对定位，默认坐标为左上角
}
</style>
<body>
    <div class="box">
    <img src="images/hh.png">//图片的路径
    <img src="images/hh.png">
    <img src="images/hh.png">
     <img src="images/hh.png">
</div>
</body>

3.当鼠标放入容器时，图片旋转，旋转中心点为右下角

旋转：transform:rotate(45deg)顺时针旋转45度，括号为负值为逆时针

改变旋转中心：transform-origin：方向

<style>
.box{
    width:300px; height:300px; position:relative;//相对于容器左上角为原点
//宽度和高度为图片的宽高
}
 .box img{
    position:absolute; left:0px; top:0px;//绝对定位，默认坐标为左上角
    transform-origin:right bottom//改变旋转位置为右下角
}
.box:hover img:nth-child(4){
    transform:rorate(45deg)
}//内部第四张图
.box:hover img:nth-child(3){
    transform:rorate(30deg)
}
.box:hover img:nth-child(1){
    transform:rorate(-30deg)
}
</style>
<body>
    <div class="box">
    <img src="images/hh.png">//图片的路径
    <img src="images/hh.png">
    <img src="images/hh.png">
     <img src="images/hh.png">
</div>
</body>

效果为：

二、盾牌飞入效果

将一张照片划分为几张小的图片

1.先写一个装图片的容器，设置这个容器的样式

<style>
.box{
    width:300px; height:300px
//宽度和高度为图片的宽高
}

</style>
<body>
    <div class="box"></div>
</body>

2.写图片的路径

<style>
.box{
    width:300px; height:300px
//宽度和高度为图片的宽高
}

</style>
<body>
    <div class="box">
  <img src="images/shield_1_01.png" alt="">
		<img src="images/shield_1_02.png" alt="">
		<img src="images/shield_1_03.png" alt="">
		<img src="images/shield_1_04.png" alt="">
		<img src="images/shield_1_05.png" alt="">
</div>
</body>

3.将前3张图片移动到外侧

平移：transform：translate(横坐标，纵坐标)

<style>
	
	.box{
		width: 480px; height: 494px;
		margin: 0 auto;
	}
	.box img{
		transition:transform 1s;
	}
	.box img:nth-child(1){transform:translate(200px,100px)}
	.box img:nth-child(2){
		transform: translate(-200px,100px);
	}
	.box img:nth-child(3){
		transform: translate(500px,-100px);
	}
	.box img:nth-child(4){
		transform: translate(400px,-100px);
	}
	.box:hover img{
		transform: none;
	}//当鼠标进入容器时，改变到原来初始位置
	</style>
</head>
<body>
	<div class="box">
		<img src="images/shield_1_01.png" alt="">
		<img src="images/shield_1_02.png" alt="">
		<img src="images/shield_1_03.png" alt="">
		<img src="images/shield_1_04.png" alt="">
		
	</div>
</body>