介绍 & lt; style>
,,*{保证金:0;填充:0}
,,.wrap {
,,,,,,
,,}
,,.container {
,,,,,,宽度:,100%;
,,,,,,溢出:,隐藏;
,,,,,,/*,身高:400 px;, */,,,,,,背景:,红色;
,,,,,,位置:,相对;
,,}
,,.box{宽度:125%;
,,,,,,身高:,汽车;
,,,,,,显示:,flex;
,,,,,,,对齐项目:,中心;
,,,,,,,位置:,相对;
,,,,,,,左:,0;
,,,,,,}
,,,李{.box
,,,,,,,宽度:,20%;
,,,,,,,:浮动,离开;
,,,,,,,list-style:,没有;
,,,,,,,-webkit-transition:, width 0.5 s, height 0.5年代,margin 0.5年代;
,,,,,,,位置:,相对;
,,,}
,,,.box video {
,,,,,,,宽度:,100%;
,,,,,,,身高:,100%;
,,,}
,,,.box li div {
,,,,,,,位置:,绝对;
,,,,,,,:,0;
,,,,,,,底部:,0;
,,,,,,,左:,0;
,,,,,,,对的:,0;
,,,}
,,,.box li div img {
,,,,,,,宽度:,100%;
,,,,,,,身高:,100%;
,,,}
,,,/*,.box 李:nth-child (2) {
,,,,,,,身高:,360 px;
,,,,,,,保证金:,0,1%;
,,,}*/,,,,,,.goLeft .goRight {
,,,,,,,位置:,绝对;
,,,,,,,宽度:,28 px;
,,,,,,,身高:,52 px;
,,,,,,,:,50%;
,,,,,,,变换:,翻译(0 -50%);
,,,,,,,光标:,指针;
,,,,,,,:边境,没有;
,,,,,,,:轮廓,没有;
,,,,,,,行高:,52 px;
,,,}
,,,.goLeft {
,,,,,,,左:,20%;
,,,}
,,,.goRight {
,,,,,,,对的:,20%;
,,,}
,,,.box li> p {
,,,,,,,保证金:,0;
,,,,,,,颜色:,# fff;
,,,,,,,位置:,绝对;
,,,,,,,:,50%;
,,,,,,,左:,50%;
,,,,,,,变换:,翻译(-50%,-50%);
,,,,,,,text-align:,中心;
,,,}
,,,.box li> p> span {
,,,,,,,显示:,inline-block;
,,,,,,,宽度:,100 px;
,,,,,,,身高:,100 px;
,,,,,,,背景:,url (play.png);
,,,}
,,,.ddd {
,,,,,,,宽度:,100%;
,,,,,,,身高:,360 px;
,,,,,,,显示:,flex;
对齐项目:中心;
位置:,相对;
,,,}
,,,.dd-2 {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下html5 + css怎么实现中间大两头小的轮播效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
国际惯例,先上效果
css:
