CSS3中怎么利用animation实现幻灯片轮播特效-创新互联

CSS3 中怎么利用animation实现幻灯片轮播特效，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

代码

5.     

6.     

7.     

8.         .items {

9.             width: 280px;

10.             height: 150px;

11.             border: 1px solid #ddd;

12.                 box-sizing: border-box;

13.                 border-radius:10px;

14.                 background-size: cover;

15.             -webkit-transform: translateZ(0);

16.             transform: translateZ(0);

17.                 background-repeat: no-repeat;

18.             -webkit-animation: slider 15s linear infinite alternate;

19.             animation: slider 15s linear infinite alternate;

20.             -webkit-transform-origin: center center;

21.                     transform-origin: center center;

23.         }

27.         @-webkit-keyframes slider {

28.             0% {

29.                 background-image: url(1.jpg) ;

30.             }

31.             25% {

32.                 background-image: url(2.jpg) ;

34.             }

35.             50% {

36.                 background-image: url(3.jpg) ;

38.             }

39.             75% {

40.                 background-image: url(4.jpg);

42.             }

43.             100% {

44.                 background-image: url(5.jpg);

46.             }

47.         }

48. @keyframes slider {

49.             0% {

50.                 background-image: url(1.jpg) ;

52.             }

53.             25% {

54.                 background-image: url(2.jpg) ;

56.             }

57.             50% {

58.                 background-image: url(3.jpg) ;

60.             }

61.             75% {

62.                 background-image: url(4.jpg);

64.             }

65.             100% {

66.                 background-image: url(5.jpg);

68.             }

69.         }

72.     

76.     

77.