请输入名称
2016-04-13 22:19
*{margin:0;padding:0;} body{padding:0px 0;background-color: #fff;font-size: 14px;font-family: 'Avenir Next';color: #555;-webkit-font-smoothing:antialiased;} .slider .main .main-i,.slider .main,.slider{width: 100%;height: 400px;position: relative;} .slider .main{overflow: hidden;} .slider .main .main-i{} .slider .main .main-i img{width: 100%;position: absolute;left: 0;top:0;z-index: 1;} .slider .main .main-i .caption{position: absolute;right: 50%;top:30%;z-index: 9;} .slider .main .main-i .caption h2{font-size: 50px;line-height: 50px;color: #B5B5B5;text-align: right;} .slider .main .main-i .caption h3{font-size: 70px;line-height: 70px;color: #000000;text-align: right;} .slider .ctrl{width: 100%;height: 13px;line-height: 13px;text-align: center;position: absolute;left: 0;bottom: -13px;} .slider .ctrl .ctrl-i{display: inline-block;width: 150px;height: 13px;background-color: #666;box-shadow: 0 1px 1px rgba(0,0,0,.3);position: relative;margin-left: 1px;} .slider .ctrl .ctrl-i img{width:100%;position: absolute;left: 0;bottom: 50px;z-index: 1; opacity: 0;transition: all 0.3s ease;} .slider .ctrl .ctrl-i:hover{background-color: #F0F0F0;} .slider .ctrl .ctrl-i:hover img{bottom:13px; -webkit-box-reflect:below 0px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(50%,transparent), to( rgba(255,255,255,.3) ) ); opacity: 1; } .slider .ctrl .ctrl-i_active:hover,.slider .ctrl .ctrl-i_active{background-color: #000;} .slider .ctrl .ctrl-i_active:hover img{opacity:0;}
.slider .ctrl .ctrl-i_active:hover,.slider .ctrl .ctrl-i_active{background-color: #000;}
.slider .ctrl .ctrl-i_active:hover img{opacity:0;}
就是这里
JS+CSS3实现带预览图幻灯片效果
53759 学习 · 265 问题
相似问题