html自动轮播中间放大,html5+css实现中间大两头小的轮播效果的教程

*{margin: 0;padding: 0}

.wrap{

}

.container{

width: 100%;

overflow: hidden;

/* height: 400px; */

background: red;

position: relative;

}

.box{width: 125%;

height: auto;

display: flex;

align-items: center;

position: relative;

left: 0;

}

.box li{

width: 20%;

float: left;

list-style: none;

-webkit-transition: width 0.5s, height 0.5s, margin 0.5s;

position: relative;

}

.box video {

width: 100%;

height: 100%;

}

.box li div {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.box li div img {

width: 100%;

height: 100%;

}

/* .box li:nth-child(2){

height: 360px;

margin: 0 1%;

} */

.goLeft, .goRight {

position: absolute;

width: 28px;

height: 52px;

top: 50%;

transform: translate(0,-50%);

cursor: pointer;

border: none;

outline: none;

line-height: 52px;

}

.goLeft {

left: 20%;

}

.goRight {

right: 20%;

}

.box li>p {

margin: 0;

color: #fff;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

text-align: center;

}

.box li>p>span {

display: inline-block;

width: 100px;

height: 100px;

background: url(play.png);

}

.ddd{

width: 100%;

height: 360px;

display: flex;

align-items: center;

position: relative;

}

.dd-2{

width: 20%;

background: yellow;

}

.aa{

width: 100%;

}