css实现百叶窗模糊过渡的幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:css实现百叶窗模糊过渡的幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body, html { font-size: 100%; padding: 0; margin: 0;} /* Reset */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } body{ font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; } a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;} a:hover,a:focus{color:#74777b;text-decoration: none;} .container{ margin: 0 auto; } * { box-sizing: border-box; } body { background-image: url(//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png); background-size:100%; } .container{ position: relative; width: 600px; height: 350px; margin: 60px auto 100px; font: 1em 'Rationale',sans-serif; } .slider, .img { width: inherit; height: inherit; } .slider { position: relative; overflow: hidden; background-color: #000; border:8px solid #eee; border-radius: 5px; box-shadow: 0 7px 20px rgba(0,0,0,.5); } .img { position: absolute; margin-left: -8px; perspective: 500px; } /*.img1 .frag { background: url(images/auto.jpg); background-size: cover; background-repeat: no-repeat; }*/ .img1 .frag {background-image: url(//repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90)} .img2 .frag {background-image: url(//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90) } .img3 .frag {background-image: url(//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90) } .img4 .frag {background-image: url(//repo.bfw.wiki/bfwrepo/image/5e6831472e8f7.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90)} .img5 .frag {background-image: url(//repo.bfw.wiki/bfwrepo/image/60b585fcce97a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90)} .img6 .frag {background-image: url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90)} .frag { width: 150px; height: inherit; float: left; opacity: 0; z-index: 0; transform-origin: center right; transform: rotateY(90deg) translateZ(100px) scale(1.5); transition: transform .6s, opacity .6s, -webkit-filter 2s ease-out; -webkit-filter: saturate(0) blur(10px) brightness(.6) contrast(4); } .img .frag2 { background-position: -150px 0; transition-delay: .2s; } .img .frag3 { background-position: -300px 0; transition-delay: .4s; } .img .frag4 { background-position: -450px 0; transition-delay: .6s; } .img .frag5 { background-position: -600px 0; transition-delay: .8s; } .img .frag6 { background-position: -750px 0; transition-delay: 1s; } #slide1:checked ~ .slider .img1 .frag, #slide2:checked ~ .slider .img2 .frag, #slide3:checked ~ .slider .img3 .frag, #slide4:checked ~ .slider .img4 .frag, #slide5:checked ~ .slider .img5 .frag, #slide6:checked ~ .slider .img6 .frag { transform: rotateY(0) translateZ(0) scale(1); -webkit-filter: saturate(1) blur(0) brightness(1) contrast(1); opacity: 1; z-index: 1; } .controls { position: absolute; bottom: -50px; left: 50%; margin-left: -115px; /*(6elem30px+5el10px)/2=115px*/ } .controls label { display: block; height: 10px; width: 30px; float: left; background-color: #000; margin-right: 10px; cursor: pointer; opacity: .2; transition:opacity .5s; } .controls label:hover, .side-controls label:hover, #slide1:checked ~ .controls label:nth-of-type(1), #slide2:checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4), #slide5:checked ~ .controls label:nth-of-type(5), #slide6:checked ~ .controls label:nth-of-type(6) { opacity: .8; } .side-controls label { position: absolute; display: block; border-top: 30px solid transparent; border-bottom: 30px solid transparent; top: 50%; margin-top: -15px; cursor: pointer; opacity: .2; transition:opacity .5s; } #slide1:checked ~ .side-controls label:nth-of-type(6), #slide2:checked ~ .side-controls label:nth-of-type(1), #slide3:checked ~ .side-controls label:nth-of-type(2), #slide4:checked ~ .side-controls label:nth-of-type(3), #slide5:checked ~ .side-controls label:nth-of-type(4), #slide6:checked ~ .side-controls label:nth-of-type(5) { left: -40px; border-right: 40px solid #000; } #slide1:checked ~ .side-controls label:nth-of-type(2), #slide2:checked ~ .side-controls label:nth-of-type(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0