当前位置：网站首页>移动端——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即可
边栏推荐
- Daily question - Roman numeral to integer
- 超標量處理器設計 姚永斌 第2章 Cache --2.4 小節摘錄
- Huawei equipment configuration h-vpn
- Go encoding package
- Superscalar processor design yaoyongbin Chapter 2 cache -- Excerpt from subsection 2.4
- 二叉树的基本操作与题型总结
- R language book learning 03 "in simple terms R language data analysis" - Chapter 8 logistic regression model Chapter 9 clustering model
- C language implements eight sorts (1)
- Leetcode - 第2天
- R语言书籍学习03 《深入浅出R语言数据分析》-第七章 线性回归模型
猜你喜欢
超标量处理器设计 姚永斌 第2章 Cache --2.2 小节摘录
The device is in use when win10 ejects USB
![[niuke.com] DP30 [template] 01 Backpack](/img/a2/9bcfbe6f78f30282fd8940c57477b1.jpg)
[niuke.com] DP30 [template] 01 Backpack
超標量處理器設計 姚永斌 第2章 Cache --2.4 小節摘錄
Tkinter学习笔记(四)
win11怎么看电脑显卡信息
![[Yu Yue education] calculus of Zhejiang University in autumn and winter 2021 (I) reference materials](/img/0a/58df3fd771d58c66245397d131fa53.png)
[Yu Yue education] calculus of Zhejiang University in autumn and winter 2021 (I) reference materials
C语言实现八种排序 - 归并排序
Explain asynchronous tasks in detail: the task of function calculation triggers de duplication
类和对象（4）
随机推荐
C language implements eight sorts of sort merge sort
C language to achieve eight sorts (2)
Maze problem in C language
Popular science | what are the types of NFT (Part 1)
BUUCTF(5)
C语言实现八种排序（3）
On the night of the joint commissioning, I beat up my colleagues
C language implements eight sorts (1)
Two methods to judge the storage of large and small end
Classes and objects (1)
Nmap进行主机探测出现网段IP全部存活情况分析
go os模块
Classes and objects (4)
How to realize double speed playback and fast forward for restricted ckplayer players
Internet of things development practice 18 scenario linkage: how does an intelligent light perceive light? (I) (learning notes)
[niuke.com] ky41 put apples
利用SecureCRTPortable脚本功能完成网络设备的数据读取
不使用加减乘除做加法
Win10弹出USB时出现该设备正在使用的解决方法
使用VBScript读取网络的日志数据进行处理