ul, li { list-style: none; padding: 0; margin: 0; } .own-carousel li { float: left; } .own-carousel { position: relative; } .own-carousel ul { position: relative; min-height: 565px; overflow: hidden; } .carousel-li { position: absolute; width: 64%; z-index: -1; left: 100%; transition: all .5s linear; } .hide-prev { left: -64%; } .own-carousel li a { display: block; height: 100%; } .own-carousel li a img { width: 100%; height: 100%; } .active-carousel { left: 50%; z-index: 2; transform: translateX(-50%); } .active-hide{ left: -64%; } .active-prev { left: 0; } .active-prev, .active-next { z-index: 1; } .active-prev::after, .active-next::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #00000069; } .active-next { left: 82%; } .own-carousel>span { position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 150px; cursor: pointer; z-index: 5; } .prev-btn { left: 18%; background: url(../images/ly6-left.png) no-repeat; background-size: cover; } .next-btn { right: 18%; background: url(../images/ly6-right.png) no-repeat; background-size: cover; } .carousel-age { width: 70px; height: 70px; background: #D52633; left: -35px; color: #fff; position: absolute; top: 50%; transform: translateY(-50%); } .carousel-age>p { margin: 0; padding: 5px; } .carousel-number { position: absolute; top: 0; left: 0; } .carousel-length { position: absolute; bottom: 0; right: 0; font-size: 24px; } .bias-line { position: absolute; width: 114%; height: 2px; background: #fff; top: 50%; transform: rotateZ(135deg) translateX(3px) translateY(4px); } .carousel-info { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 999; color: #fff; width: 670px; background: #0000005e; padding: 30px 30px 30px 50px; } .carousel-title { font-size: 30px; } .carousel-content>a{ color: #fff; } .carousel-text { margin: 10px auto 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 1.5em; height: 3em; -webkit-line-clamp: 2; /*这里修改为要显示的行数*/ -webkit-box-orient: vertical; }