多张图片展开成扇形,要有动画效果
时间: 2023-06-25 16:05:00 浏览: 242
要实现这个效果,可以使用CSS3的transform属性和transition属性。具体步骤如下:
1. 将多张图片放在一个容器中,设置容器的width和height,并设置position为relative。
2. 给每张图片设置position为absolute,并设置top和left或right,使它们围绕容器中心点均匀分布。
3. 使用CSS3的transform属性,将每张图片旋转一定角度,使它们呈扇形分布。可以使用transform: rotate(deg)来旋转图片,deg为旋转角度。
4. 使用CSS3的transition属性,使图片在hover时有动画效果。可以使用transition: transform time ease-in-out;来设置动画效果,time为动画持续时间,ease-in-out为动画速度曲线。
以下是示例代码:
HTML代码:
```
<div class="fan">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>
```
CSS代码:
```
.fan {
width: 400px;
height: 400px;
position: relative;
}
.fan img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
transition: transform 0.5s ease-in-out;
}
.fan img:hover {
transform: translate(-50%, -50%) rotate(-45deg);
}
.fan img:nth-child(1) {
transform: translate(-50%, -50%) rotate(-72deg);
}
.fan img:nth-child(2) {
transform: translate(-50%, -50%) rotate(-36deg);
}
.fan img:nth-child(3) {
transform: translate(-50%, -50%) rotate(0deg);
}
.fan img:nth-child(4) {
transform: translate(-50%, -50%) rotate(36deg);
}
.fan img:nth-child(5) {
transform: translate(-50%, -50%) rotate(72deg);
}
```
在上面的代码中,我们将五张图片放在一个class为“fan”的容器中,设置容器的宽高为400px,并将每张图片的position设置为absolute,并使用transform属性进行旋转。在hover时,我们使用CSS3的transition属性让图片有动画效果。
你可以根据自己的需要修改上面的代码,实现你想要的效果。