owl.carousel实现一个多图层叠图文幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:owl.carousel实现一个多图层叠图文幻灯片效果代码
代码标签: owl.carousel 多图 层叠 图文 幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/owl.carousel.2.3.4.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap"); .banner_carousel_wrapper { background-color: black; padding: 70px 0; } .banner_carousel_wrapper .logo_wrapper { position: absolute; top: 120px; left: calc(50% + 290px); color: #FF08FF; } .banner_carousel_wrapper .logo_wrapper .logo_text { display: block; font-family: "Roboto", sans-serif; line-height: 20px; font-size: 16px; font-weight: 300; color: white; letter-spacing: 1px; } .banner_carousel_wrapper .banner .owl-item.active .title { animation: fadeTitle 1s forwards; } .banner_carousel_wrapper .banner .owl-item .item { display: flex; align-items: center; justify-content: center; width: 100%; position: relative; } .banner_carousel_wrapper .banner .owl-item .item .title { position: absolute; font-family: "DM Serif Display", serif; font-size: 90px; white-space: nowrap; color: white; font-weight: 400; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.4s; } .banner_carousel_wrapper .banner .owl-item .item .gallery_wrapper { width: 520px; height: 520px; position: relative; overflow: hidden; } .banner_carousel_wrapper .banner .owl-item .item .gallery_wrapper .picture_wrapper { position: absolute; border-radius: 20px; overflow: hidden; } .banner_carousel_wrapper .banner .owl-item .item .gallery_wrapper .picture_wrapper.down { left: 0; right: 0; top: 50px; bottom: 50px; } .banner_carousel_wrapper .banner .owl-item .item .gallery_wrapper .picture_wrapper.up { left: 50px; right: 50px; top: 0; bottom: 0; } .banner_carousel_wrapper .banner .owl-item .item .gallery_wrapper .picture_wrapper img { height: 100%; width: 100%; object-fit: cover; } .banner_carousel_wrapper .banner .owl-item .item .gallery_wrapper .title { color: transparent; -webkit-text-stroke: 2px white; } .banner_carousel_wrapper .owl_pagination { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 40px; } .banner_carousel_wrapper .owl_pagination .owl_dots { display: flex; align-items: center; margin-right: 20px; } .banner_carousel_wrapper .owl_pagination .owl_dots .owl-dot { height: 11px; width: 35px; cursor: pointer; position: relative; border: none; background: transparent; } .banner_carousel_wrapper .owl_pagination .owl_dots .owl-dot::before { position: absolute; content: ""; height: 1px; left: 0; right: 0; top: 50%; transform: translateY(-50%); background-color: white; } .banner_carousel_wrapper .owl_pagination .owl_dots .owl-dot.active::before { height: 3px; } .banner_carousel_wrapper .owl_pagination #counter { color: white; font-family: "Roboto", sans-serif; font-size.........完整代码请登录后点击上方下载按钮下载查看
网友评论0