CSS3 animation实现简易幻灯片轮播特效

CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;

但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)

效果图

代码

1.   
2.   
3.   
4.   
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;   
22.   
23.         }   
24.   
25.   
26.   
27.         @-webkit-keyframes slider {   
28.             0% {   
29.                 background-image: url(1.jpg) ;   
30.             }   
31.             25% {   
32.                 background-image: url(2.jpg) ;   
33.   
34.             }   
35.             50% {   
36.                 background-image: url(3.jpg) ;   
37.   
38.             }   
39.             75% {   
40.                 background-image: url(4.jpg);   
41.   
42.             }   
43.             100% {   
44.                 background-image: url(5.jpg);   
45.   
46.             }   
47.         }   
48. @keyframes slider {   
49.             0% {   
50.                 background-image: url(1.jpg) ;   
51.   
52.             }   
53.             25% {   
54.                 background-image: url(2.jpg) ;   
55.   
56.             }   
57.             50% {   
58.                 background-image: url(3.jpg) ;   
59.   
60.             }   
61.             75% {   
62.                 background-image: url(4.jpg);   
63.   
64.             }   
65.             100% {   
66.                 background-image: url(5.jpg);   
67.   
68.             }   
69.         }   
70.   
71.   
72.       
73.   
74.   
75.   
76.       
77.