zoukankan      html  css  js  c++  java
  • 用CSS代码编写简易轮播图

    废话不多说,直接上代码

    <!doctype html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <style type="text/css">
            	.container{
            		 1000px;
            		height: 500px;
            		margin: 50px auto;
            		overflow: hidden;
            		background: skyblue;
            		
            	}
            	.flex{
        			display: flex;
            	}
            	.item-box{
        			animation: my-css 5s infinite;
    				-webkit-animation: my-css 5s infinite;
        			-o-animation: my-css 5s infinite;
        			-moz-animation: my-css 5s infinite;
    
        			animation-direction: alternate;
        			-webkit-animation-direction: alternate;
        			-o-animation-direction: alternate;
        			-moz-animation-direction: alternate;
        			
            	}
            	.item-box:hover{
            		animation-play-state: paused;
            		-webkit-animation-play-state: paused;
            		-o-animation-play-state: paused;
            		-moz-animation-play-state: paused;
            	}
            	.item-box div{
            		 1000px;
            		height: 450px;
            		flex-shrink: 0;
            	}
            	.item1{
            		
            		background: pink;
            	}
            	.item2{
            		
            		background: brown;
            	}
    
            	.item3{
            		
            		background: red;
            	}
            	.item4{
            		
            		background: yellow;
            	}
            	.item5{
            		
            		background: green;
            	}
            	@keyframes my-css{
    				0%   {
    					transform: translate(0%);
    				}
    				25%  {
    					transform: translate(-100%);
    				}
    				50%  {
    					transform: translate(-200%);
    				}
    				75%  {
    					transform: translate(-300%);
    				}
    				100%  {
    					transform: translate(-400%);
    				}
    
    			}
    			@-webkit-keyframes my-css{
    				0%   {
    					transform: translate(0%);
    				}
    				25%  {
    					transform: translate(-100%);
    				}
    				50%  {
    					transform: translate(-200%);
    				}
    				75%  {
    					transform: translate(-300%);
    				}
    				100%  {
    					transform: translate(-400%);
    				}
    			}
    			@-o-keyframes my-css{
    				0%   {
    					transform: translate(0%);
    				}
    				25%  {
    					transform: translate(-100%);
    				}
    				50%  {
    					transform: translate(-200%);
    				}
    				75%  {
    					transform: translate(-300%);
    				}
    				100%  {
    					transform: translate(-400%);
    				}
    			}
    			@-moz-keyframes my-css{
    				0%   {
    					transform: translate(0%);
    				}
    				25%  {
    					transform: translate(-100%);
    				}
    				50%  {
    					transform: translate(-200%);
    				}
    				75%  {
    					transform: translate(-300%);
    				}
    				100%  {
    					transform: translate(-400%);
    				}
    			}
    			.ico-box{
    				 30%;
    				height: 30px;
    				justify-content: space-around;
    				align-items: center;
    				margin: 10px auto;
    			}
    			.ico-box div{
    				height: 10px;
    				 20px;
    				border-radius: 10px;
    				background: #fff;
    				transition: width 0.5s;
    			}
    			.ico-box div:hover{
    				 40px;
    				background: pink;
    			}	        	
            </style>
        </head>
        <body>
    		<div class="container">
    			<div class="item-box flex">
    				<div class="item1"></div>
    				<div class="item2"></div>
    				<div class="item3"></div>
    				<div class="item4"></div>
    				<div class="item5"></div>
    			</div>
    			<div class="ico-box flex">
    				<div class="ico"></div>
    				<div class="ico"></div>
    				<div class="ico"></div>
    				<div class="ico"></div>
    				<div class="ico"></div>
    			</div>
    		</div>
        </body>
    </html>
    
  • 相关阅读:
    POJ 1015 Jury Compromise【DP】
    POJ 1661 Help Jimmy【DP】
    HDU 1074 Doing Homework【状态压缩DP】
    HDU 1024 Max Sum Plus Plus【DP,最大m子段和】
    占坑补题。。最近占的坑有点多。。。
    Codeforces 659F Polycarp and Hay【BFS】
    Codeforces 659E New Reform【DFS】
    Codeforces 659D Bicycle Race【计算几何】
    廖大python实战项目第四天
    廖大python实战项目第三天
  • 原文地址:https://www.cnblogs.com/tourey-fatty/p/12094343.html
Copyright © 2011-2022 走看看