<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.animationImg {
width: 720px;
height: 405px;
margin: 200px auto;
/* 溢出隐藏 */
overflow: hidden;
border: 1px solid;
/* 背景图的大小等于盒子的大小 */
background-size: cover;
/* 背景图居中 */
background-position: center;
/* 添加动画 */
animation: myloop 12s;
/* 动画的速度曲线 */
animation-timing-function: linear;
/* 动画的播放次数 infinite 无限循环*/
animation-iteration-count: infinite;
/* 动画是否逆向播放 */
animation-delay: initial;
}
@keyframes myloop {
0% {
background: url(img/1.jpeg) no-repeat;
}
25% {
background: url(img/1.jpg) no-repeat;
}
50% {
background: url(img/1.jpeg) no-repeat;
}
75% {
background: url(img/1.jpg) no-repeat;
}
100% {
background: url(img/1.jpeg) no-repeat;
}
</style>
</head>
<body>
<div class="animationImg"></div>
</body>
</html>
