纯css动漫轮播图

效果

代码


<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>

你可能感兴趣的:(前端样式,轮播图,css轮播图,美女轮播)