www.gusucode.com > 200套html5精品模板101_150 > 200套html5精品模板101_150/133/css/eislider.css
.ei-slider{ position: relative; width: 100%; max-width: 100%; height: 400px; margin: 0 auto; z-index:100; } .ei-slider-loading{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index:999; background: rgba(0,0,0,0.9); color: #fff; text-align: center; line-height: 400px; } .ei-slider-large{ height: 100%; width: 100%; position:relative; overflow: hidden; } .ei-slider-large li{ position: absolute; top: 0px; left: 0px; overflow: hidden; height: 100%; width: 100%; } .ei-slider-large li img{ width: 100%; } .ei-title{ position: absolute; right: 13%; top: 50%; } .ei-title h2, .ei-title h3{ text-align: right; filter: alpha(opacity=70); background: #222; background: rgba(0, 0, 0, 0.7); line-height:24px; padding:10px; color:#fff; } .ei-title h2{ float:right; } .ei-title h3{ clear:both; } .ei-slider-thumbs{ height: 10px; top:-10px; margin:0 auto; position: relative; width:100%; max-width:1030px !important; z-index:10000000; } .ei-slider-thumbs li{ position: relative; float: left; height: 100%; } .ei-slider-thumbs li.ei-slider-element{ top: 0px; left: 0px; position: absolute; height: 100%; z-index: 10; text-indent: -9000px; background-image:url(../images/transparent-pattern.png); } .ei-slider-thumbs li a{ display: block; text-indent: -9000px; border-right:1px solid #111; background-color:#e9292d; background-image:url(../images/transparent-pattern.png); width: 100%; height: 100%; cursor: pointer; -webkit-transition: background 0.2s ease; -moz-transition: background 0.2s ease; -o-transition: background 0.2s ease; -ms-transition: background 0.2s ease; transition: background 0.2s ease; } .ei-slider-thumbs li a:hover{ background-color: #AC4848; background-image:url(../images/transparent-pattern.png); } .ei-slider-thumbs li:last-child a{ border-right:0; } .ei-slider-thumbs li img{ position: absolute; bottom: 50px; opacity: 0; z-index: 999; max-width: 100%; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; /* -webkit-box-reflect: below 0px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.3)) );*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .ei-slider-thumbs li:hover img{ opacity: 1; bottom: 10px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } @media only screen and (max-width: 959px) { .ei-slider { height:310px; } .ei-slider-thumbs{ width:748px; } .ei-title { display:none; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .ei-title { right:5%; } } @media only screen and (max-width: 767px) { #slider-wrapper{margin-top:0;} .ei-slider{ height:180px; } .ei-slider-thumbs{ width:420px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { } @media only screen and (max-width: 480px) { .ei-slider{ height:130px; } .ei-slider-thumbs{ width:300px; } }