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.