html动画的基本知识点，用动画做出一个轮播图

╰半橙微兮° 2021-09-15 15:00 326阅读 0赞

定义动画关键帧方案

@keyframe 动画名\{

0%(from)\{

样式

100%(to)\{

样式

设置动画名称(关键帧)

animation-name:动画名;

动画播放时间

animation-duration: 2s;

动画播放完成后的停止位置

默认是backwards:播放完成后回到第一个关键帧样式

forwards：播放完成后回到最后一个关键帧样式

animation-fill-mode:forwards;

动画关键帧执行方向

指动画方案 0%-100% normal

100%往0% reverse

0%-100%-0% alternate(至少要播放2次，否则无法实现)

animation-direction:alternate;

动画播放次数 infinite 表示无限次数

animation-iteration-count:infinite;

动画延时

animation-delay: 3s;

动画的播放控制  播放running(默认值) 暂停:paused;

animation-play-state: paused;

多个动画样式的设置

例如：animation:move 2s 1 linear,rotate 2s 2s 1 linear;

![70][]

![70 1][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>轮播图</title>
    	<style media="screen">
    	@-webkit-keyframes mov1{
    		0%{
    			transform: translateX(0);
    		}
    		20%{
    			transform: translateX(0);
    		}
    		25%{
    			transform: translateX(-800px);
    		}
    		45%{
    			transform: translateX(-800px);
    		}
    		50%{
    			transform: translateX(-1600px);
    		}
    		70%{
    			transform: translateX(-1600px);
    		}
    		75%{
    			transform: translateX(-2400px);
    		}
    		95%{
    			transform: translateX(-2400px);
    		}
    		100%{
    			transform: translateX(-3200px);
    		}
    	}
    	@-webkit-keyframes mov2{
    		0%{
    			transform: translateY(0);
    		}
    		20%{
    			transform: translateY(0);
    		}
    		25%{
    			transform: translateY(-40px);
    		}
    		45%{
    			transform:translateY(-40px);
    		}
    		50%{
    			transform: translateY(-80px);
    		}
    		70%{
    			transform: translateY(-80px);
    		}
    		75%{
    			transform: translateY(-120px);
    		}
    		95%{
    			transform: translateY(-120px);
    		}
    		100%{
    			transform: translateY(-160px);
    		}
    	}
    	@-webkit-keyframes span1{
    		0%{
    			background: white;
    		}
    		24%{
    			background: white;
    		}
    		25%{
    			background: gray;
    		}
    		100%{
    			background: gray;
    		}
    	}
    	@-webkit-keyframes span2{
    		0%{
    			background:gray;
    		}
    		24%{
    			background: gray;
    		}
    		25%{
    			background: white;
    		}
    		49%{
    			background: white;
    		}
    		50%{
    			background: gray;
    		}
    		100%{
    			background: gray;
    		}
    	}
        @-webkit-keyframes span3{
            0%{
              background: gray;
            }
            24%{
              background: gray;
            }
            25%{
              background: gray;
            }
            49%{
              background: gray;
            }
            50%{
              background: white;
            }
            74%{
              background: white;
            }
            75%{
              background: gray;
            }
            100%{
              background: gray;
            }
          }
       @-webkit-keyframes span4{
            0%{
              background: gray;
            }
            24%{
              background: gray;
            }
            25%{
              background: gray;
            }
            49%{
              background: gray;
            }
            50%{
              background: gray;
            }
            74%{
              background: gray;
            }
            75%{
              background: white;
            }
            99%{
              background: white;
            }
            100%{
              background: gray;
            }
          }
    
           body,span,p{
    			padding:0;
    			margin:0;
    		}
    		.wrap{
    			width: 800px;
    			margin:200px auto;
    		}
    		.box{
    			position: relative;
    			overflow:hidden;
    		}
    		img{
    			width: 20%;
    			float: left;
    		}
    		.scroll:after{
                content: "";
                display: block;
                clear: both;
          	}
    		.mask{
    			position: absolute;
    			left:0;
    			bottom: 0;
    			z-index: 10;
    			background: rgba(0,0,0,0.6);
    			width: 100%;
    			height: 40px;
    
    		}
    		.text{
    			width: 100%;
    			height: 40px;
    			position: absolute;
    			left:0;
    			bottom:0;
    			z-index: 20;
    			line-height: 40px;
    			overflow:hidden;
    			color:black;
    			text-align: center;
    		}
    		.text p{
    		      animation: mov2 10s linear  infinite;
    
    		}
    		.scroll{
    			width: 4000px;
    			animation: mov1 10s linear infinite;
    		}
    		.btn{
    			margin:10px;
    			text-align: center;
    		}
    		span{
    			width: 7px;
    			height: 7px;
    			background: gray;
    			border:1px solid gray;
    			border-radius: 100%;
    			display: inline-block;
    			margin:0 10px;
    			
    		}
    	  .btn span:nth-child(1){
            animation: span1 10s linear infinite;
          }
          .btn span:nth-child(2){
            animation: span2 10s linear infinite;
          }
          .btn span:nth-child(3){
            animation: span3 10s linear infinite;
          }
          .btn span:nth-child(4){
            animation: span4 10s linear infinite;
          }
    
    		.wrap:hover .scroll{
    			animation-play-state: paused;
    		}
    		.wrap:hover p{
                animation-play-state: paused;
          	}
          	.wrap:hover span{
                animation-play-state: paused;
         	}
    
    	</style>
    
    </head>
    <body>
    	<div class="wrap">
    		<div class="box">
    			<div class="scroll">
    				<img src="./1.jpg" alt="">
    				<img src="./2.jpg" alt="">
    				<img src="./3.jpg" alt="">
    				<img src="./4.jpg" alt="">
    			</div>
    			<div class="mask"></div>
    			<div class="text">
    					<p>看头条</p>
                		<p>癌症大数据</p>
                		<p>今日头条</p>
                		<p>易车网</p>
    			</div>
    		</div>
    		<div class="btn">
    			<span></span>
    			<span></span>
    			<span></span>
    			<span></span>
    		</div>
    	</div>
    
    </body>
    </html>

[70]: /images/20210813/fdd8fdeb8ed34313bdae6eb437c1d863.png
[70 1]: /images/20210813/b84e97292684485d85854335b93d4b6b.png