效果演示：
代码目录：
主要代码实现：
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等需要引入即可运行
