当前位置：网站首页>移动端——swipe特效之图片时间轴
移动端——swipe特效之图片时间轴
2022-06-11 21:54:00 【Nanchen_42】
<!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即可
边栏推荐
- How to view the installation date of the win system
- crontab中定时执行shell脚本
- 69. square root of X
- 剑指Offer 29.顺时针打印矩阵
- Matlab: 文件夹锁定问题的解决
- R语言书籍学习03 《深入浅出R语言数据分析》-第十二章 支持向量机 第十三章 神经网络
- 高考结束，人生才刚刚开始，10年职场老鸟给的建议
- Latex combat notes 3- macro package and control commands
- Matplotlib和tkinter学习笔记（一）
- Regular execution of shell scripts in crontab
猜你喜欢
Tkinter学习笔记(三)
C语言实现八种排序（2）
C language to achieve eight sorts (2)
Two methods to judge the storage of large and small end
In the post epidemic era, how can enterprise CIOs improve enterprise production efficiency through distance
C language implements eight sorts of sort merge sort
机器学习之Logistic回归简单实例
R语言书籍学习03 《深入浅出R语言数据分析》-第十章 关联规则 第十一章 随机森林
On the night of the joint commissioning, I beat up my colleagues
Leetcode - day 2
随机推荐
不使用加减乘除做加法
Implementation stack and queue
C语言实现八种排序（2）
Superscalar processor design yaoyongbin Chapter 2 cache -- Excerpt from subsection 2.3
How to view the installation date of the win system
5.学城项目 支付宝支付
R language book learning 03 "in simple terms R language data analysis" - Chapter 8 logistic regression model Chapter 9 clustering model
All inherited features
二分查找 - 学习
Introduction to MySQL transactions
B. Phoenix and Beauty
R语言相关文章、文献整理合集（持续更新）
67. 二进制求和
189. 轮转数组
189. rotation array
In the post epidemic era, how can enterprise CIOs improve enterprise production efficiency through distance
Matlab: solution of folder locking problem
3.3 测试模块的命名规则
Huawei equipment configuration h-vpn
C语言实现迷宫问题