HTML:
<div class="mySlides">
<img src="1.jpg">
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
</div>
CSS:
.mySlides {
padding-top: 25%;
padding-left: 5%;
}
.mySlides img {
object-fit: cover;
position: absolute;
max-width: 35%;
}
.mySlides img:nth-of-type(1) {
left: 0%;
top: 0%;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
这将对所有图像重复,即 nth-of-type(2,3,4,5)
.mySlides img {
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
padding: 10px 10px 30px 10px;
background: linear-gradient(#ffffff, #eaeaea);
border: solid 1px black;
}
我想将图像堆叠在一起并让它们都在屏幕上居中。 在悬停时,我希望图像水平分离,同时仍保持动画效果。
最佳答案
检查一下
工作 fiddler https://jsfiddle.net/RaajNadar/L0ennqwp/
HTML
<div class="mySlides">
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/400/200/sports"/>
</div>
CSS
.mySlides {
position: relative;
}
.mySlides img {
position: absolute;
top: 0;
left: 0;
max-width: 300px;
transition: left 1.2s ease-in-out;
}
.mySlides:hover img:last-child {
left: 300px;
}
还有一个不错的动画。
关于html - 如何将包裹在同一个 div 中的图像堆叠在一起,然后在悬停时将它们与动画分开?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45837905/