css+js实现简洁的图文幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:css+js实现简洁的图文幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css"> <style> body { margin: 0; padding: 0; background: #d1f3d1; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-content: center; } * { font-family: sans-serif; color: #fff; } /*VIDEO*/ /*...Videos All..*/ .video__1 { background: #c2ffc1; display: none; background-image: url("//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png"); } .video__2 { background: #ff7575; background-image: url("//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png"); } .video__3 { background: #fffea5; display: none; background-image: url("//repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png"); } .video__attribute-noDisplay { display: none; } .video { background: rgba(26, 26, 26, 0.9); max-width: 900px; margin: auto; border-radius: 0px; } .video .video__container { display: flex; max-width: 900px; margin: auto; /*...Copy...*/ /*...Video...*/ /*...Nav...*/ } .video .video__container .video__copy { padding: 30px; width: max-content; width: 30%; text-align: left; } .video .video__container .video__copy h1 { font-size: 3rem; margin: 0; } .video .video__container .video__copy h2 { margin: 15px 0 30px; } .video .video__container .video__copy h2 small { font-size: 14px; } .video .video__container .video__copy p { font-size: 20px; } .video .video__container .video__copy p small { font-size: 12px; display: -webkit-inline-box; } .video .video__container .video__copy .video_time { display: none; font-size: 12px; margin: 15px 0 0; } .video .video__container .video__copy .video__copy__upNext { margin: 60px 0 0 0; width: 100%; } .video .video__container .video__copy .video__copy__upNext video { max-width: 200px; margin: 15px 0 10px 0; border-radius: 0px; } .video .video__container .video__copy .video__copy__upNext p { margin: 0; padding: 0; } .video .video__container .video__copy .video__copy__upNext .video__upNext__vidDesc { font-size: 12px; } .video .video__container .video__embed { margin: 30px 0 -30px; width: 60%; } .video .video__container .video__embed video { width: 100%; height: 100%; border-radius: 0px; background-size: cover; background-position: center; background-repeat: no-repeat; } .video .video__container .video__nav { display: flex; flex-direction: column; align-content: center; justify-content: center; width: 10%; } .video .video__container .video__nav button { background: transparent; border: none; font-size: 30px; cursor: pointer; } .video .video__container .video__nav .video__nav__bottom { transform: rotate(180deg); } .video .video__container .video__nav .video__nav__number { margin: 15px 0px; } .video .video__container .video__nav .video__nav__number p { padding: 0; margin: 2px 0; text-align: center; } /*ANIMATIONS*/ .animateLeft { display: block; } .video__upNext__vidDesc { animation-delay: 0.3s; } .video__upNext__vid { animation-delay: 0.3s; background-size: cover; background-position: center; background-repeat: no-repeat; } @media screen and (max-width: 600px) { .video__copy h1 { width: 100%; font-size: 10vw !important; } .video__copy__upNext video { width: 100%; } .video .video__container { position: relative; } .video .video__container .video__nav { position: absolute; bottom: 0; flex-direction: row !important; width: calc(50% - 12vw); } .video .video__container .video__nav .video__nav__number { display: flex; } button#video_btn { transform: rotate(270deg); margin: 0 10px; } button.video__nav__bottom.video_btn { transform: rotate(90deg) !important; margin: 0 10px; } .video .video__container .video__copy .video__copy__upNext { margin: 40px 0 0 0; } .video .video__container .video__copy { padding: 30px 30px 60px 15px; } .video .video__container .video__copy .video__copy__upNext video { margin: 10px 0; } .video .video__container .video__nav .video__nav__number { padding: 0 2px; } p.video__nav__number-spacer { margin: 2px 5px !important; } } </style> </head> <body> <!-- partial:index.partial.html --> <center> <main class="video"> <div class="video__container"> <section class="video__copy"> <h1>Sweets </h1> <h2> <small>Top Treats of the Week</small> </h2> <p class="video__title"> Lollipop <span class="video_time ">Bubblegum </span> </p> <p class="video__title"> Cupcakes <span class="video_time">Vanilla with sprinkles</span> </p> <p class="video__title">Ice Cream <span class="video_time">Cherry Vanilla</span> </p> <div class="video__copy__upNext"> <p><small>UP NEXT</small></p> <!--.........完整代码请登录后点击上方下载按钮下载查看
网友评论0