純css製作一個簡單的幻燈片效果
<html>
div.ani
<style>
.ani{
width: 480px;
height: 320px;
margin: 50px auto;
overflow: hidden;
box-shadow: 0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";//動畫名稱
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;//動畫無限次播放
}
@-webkit-keyframes "loops" {
0% {
background-color: black;
}
25% {
background-color: red;
}
50% {
background-color: pink;
}
75% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
</style>