/*轮播效果*/ * { margin: 0; padding: 0; } .box { margin-top: 75px; width: 100%; height: 300px; position: relative; } .list { width: 100%; height: 420px; overflow: hidden; position: absolute; left: 0%; margin-left: 0px; } .btn { position: absolute; top: 50%; margin-top: -50px; width: 60px; height: 100px; line-height: 100px; font-size: 30px; color: white; text-decoration: none; text-align: center; background: rgba(0, 255, 0, .5); cursor: pointer; } .next { right: 0; } li { position: absolute; top: 0; left: 0; list-style: none; opacity: 0; transition: all 0.3s ease-out; } img { width: 80%; border: none; float: left; } .p1 { transform: translate3d(150px, 0, 0) scale(0.81); transform-origin: 0 50%; opacity: 0.8; z-index: 2; } .p2 { transform: translate3d(0px, 0, 0) scale(0.81); transform-origin: 0 50%; opacity: 0.8; z-index: 2; } .p3 { transform: translate3d(40px, 0, 0) scale(1); z-index: 3; opacity: 1; } .p4 { transform: translate3d(449px, 0, 0) scale(0.81); transform-origin: 100% 50%; opacity: 0.8; z-index: 2; } .p5 { transform: translate3d(672px, 0, 0) scale(0.81); } .p6 { transform: translate3d(896px, 0, 0) scale(0.81); } .p7 { transform: translate3d(1120px, 0, 0) scale(0.81); } .buttons { position: absolute; width: 90%; /*height: 30px;*/ bottom: -180px; left: 5%; /*margin-left: -150px;*/ text-align: center; padding-top: 10px; overflow: hidden; } .buttons a { float: left; display: block; width: 15%; margin: 0 8% 0 10%; } .buttons a img { margin: 0 auto; width: 44px; height: 44px; } span { display: block; width: 35px; height: 1px; background: red; } /*.blue { background: blue; }*/