前端CSS实现响应式TimeLine效果(附源码)

news/2024/2/21 2:59:06

文章目录

    • 纯CSS搭建,先上效果图(附有源码)
    • 视图层 index.html
    • index.css 公用样式文件
    • Main.css 主要的样式文件

纯CSS搭建,先上效果图(附有源码)

本效果为纯CSS搭建,适配移动端和PC端!

例如:

视图层 index.html

	<body class="light"><header class="header"><h1 class="" style="text-align: center;">漂亮的时间轴UI效果</h1><ul class="link__content"><li class="content__item"><a href="" class="link link--iocaste"><span></span><svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60"preserveAspectRatio="none"><pathd="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path></svg></a></li><li class="content__item"><a href="" class="link link--iocaste"><svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60"preserveAspectRatio="none"><pathd="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path></svg></a></li></ul></header><div class="container"><h1>Timeline cards</h1><ul class="ul"><li style="--accent-color:#41516C"><div class="date">2002</div><div class="title">Title 1</div><div class="descr">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas itaque hicquibusdam fugiat est numquam harum, accusamus suscipit consequatur laboriosam!</div></li><li style="--accent-color:#FBCA3E"><div class="date">2007</div><div class="title">Title 2</div><div class="descr">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos adipisci nobisnostrum vero nihil veniam.</div></li><li style="--accent-color:#E24A68"><div class="date">2012</div><div class="title">Title 3</div><div class="descr">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga minima consequuntursoluta placeat iure totam commodi repellendus ea delectus, libero fugit quod reprehenderit,sequi quo, et dolorum saepe nulla hic.</div></li><li style="--accent-color:#1B5F8C"><div class="date">2017</div><div class="title">Title 4</div><div class="descr">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit, cumque.</div></li><li style="--accent-color:#4CADAD"><div class="date">2022</div><div class="title">Title 5</div><div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit, non.</div></li></ul></div></body></html>

index.css 公用样式文件

*,
*::before,
*::after {margin: 0;padding: 0;box-sizing: border-box;
}body {   
}
.container {--color: rgba(30, 30, 30);--bgColor: rgba(245, 245, 245);min-height: 100vh;display: grid;align-content: center;gap: 2rem;padding: 2rem;font-family: "Poppins", sans-serif;color: var(--color);background: var(--bgColor);
}
h1 {text-align: center;
}
.ul {--col-gap: 2rem;--row-gap: 2rem;--line-w: 0.25rem;display: grid;grid-template-columns: var(--line-w) 1fr;grid-auto-columns: max-content;column-gap: var(--col-gap);list-style: none;width: min(60rem, 90%);margin-inline: auto;
}
/* line */
.ul::before {content: "";grid-column: 1;grid-row: 1 / span 20;background: rgb(225, 225, 225);border-radius: calc(var(--line-w) / 2);
}
/* row gaps */
.ul li:not(:last-child) {margin-bottom: var(--row-gap);
}
/* card */
.ul li {grid-column: 2;--inlineP: 1.5rem;margin-inline: var(--inlineP);grid-row: span 2;display: grid;grid-template-rows: min-content min-content min-content;
}/* date */
.ul li .date {--dateH: 3rem;height: var(--dateH);margin-inline: calc(var(--inlineP) * -1);text-align: center;background-color: var(--accent-color);color: white;font-size: 1.25rem;font-weight: 700;display: grid;place-content: center;position: relative;border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}/* date flap */
.ul li .date::before {content: "";width: var(--inlineP);aspect-ratio: 1;background: var(--accent-color);background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);position: absolute;top: 100%;clip-path: polygon(0 0, 100% 0, 0 100%);right: 0;
}
/* circle */
.ul li .date::after {content: "";position: absolute;width: 2rem;aspect-ratio: 1;background: var(--bgColor);border: 0.3rem solid var(--accent-color);border-radius: 50%;top: 50%;transform: translate(50%, -50%);right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}
/* title descr */
.ul li .title,
.ul li .descr {background: var(--bgColor);position: relative;padding-inline: 1.5rem;
}
.ul li .title {overflow: hidden;padding-block-start: 1.5rem;padding-block-end: 1rem;font-weight: 500;
}
.ul li .descr {padding-block-end: 1.5rem;font-weight: 300;
}/* shadows */
.ul li .title::before,
.ul li .descr::before {content: "";position: absolute;width: 90%;height: 0.5rem;background: rgba(0, 0, 0, 0.5);left: 50%;border-radius: 50%;filter: blur(4px);transform: translate(-50%, 50%);
}
.ul li .title::before {bottom: calc(100% + 0.125rem);
}
.ul li .descr::before {z-index: -1;bottom: 0.25rem;
}
@media (min-width: 40rem) {.ul {grid-template-columns: 1fr var(--line-w) 1fr;}.ul::before {grid-column: 2;}.ul li:nth-child(odd) {grid-column: 1;}.ul li:nth-child(even) {grid-column: 3;}/* start second card */.ul li:nth-child(2) {grid-row: 2/4;}.ul li:nth-child(odd) .date::before {clip-path: polygon(0 0, 100% 0, 100% 100%);left: 0;}.ul li:nth-child(odd) .date::after {transform: translate(-50%, -50%);left: calc(100% + var(--col-gap) + var(--line-w) / 2);}.ul li:nth-child(odd) .date {border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;}
}

Main.css 主要的样式文件

:root {--bg-color:rgb(71,72,75);--bg-light-color: #fff;--bg-dark-color: rgb(71,72,75);--light-link-color: #fff;--dark-link-color: #333;--light-font-color: #fff;--dark-font-color:#333;--color-link: #1352d1;--color-link-hover: #111;
}body, html { font-size: 100%; padding: 0; margin: 0;}
body.light {background-color: var(--bg-light-color);color: var(--dark-font-color);
}
body.light a{color: var(--dark-link-color);
}
body.dark{background-color: var(--bg-dark-color);color:var(--light-font-color)
}
body.dark a{color:var(--light-link-color)
}/* Reset */
*,
*:after,
*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}ul, li {list-style: none;
}.header {width: 100%;height: 80px;display: flex;justify-content: space-between;align-items: center;padding: 0 20px;
}.related {width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 50px;
}.related .links {display: flex;
}
.related .links a {display: block;padding: 15px;text-decoration: none;
}
.related .links a img {width: 300px;
}
.related .links a h3 {text-align: center;font-size: 16px;font-weight: 500;}.link__content {display: flex;
}
.content__item {width: 100%;height: 100%;margin-left: 20px;padding: 0;counter-increment: itemcounter;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;
}
.link {cursor: pointer;font-size: 18px;position: relative;white-space: nowrap;color: var(--color-link);text-decoration: none;
}.link::before,
.link::after {position: absolute;width: 100%;height: 1px;background: currentColor;top: 100%;left: 0;pointer-events: none;
}
.link::before {content: '';
}.link--iocaste {font-family: lust-fine, sans-serif;overflow: hidden;padding: 7px 0;
}
.link__graphic {position: absolute;top: 0;left: 0;pointer-events: none;fill: none;stroke: #fff;stroke-width: 1px;
}body.light .link__graphic {stroke: var(--color-link-hover);
}.link__graphic--slide {top: -3px;stroke-width: 2px;transition: transform 0.7s;transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}.link:hover .link__graphic--slide {transform: translate3d(-66.6%, 0, 0);
}

全部效果为CSS搭建,有问题可以交流,欢迎大家点赞收藏!


https://www.xjx100.cn/news/3092677.html

相关文章

2023年【T电梯修理】考试题及T电梯修理考试报名

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 T电梯修理考试题是安全生产模拟考试一点通总题库中生成的一套T电梯修理考试报名&#xff0c;安全生产模拟考试一点通上T电梯修理作业手机同步练习。2023年【T电梯修理】考试题及T电梯修理考试报名 1、【多选题】GB/T1…

Continuity” of stochastic integral wrt Brownian motion

See https://imathworks.com/math/math-continuity-of-stochastic-integral-wrt-brownian-motion/

gitlab安装配置及应用

安装 ##安装依赖 yum install -y curl policycoreutils-python openssh-server perl#上传包 rz gitlab-jh-16.5.2-jh.0.el7.x86_64.rpm 安装 yum install gitlab-jh-16.0.3-jh.0.el7.x86_64.rpm 初始化并启动 # 以下两种方法都可以配置访问地址&#xff0c;第一种需要在yum安…

小程序制作(超详解!!!)第十六节 小程序的基本架构

1.题目描述 创建一个包含:首页、教学、科研、资讯和关于我们5个标签的小程序&#xff0c;每个标签都有对应的页面、图标和标签文字&#xff0c;点击某个标签将切换到对应的页面&#xff0c;同时该标签的图标和文字颜色都会发生变化页面的标题也发生相应的变化&#xff0c;而其…

力扣1038. 从二叉搜索树到更大和树(java,树的中序遍历解法)

Problem: 1038. 从二叉搜索树到更大和树 文章目录 题目描述思路解题方法复杂度Code 题目描述 给定一个二叉搜索树 root (BST)&#xff0c;请将它的每个节点的值替换成树中大于或者等于该节点值的所有节点值之和。 提醒一下&#xff0c; 二叉搜索树 满足下列约束条件&#xff…

抽象工厂设计模式是什么?什么是 Abstract Factory 抽象工厂设计模式?Python 抽象工厂设计模式示例代码

什么是 Abstract Factory 抽象工厂设计模式&#xff1f; 抽象工厂设计模式是一种创建型设计模式&#xff0c;旨在提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定其具体类。它允许客户端使用抽象的接口创建一组相关对象&#xff0c;而无需关注实际的对象实…

C++刷题 -- 二分查找

C刷题 – 二分查找 文章目录 C刷题 -- 二分查找一、原理二、例题1.二分查找2.使用二分查找确定target左右边界3.x的平方根 一、原理 条件&#xff1a;数组为有序数组&#xff0c;数组中无重复元素&#xff0c;因为一旦有重复元素&#xff0c;使用二分查找法返回的元素下标可能…

相机机模组需求示例

产品需求名称摄像头采集图片数据补充说明产品需求描述 As&#xff1a;用户 I want to&#xff1a;通过相机模组获取到自定义格式图片数据&#xff0c;要求包括&#xff1a; 1、支持多种场景&#xff0c;如&#xff1a;手持相机拍摄舌苔 2、支持图片分辨率至少达到1920X1080 3、…