HTML+CSS+JS实现 ❤️响应式图文卡片滑块展示特效❤️

效果演示：

代码目录：

主要代码实现：

CSS样式：

@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext");
html {position: relative;overflow-x: hidden !important;
}body {font-family: "Quicksand", sans-serif;
}a,
a:hover {text-decoration: none;
}.icon {display: inline-block;width: 1em;height: 1em;stroke-width: 0;stroke: currentColor;fill: currentColor;
}.background {position: fixed;width: 100%;height: 100%;left: 0;top: 0;
}.background:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(45deg, rgba(209, 0, 42, 0.6) 0%, #0E5DC4 100%);opacity: 0.9;
}.background img {width: 100%;height: 100%;object-fit: cover;pointer-events: none;user-select: none;
}.item-bg {width: 300px;height: 500px;position: absolute;top: 30px;background: #fff;border-radius: 10px;box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);opacity: 0;transition: all 0.3s;left: -30px;
}.item-bg.active {left: 0;top: 0;opacity: 1;
}.news-slider {z-index: 2;max-width: 1300px;margin-left: auto;margin-right: auto;margin-top: 60px;
}@media screen and (max-width: 1300px) {.news-slider {max-width: 1000px;}
}@media screen and (max-width: 576px) {.news-slider {margin-top: 45px;}
}.news-slider__wrp {display: flex;align-items: flex-start;position: relative;z-index: 2;
}.news-slider__item {width: 400px;flex-shrink: 0;
}@media screen and (max-width: 992px) {.news-slider__item {width: 340px;}
}.news-slider__item.swiper-slide {opacity: 0;pointer-events: none;transition: all 0.3s;
}.news-slider__item.swiper-slide-active,
.news-slider__item.swiper-slide-prev,
.news-slider__item.swiper-slide-next {opacity: 1;pointer-events: auto;
}.news-slider__ctr {position: relative;z-index: 12;
}.news-slider__arrow {background: #fff;border: none;display: inline-flex;width: 50px;height: 50px;justify-content: center;align-items: center;box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);border-radius: 50%;position: absolute;top: 50%;z-index: 12;cursor: pointer;outline: none !important;
}.news-slider__arrow:focus {outline: none !important;
}.news-slider__arrow .icon-font {display: inline-flex;
}.news-slider__arrow.news-slider-prev {left: 15px;transform: translateY(-50%);
}.news-slider__arrow.news-slider-next {right: 15px;transform: translateY(-50%);
}.news-slider__pagination {text-align: center;margin-top: 50px;
}.news-slider__pagination .swiper-pagination-bullet {width: 13px;height: 10px;display: inline-block;background: #fff;opacity: 0.2;margin: 0 5px;border-radius: 20px;transition: opacity 0.5s, background-color 0.5s, width 0.5s;transition-delay: 0.5s, 0.5s, 0s;
}.news-slider__pagination .swiper-pagination-bullet-active {opacity: 1;background: #ffffff;width: 100px;transition-delay: 0s;
}@media screen and (max-width: 576px) {.news-slider__pagination .swiper-pagination-bullet-active {width: 70px;}
}.news__item {padding: 40px;color: #fff;border-radius: 10px;display: block;transition: all 0.3s;
}@media screen and (min-width: 800px) {.news__item:hover {color: #222222;transition-delay: 0.1s;}.news__item:hover .news-date,.news__item:hover .news__title,.news__item:hover .news__txt {opacity: 1;transition-delay: 0.1s;}.news__item:hover .news__img {box-shadow: none;}
}.news__item.active {color: #222222;
}.news__item.active .news-date,
.news__item.active .news__title,
.news__item.active .news__txt {opacity: 1;
}.news__item.active .news__img {box-shadow: none;
}@media screen and (max-width: 992px) {.news__item {padding: 30px;}
}@media screen and (max-width: 576px) {.news__item {padding: 20px;}
}.news-date {padding-bottom: 20px;margin-bottom: 20px;border-bottom: 2px solid;display: inline-block;opacity: 0.7;transition: opacity 0.3s;
}@media screen and (max-width: 576px) {.news-date {margin-bottom: 10px;display: inline-flex;align-items: center;padding-bottom: 0;}
}.news-date__title {display: block;font-size: 32px;margin-bottom: 10px;font-weight: 500;
}@media screen and (max-width: 576px) {.news-date__title {margin-right: 10px;}
}.news-date__txt {font-size: 16px;
}.news__title {font-size: 25px;font-weight: 500;opacity: 0.7;margin-top: 10px;margin-bottom: 15px;transition: opacity 0.3s;
}@media screen and (max-width: 576px) {.news__title {font-size: 22px;margin-bottom: 10px;}
}.news__txt {margin: 10px 0;line-height: 1.6em;font-size: 15px;opacity: 0.7;transition: opacity 0.3s;
}.news__img {border-radius: 10px;box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);height: 200px;margin-top: 30px;width: 100%;transition: all 0.3s;transform-origin: 0% 0%;
}@media screen and (max-width: 576px) {.news__img {height: 180px;margin-top: 20px;}
}.news__img img {max-width: 100%;border-radius: 10px;height: 100%;width: 100%;
}

部分HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>响应式新闻卡片滑块</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel='stylesheet' href='css/swiper.min.css'><link rel="stylesheet" href="css/style.css"></head><body><div class="wrapper"><div class="background"><img src="img/b.jpg" alt=""></div><div class="item-bg"></div><div class="news-slider"><div class="news-slider__wrp swiper-wrapper"><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">24</span> <span class="news-date__txt">May</span> </div><div class="news__title">漂亮山水</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/1.jpg" alt="news"> </div></a></div><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">25</span> <span class="news-date__txt">May</span> </div><div class="news__title">旅游景点</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/2.jpg" alt="news"> </div></a></div><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">26</span> <span class="news-date__txt">May</span> </div><div class="news__title">景区打卡</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/3.jpg" alt="news"> </div></a></div><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">27</span> <span class="news-date__txt">May</span> </div><div class="news__title">城市美景</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/4.jpg" alt="news"> </div></a></div><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">28</span> <span class="news-date__txt">May</span> </div><div class="news__title">旅游景点</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/5.jpg" alt="news"> </div></a></div><div class="news-slider__item swiper-slide"><a href="#" class="news__item"><div class="news-date"> <span class="news-date__title">29</span> <span class="news-date__txt">May</span> </div><div class="news__title">景区打卡</div><p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p><div class="news__img"> <img src="img/6.jpg" alt="news"> </div></a></div></div><div class="news-slider__ctr"><div class="news-slider__arrows"><button class="news-slider__arrow news-slider-prev"><span class="icon-font"><svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg></span></button><button class="news-slider__arrow news-slider-next"><span class="icon-font"><svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg></span></button></div><div class="news-slider__pagination"></div></div></div></div><svg hidden="hidden"><defs><symbol id="icon-arrow-left" viewBox="0 0 32 32"><title>arrow-left</title><path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path></symbol><symbol id="icon-arrow-right" viewBox="0 0 32 32"><title>arrow-right</title><path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path></symbol></defs>
</svg><script src="js/jquery.min.js"></script><script src='js/swiper.min.js'></script><script src="js/script.js"></script></body></html>

上面的img图片和jquery.min.js等需要引入即可运行

源码获取

精彩推荐更新中：

HTML5大作业实战100套

打卡文章更新 37 / 100天

大家可以点赞、收藏、关注、评论我啦、需要完整文件随时联系我或交流哟~！

HTML+CSS+JS实现 ❤️响应式图文卡片滑块展示特效❤️相关推荐

HTML+CSS+JS实现 ❤️响应式团队❤️
效果演示: 代码目录: 主要代码实现: CSS样式: body {margin: 0;min-height: 100vh;display: flex;justify-content: center;a ...
HTML+CSS+JS实现 ❤️响应式的幸运大转盘❤️
效果演示: 代码目录: 主要代码实现: 部分CSS样式: .winnerBox {max-width: 40rem;padding: 30px;margin: 30px auto;/*height: ...
基于HTML5+CSS+JS的响应式圣诞老人过悬崖小游戏
JS结合PHP瀑布流,JavaScript_原生JS实现响应式瀑布流布局，原生JS实现的瀑布流布局，代 - phpStudy...
原生JS实现响应式瀑布流布局原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http:/ ...
[css] 你对响应式设计的理解是什么？知道它基本的原理是吗？要想兼容低版本的IE怎么做呢？
[css] 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢? 理解:在不同系统,不同设备,不同尺寸的界面,有良好的用户体验,舒适的阅读体验,交互体验. 原理:根据不同设 ...
html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别
html通过分辨率动态加载css,做响应式页面响应式和自适应的区别: 自适应需要写多个页面,响应式只需一个页面即可自适应通过窗口检测,获取不同的页面:响应式通过窗口检测,在客户端做不同的处理法1 ...
网页规划与设计HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
html 响应式同一行,一行CSS实现各种响应式元素 – Fluidity
一行CSS实现各种响应式元素 – Fluidity 3月 31, 2014 评论 Sponsor FLUIDITY是一个极微小的CSS样式表,压缩版只有一行代码,大小只有115个字节,它能实现图像.文 ...
12.使用 CSS3 实现响应式推荐卡片
效果 (源码最后面) 视频演示使用 CSS3 实现响应式推荐卡片视频地址一:https://www.bilibili.com/video/BV1YC4y1s7kG/ 视频地址一:https://w ...

HTML+CSS+JS实现 ❤️响应式图文卡片滑块展示特效❤️

效果演示：

代码目录：

主要代码实现：

CSS样式：

部分HTML代码 :

源码获取

HTML5大作业实战100套

HTML+CSS+JS实现 ❤️响应式图文卡片滑块展示特效❤️相关推荐

最新文章

热门文章