css+js实现波纹涟漪过渡效果轮播图幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:css+js实现波纹涟漪过渡效果轮播图幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url("https://fonts.googleapis.com/css?family=Heebo:800"); * { margin: 0; padding: 0; box-sizing: border-box; } body{background-color: #1F1F1F;overflow: hidden} .parent { width: 681px; height: 384px; top: 0; bottom: 0; left: 0; right: 0; margin: auto auto; overflow: hidden; position: absolute; border-radius: 16px; -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75); box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75); } svg { position: absolute; z-index: 1; width: 681px; height: 384px; } button { position: absolute; z-index: 50; width: 40px; overflow: hidden; height: 40px; border: none; border-radius: 50%; background: #fff; cursor: pointer; -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75); box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75); } button:focus { outline-width: 0; } circle { stroke: #fff; fill: none; transition: 0.3s; } #svg1 circle { transition-timing-function: linear; } #svg2 circle { transition-timing-function: linear; } #Capa_1 { position: absolute; width: 16px; height: 16px; transform: translate(-7px, -8px); } #Capa_2 { position: absolute; width: 16px; height: 16px; transform: translate(-9px, -8px); } .right { margin-left: 628px; margin-top: 168px; border: 1px solid #849494; background-color: transparent; transition: 0.5s; } .right:hover { background-color: #fff; } .left { margin-left: 0.5%; margin-top: 168px; border: 1px solid #849494; background-color: transparent; transition: 0.5s; } .left:hover { background-color: #fff; } .circle1 { transition-delay: 0.05s; } .circle2 { transition-delay: 0.1s; } .circle3 { transition-delay: 0.15s; } .circle4 { transition-delay: 0.2s; } .circle5 { transition-delay: 0.25s; } .circle6 { transition-delay: 0.3s; } .circle7 { transition-delay: 0.35s; } .circle8 { transition-delay: 0.4s; } .circle9 { transition-delay: 0.45s; } .circle10 { transition-delay: 0.05s; } .circle11 { transition-delay: 0.1s; } .circle12 { transition-delay: 0.15s; } .circle13 { transition-delay: 0.2s; } .circle14 { transition-delay: 0.25s; } .circle15 { transition-delay: 0.3s; } .circle16 { transition-delay: 0.35s; } .circle17 { transition-delay: 0.4s; } .circle18 { transition-delay: 0.45s; } .slide1 { background-image: url("//repo.bfw.wiki/bfwrepo/image/6130b895b7e70.png"); } .slide2 { background-image: url("//repo.bfw.wiki/bfwrepo/image/5e83e2a63bb7a.png"); } .slide3 { background-image: url("//repo.bfw.wiki/bfwrepo/image/5df879813a5ac.png"); } .slide4 { background-image: url("//repo.bfw.wiki/bfwrepo/image/5e0c20c9287d0.png"); } .slider { position: absolute; width: 400%; height: 100%; background: #000; display: inline-flex; overflow: hidden; } .slide1, .slide2, .slide3, .slide4 { position: absolute; background-position: center; background-size: cover; color: #fff; font-size: 62px; padding-top: 138px; font-weight: 800; font-family: "Heebo", sans-serif; text-align: center; width: 25%; height: 100%; z-index: 10; transition: 1.4s; } .tran { transform: scale(1.3); } .up1 { z-index: 20; } .up2 { z-index: 40; } .steap { stroke-width: 0; } .streak { stroke-width: 82px; } @media (max-width: 700px) { .parent { margin-left: 1%; } } </style> </head> <body> <div class='parent'> <div class='slider'> <button type="button" id='right' class='right' name="button"> <svg version="1.1" id="Capa_1" width='40px' height='40px ' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve"> <g> <path style='fill: #9d9d9d;' d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5 c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z "/> </g> </svg> </button> <button type="button" id='left' class='left' name="button"> <svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve"> <g> <path style='fill: #9d9d9d;' d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/> </g> </svg> </button> <svg id='svg2' class='up2' xmlns="http:/.........完整代码请登录后点击上方下载按钮下载查看
网友评论0