css 纯css轮播图 示例

标签：href   styles   init   add   --   20px   idt   position   over    1 DOCTYPE html> 2 3 4 5 纯css动画实现轮播图展示 6 7 8 @keyframes move{ 9 0%{ 10 transform:translateX(0%); 11 } 12 20%{ 13 transform:translateX(0%); 14 } 15 25%{ 16 transform:translateX(-500px); 17 } 18 45%{ 19 transform:translateX(-500px); 20 } 21 50%{ 22 transform:translateX(-1000px); 23 } 24 70%{ 25 transform:translateX(-1000px); 26 } 27 75%{ 28 transform:translateX(-1500px); 29 } 30 95%{ 31 transform:translateX(-1500px); 32 } 33 100%{ 34 transform:translateX(-2000px); 35 } 36 37 } 38 .wrap{ 39 width:500px; height:320px; 40 position:relative; margin:50px auto; 41 border:5px solid #f00; 42 overflow:hidden; 43 } 44 ul,li{margin:0; padding:0; list-style:none;} 45 img{vertical-align: top; border:none;} 46 .list{width:500%; animation: move 7s linear infinite} 47 .list li{float:left; width:500px; height:320px;} 48 .list img{width:100%; height:100%;} 49 50 51 52 53 57 58 59 60 61 62 63 64 65 66 67 68  css 纯css轮播图 示例标签：href   styles   init   add   --   20px   idt   position   over   原文地址：https://www.cnblogs.com/weihexinCode/p/12318234.html