效果
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="JiuMeilove"/>
<title>窗口轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #272727;
height: 100vh;
display: flex;
justify-content:center;
align-items:center;
flex-wrap: nowrap;
}
section {
display: flex;
width: 20%;
height: 40%;
position: relative;
}
section>div{
display: flex;
justify-content:center;
align-items:center;
height: 100%;
width: 50%;
background-color:rgba(188,242,247,0.92);
z-index: 9;
}
@keyframes leftWindowsOpen{
form{
transform:translate(0,0);
background-color:rgba(188,242,247,0.92);
}
to{
transform:translate(-100%,0);
background-color:rgba(188,242,247,0.02);
}
}
@keyframes rightWindowsOpen{
form{
transform:translate(0,0);
background-color:rgba(188,242,247,0.92);
}
to{
transform:translate(100%,0);
background-color:rgba(188,242,247,0.02);
}
}
section:hover >div:first-of-type{
animation: leftWindowsOpen 1s ease-out forwards;
}
section:hover >div:last-of-type{
animation: rightWindowsOpen 1s ease-out forwards;
}
section:hover>nav>img{
animation-play-state:paused;
}
section>div>div{
width: 20%;
padding-bottom: 20%;
position: relative;
animation: pulse 1s ease-out infinite;
}
section>div>div>div{
width: 100%;
padding-top: 100%;
background: #e25d5d;
transform: rotate(-45deg);
}
section>div>div:before,
section>div>div:after{
content: "";
position: absolute;
width: 100%;
padding-top: 100%;
border-radius: 50%;
background-color: #e25d5d;
}
section>div>div:before{
top: -15%;
left: -30%;
}
section>div>div:after{
top: -15%;
left: 30%;
}
@keyframes pulse {
30% {
transform: scale(1.2, 1.2) ;
}
70% {
transform: scale(1, 1) ;
}
}
nav{
display: flex;
justify-content:flex-start;
max-height: 100%;
max-width: 100%;
min-width: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
img{
animation: moving 12s linear infinite alternate;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
}
@keyframes moving {
form {
transform: translateX(0);
}
to {
transform: translateX(-900%);
}
}
</style>
</head>
<body>
<section>
<nav>
<img src="images/wallhaven-73mqqo_1280x1024.png" alt="">
<img src="images/wallhaven-73mqqo_1280x1024.png" alt="">
<img src="images/wallhaven-eoe7kw_1280x1024.png" alt="">
<img src="images/wallhaven-lqjzk2_1280x1024.png" alt="">
<img src="images/wallhaven-lqzx92_1280x1024.png" alt="">
<img src="images/wallhaven-wy375r_1280x1024.png" alt="">
<img src="images/wallhaven-xll173_1280x1024.png" alt="">
<img src="images/wallhaven-yj9eqg_1280x1024.png" alt="">
<img src="images/wallhaven-4gpj34_1280x1024.png" alt="">
<img src="images/wallhaven-xll173_1280x1024.png" alt="">
</nav>
<div>
<div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
</div>
</div>
</section>
</body>
</html>