jquery实现图文大气幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery实现图文大气幻灯片切换效果代码,切换按钮在标题文字下面,点击即可切换幻灯片。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> body { background: #aaa; font-family: "Open Sans", sans-serif; } .slider { position: relative; height: 100vh; width: 100vw; background: #777; overflow: hidden; } .slider__wrap { position: absolute; width: 100vw; height: 100vh; transform: translateX(100vw); top: 0%; left: 0; right: auto; overflow: hidden; transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86); transform-origin: 0% 50%; transition-delay: 450ms; opacity: 0; } .slider__wrap--hacked { opacity: 1; } .slider__back { position: absolute; width: 100%; height: 100%; background-size: auto 100%; background-position: center; background-repeat: none; transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .slider__inner { width: 100%; height: 100%; position: absolute; top: 0; left: 0%; background-size: auto 133.3333%; background-position: center; background-repeat: none; transform: scale(0.75); transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end; opacity: 0; box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0); padding: 15vh; box-sizing: border-box; } .slider__content { position: relative; top: 50%; width: auto; transform: translateY(-50%); color: white; font-family: "Heebo", sans-serif; opacity: 0; transition: opacity 450ms; } .slider__content h1 { font-weight: 900; font-size: 9vh; line-height: 0.85; margin-bottom: 0.75vh; pointer-events: none; text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1); } .slider__content a { cursor: pointer; font-size: 2.4vh; letter-spacing: 0.3vh; font-weight: 100; position: relative; } .slider__content a:after { content: ""; display: block; width: 9vh; background: white; height: 1px; position: absolute; top: 50%; left: 6vh; transform: translateY(-50%); transform-origin: 0% 50%; transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .slider__content a:before { content: ""; border-top: 1px solid white; border-right: 1px solid white; display: block; width: 1vh; height: 1vh; transform: translateX(0) translateY(-50%) rotate(45deg); position: absolute; font-family: "Heebo", sans-serif; font-weight: 100; top: 50%; left: 15vh; transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .slider__content a:hover:after { transform: scaleX(1.5); transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .slider__content a:hover:before { transform: translateX(6vh) translateY(-50%) rotate(45deg); transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .slider__slide { position: absolute; left: 0; height: 100vh; width: 100vw; transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-delay: 600ms; pointer-events: none; z-index: 0; } .slider__slide--active { transform: translatex(0%); z-index: 2; } .slider__slide--active .slider__wrap { transform: translateX(0); transform-origin: 100% 50%; opacity: 1; -webkit-animation: none; animation: none; } .slider__slide--active .slider__back { filter: blur(1.5vh); transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-delay: 900ms !important; } .slider__slide--active .slider__inner { transform: scale(0.8); box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2); pointer-events: auto; opacity: 1; transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end; transition-delay: 900ms; } .slider__slide--active .slider__content { opacity: 1; transition-delay: 1350ms; } .slider__slide:not(.slider__slide--active) .slider__wrap { -webkit-animation-name: hack; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0