<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间轴</title>
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel='stylesheet' href='css/swiper.min.css'>
<link rel="stylesheet" href="css/style.css">
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/rem7.5.js"></script>
</head>
<body>
<div class="info-container">
<div class="container">
<div class="timeline">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url(images/背景.png);" data-year="1960">
<div class="swiper-slide-content">
<h4 class="timeline-title">上海</h4>
<span class="timeline-year">医院</span>
<p class="timeline-text">晋升</p>
<h1 class="timeline-title-h1">1960</h1>
</div>
</div>
<div class="swiper-slide" style="background-image: url(images/背景.png);" data-year="1963">
<div class="swiper-slide-content">
<h4 class="timeline-title">上海</h4>
<span class="timeline-year">医院</span>
<p class="timeline-text">晋升</p>
<h1 class="timeline-title-h1">1963</h1>
</div>
</div>
<div class="swiper-slide" style="background-image: url(images/背景.png);" data-year="1993">
<div class="swiper-slide-content">
<h4 class="timeline-title">上海</h4>
<span class="timeline-year">医院</span>
<p class="timeline-text">晋升</p>
<h1 class="timeline-title-h1">1993</h1>
</div>
</div>
<div class="swiper-slide" style="background-image: url(images/背景.png);" data-year="2001">
<div class="swiper-slide-content">
<h4 class="timeline-title">上海</h4>
<span class="timeline-year">医院</span>
<p class="timeline-text">晋升</p>
<h1 class="timeline-title-h1">2001</h1>
</div>
</div>
<div class="swiper-slide" style="background-image: url(images/背景.png);" data-year="2010">
<div class="swiper-slide-content">
<h4 class="timeline-title">上海</h4>
<span class="timeline-year">医院</span>
<p class="timeline-text">晋升</p>
<h1 class="timeline-title-h1">2010</h1>
</div>
</div>
<div class="swiper-slide" style="background-image: url(images/背景.png);" data-year="2012">
<div class="swiper-slide-content">
<h4 class="timeline-title">上海</h4>
<span class="timeline-year">医院</span>
<p class="timeline-text">晋升</p>
<h1 class="timeline-title-h1">2012</h1>
</div>
</div>
<div class="swiper-slide" style="background-image: url(images/背景.png);" data-year="2018">
<div class="swiper-slide-content">
<h4 class="timeline-title">上海</h4>
<span class="timeline-year">医院</span>
<p class="timeline-text">2018年,跨越式晋升为三甲医院</p>
<h1 class="timeline-title-h1">2018</h1>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</body>
</html>
style.css公共样式部分
html,
body,
.container {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
flex-direction: column;
}
.swiper-pagination-bullet{
font-size: .34rem;
}
.title {
font-size: 38px !important;
color: #616161;
font-style: italic;
font-weight: 800;
}
.timeline {
width: 100%;
background-color: #fff;
/* box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.2); */
}
.timeline .swiper-container {
height: 100vh;
width: 100%;
position: relative;
}
.timeline .swiper-wrapper {
transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}
.timeline .swiper-slide {
/* color: #ff0; */
font-size: .28rem;
font-family: SourceHanSansCN;
font-weight: 300;
color: #FFFFFF;
line-height:.8rem;
/* margin-top: .26rem; */
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
/* .timeline .swiper-slide::after {
content: "";
position: absolute;
z-index: 1;
right: -115%;
bottom: -10%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, 0.7);
border-radius: 100%;
}*/
.timeline .swiper-slide-content {
position: absolute;
text-align: center;
width: calc(100%-1rem);
/* max-width: 310px; */
right: 50%;
top: 13%;
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
z-index: 2;
}
.swiper-container-vertical>.swiper-pagination-bullets {
top: 55%;
}
.timeline .swiper-slide .timeline-year {
-webkit-transform: translate3d(.7rem, 0, 0);
transform: translate3d(.7rem, 0, 0);
font-size: .4rem;
color: #fff;
font-family: '微软雅黑';
font-weight: 400;
opacity: 0;
transition: .2s ease .4s;
}
/* .swiper-slide-content h1{
font-size: 24px !important;
} */
.timeline .swiper-slide .timeline-title {
font-size: .52rem;
font-family: SourceHanSansCN;
font-weight: bold;
margin-bottom: .27rem;
color: #ffffff;
opacity: 0;
/* -webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
transition: .2s ease .5s; */
}
.timeline-title-h1{
font-size: 1.2rem;
font-family: '微软雅黑';
font-weight: 600;
margin-top: .63rem;
color: #FFFFFF;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
transition: .1s ease .6s;
opacity: 0;
}
.timeline .swiper-slide .timeline-text {
font-size: .28rem;
line-height: .5rem;
opacity: 0;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
transition: .2s ease .6s;
}
.timeline .swiper-slide-active .timeline-year {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: .4s ease 1.6s;
}
.timeline .swiper-slide-active .timeline-title-h1{
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: .4s ease 1.7s;
}
.timeline .swiper-slide-active .timeline-title {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: .4s ease 1.7s;
}
.timeline .swiper-slide-active .timeline-text {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: .4s ease 1.8s;
}
.timeline .swiper-pagination {
right: .49rem !important;
height: 100%;
display: none;
flex-direction: column;
justify-content: center;
font-style: italic;
/* font-weight: 300; */
font-size: .55rem;
z-index: 1;
}
.timeline .swiper-pagination::before {
content: "";
position: absolute;
right: 1.13rem;
top: 0;
height: 100%;
width: 1px;
background-color: rgba(255, 255, 255, 0.2);
}
.timeline .swiper-pagination-bullet {
width: auto;
height: auto;
text-align: center;
opacity: 1;
background: transparent;
color: #d4a024;
margin:0 0 .6rem 0!important;
position: relative;
}
.timeline .swiper-pagination-bullet::before {
content: "";
position: absolute;
top: .1rem;
left: -.42rem;
width: .14rem;
height: .14rem;
border-radius: 100%;
background-color: #d4a024;
-webkit-transform: scale(0);
transform: scale(0);
transition: .2s;
}
.timeline .swiper-pagination-bullet-active {
color: #d4a024;
}
.timeline .swiper-pagination-bullet-active::before {
-webkit-transform: scale(1);
transform: scale(1);
}
.timeline .swiper-button-next,
.timeline .swiper-button-prev {
/* background-size: .35rem .35rem; */
top: 3.47rem;
right: .68rem;
width: .35rem;
height: .2rem;
font-weight: bold;
margin-top: 0;
z-index: 2;
transition: .2s;
}
.timeline .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
}
.timeline .swiper-button-prev:hover {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
.timeline .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
}
.timeline .swiper-button-next:hover {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
@media screen and (max-width: 768px) {
.timeline .swiper-slide::after {
right: -30%;
bottom: -8%;
width: 240px;
height: 50%;
}
.timeline .swiper-slide-content {
right: 30%;
/* height: 200; */
top: 45%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: calc(100% - 1rem);
/* background-color:#000fff; */
text-align: right;
}
.timeline .swiper-slide .timeline-year {
font-size:.4rem;
}
.timeline .swiper-slide .timeline-title {
font-size: .52rem;
margin: 0;
}
.timeline .swiper-pagination {
display: flex;
}
/* 箭头翻转 */
.timeline .swiper-button-prev {
top: 22%;
left: auto;
right: .45rem;
background-size: 100% 100%;
-webkit-transform: rotate(90deg) translate(0, 10px);
transform: rotate(90deg) translate(0, 10px);
}
.timeline .swiper-button-prev:hover {
-webkit-transform: rotate(90deg) translate(-3px, 10px);
transform: rotate(90deg) translate(-3px, 10px);
}
.timeline .swiper-button-next {
top: auto;
bottom: 18%;
right: .65rem;
background-size: 100% 100%;
-webkit-transform: rotate(90deg) translate(.1rem, 0);
transform: rotate(90deg) translate(.1rem, 0);
}
.timeline .swiper-button-next:hover {
-webkit-transform: rotate(90deg) translate(.1rem, .03rem);
transform: rotate(90deg) translate(.1rem, .03rem);
}
}
/*
@media screen and (max-width: 1024px) {
.timeline .swiper-slide::after {
right: -20%;
bottom: -12%;
width: 240px;
height: 50%;
box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);
}
.timeline .swiper-slide-content {
right: 25%;
}
} */
最后引入swipe.min.js即可