js+css实现图文上下滑动幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现图文上下滑动幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import url('https://fonts.googleapis.com/css?family=Open+Sans'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Open Sans', sans-serif; height: 100vh; } button { background-color: #fff; border: 0; color: #aaa; cursor: pointer; font-size: 16px; padding: 15px; transition: color .2s ease-in; } button:hover { color: #222; } button:focus { outline: 0; } .slider-container { position: relative; overflow: hidden; width: 100vw; height: 100vh; } .left-slide { height: 100%; position: absolute; top: 0; left: 0; width: 35%; transition: transform .5s ease-in-out; } .left-slide > div { align-items: center; color: #fff; display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%; } .left-slide h1 { font-size: 40px; margin-bottom: 10px; margin-top: -30px; } .right-slide { height: 100%; position: absolute; top: 0; left: 35%; width: 65%; transition: transform .5s ease-in-out; } .right-slide > div{ background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; width: 100%; } .slider-container .action-buttons button { position: absolute; left: 35%; top: 50%; z-index: 100; } .slider-container .action-buttons .down-button { border-top-left-radius: 5px; border-bottom-left-radius: 5px; transform: translateX(-100%); } .slider-container .action-buttons .up-button { border-top-right-radius: 5px; border-bottom-right-radius: 5px; transform: translateY(-100%); } footer { bottom: 0; background-color: #222; color: #fff; font-family: 'Open Sans', 'Arial', sans-serif; padding: 10px; position: fixed; left: 0; right: 0; letter-spacing: 1px; text-align: center; } footer i { color: red; } footer a { color: #3C97BF; text-decoration: none; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="slider-container"> <div class="left-slide"> <div style="background-color: #FD3555"> <h1>Nature flower</h1> <p>all in pink</p> </div> <div style="background-color: #2A8.........完整代码请登录后点击上方下载按钮下载查看
网友评论0