swiper实现自适应响应式图文幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:swiper实现自适应响应式图文幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.4.5.1.css"> <style> @import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800"); * { box-sizing: border-box; } body { background-color: #FFE53B; background-image: linear-gradient(147deg, #FFE53B 0%, #fd3838 74%); min-height: 100vh; font-family: "Fira Sans", sans-serif; display: flex; } .blog-slider { width: 95%; position: relative; max-width: 800px; margin: auto; background: #fff; box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2); padding: 25px; border-radius: 25px; height: 400px; transition: all 0.3s; } @media screen and (max-width: 992px) { .blog-slider { max-width: 680px; height: 400px; } } @media screen and (max-width: 768px) { .blog-slider { min-height: 500px; height: auto; margin: 180px auto; } } @media screen and (max-height: 500px) and (min-width: 992px) { .blog-slider { height: 350px; } } .blog-slider__item { display: flex; align-items: center; } @media screen and (max-width: 768px) { .blog-slider__item { flex-direction: column; } } .blog-slider__item.swiper-slide-active .blog-slider__img img { opacity: 1; transition-delay: 0.3s; } .blog-slider__item.swiper-slide-active .blog-slider__content > * { opacity: 1; transform: none; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) { transition-delay: 0.3s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) { transition-delay: 0.4s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) { transition-delay: 0.5s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) { transition-delay: 0.6s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) { transition-delay: 0.7s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) { transition-delay: 0.8s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) { transition-delay: 0.9s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) { transition-delay: 1s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) { transition-delay: 1.1s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) { transition-delay: 1.2s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) { transition-delay: 1.3s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) { transition-delay: 1.4s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) { transition-delay: 1.5s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) { transition-delay: 1.6s; } .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) { transition-delay: 1.7s; } .blog-slider__img { width: 300px; flex-shrink: 0; height: 300px; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2); border-radius: 20px; transform: translateX(-80px); overflow: hidden; } .blog-slider__img:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); border-radius: 20px; opacity: 0.8; } .blog-slider__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; border-radius: 20px; transition: all 0.3s; } @media screen and (max-width: 768px) { .blog-slider__img { transform: translateY(-50%); width: 90%; } } @media screen and (max-width: 576px) { .blog-slider__img { width: 95%; } } @media screen and (max-height: 500px) and (min-width: 992px) { .blog-slider__img { height: 270px; } } .blog-slider__content { padding-right: 25px; } @media screen and (max-width: 768px) { .blog-slider__content { margin-top: -80px; text-align: center; padding: 0 30px; } } @media screen and (max-width: 576px) { .blog-slider__content { padding: 0; } } .blog-slider__content > * { opacity: 0; transform: translateY(25px); transition: all 0.4s; } .blog-slider__code { color: #7b7992; margin-bottom: 15px; display: block; font-weight: 500; } .blog-slider__title { font-size:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0