用纯CSS实现简单的纵向时间轴

最新推荐文章于 2024-05-08 15:03:49 发布
最新推荐文章于 2024-05-08 15:03:49 发布
阅读量2.9k 收藏 47
点赞数 11
分类专栏： css 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35026778/article/details/104538752
版权

特别感谢

https://www.lingtings.com/demo/html/2017/09/13/18_time_axis/

效果

在这里插入图片描述

CSS实现思路及注意事项

  1. :nth-child(even)、:nth-child(odd) 选择器，实现对奇偶数元素样式的批量设置。
  2. . margin-left: 50%;，使用百分数。
  3. position: abusolute;，使用绝对定位调整位置。
  4. 时间轴的轴线、文字气泡的箭头部分，可使用 ::before 或 ::after 伪元素实现。
  5. 主体文字部分不可使用绝对定位，否则全部脱离文档流，无法撑开最外层box。

代码

HTML部分
<body>
    <div class="con">
        <h2 class="title">周杰伦作品集</h2>
        <div class="timeline-con">
            <div class="timeline-post">
                <div class="timeline-date">2000</div>
                <div class="timeline-icon-con">
                    <div class="timeline-icon">
                        <div class="timeline-icon-inner"></div>
                    </div>
                </div>
                <div class="timeline-content">
                    <h3>Jay</h3>
                    <p>
                        由周杰伦制作、作曲，方文山、徐若瑄等人作词，收录了10首歌曲，2000年11月7日发行 ，2001年，该专辑获得台湾金曲奖最佳流行音乐演唱专辑奖、IFPI香港唱片销量大奖十大销量国语唱片等奖项。
                    </p> 
                </div>
            </div>
            <div class="timeline-post">
                <div class="timeline-date">2001</div>
                <div class="timeline-icon-con">
                    <div class="timeline-icon">
                        <div class="timeline-icon-inner"></div>
                    </div>
                </div>
                <div class="timeline-content">
                    <h3>范特西</h3>
                    <p>
                        共收录10首歌曲。该专辑的制作人由周杰伦担任。2002年，该专辑获得第十三届金曲奖颁奖礼最佳流行音乐专辑奖、新加坡金曲奖年度最畅销专辑等奖项。周杰伦凭借该专辑获得第十三届金曲奖颁奖最佳专辑制作人奖、第二届全球华语歌曲排行榜颁奖礼最佳制作人等奖项。
                    </p> 
                </div>
            </div>
            <div class="timeline-post">
                <div class="timeline-date">2002</div>
                <div class="timeline-icon-con">
                    <div class="timeline-icon">
                        <div class="timeline-icon-inner"></div>
                    </div>
                </div>
                <div class="timeline-content">
                    <h3>八度空间</h3>
                    <p>
                        由周杰伦作曲并担任制作人，方文山、许世昌、刘耕宏、周杰伦作词。专辑于2002年7月18日发行，共收录10首歌曲。
                    </p> 
                </div>
            </div>
            <div class="timeline-post">
                <div class="timeline-date">2003</div>
                <div class="timeline-icon-con">
                    <div class="timeline-icon">
                        <div class="timeline-icon-inner"></div>
                    </div>
                </div>
                <div class="timeline-content">
                    <h3>叶惠美</h3>
                    <p>
                        共收录了11首歌曲。专辑的制作人由周杰伦担任。2004年，该专辑获得了第15届金曲奖最佳流行音乐演唱专辑奖、新城国语力颁奖礼新城国语力亚洲大碟奖、第四届全球华语歌曲排行榜颁奖典礼年度最受欢迎专辑奖。
                    </p> 
                </div>
            </div>
            <div class="timeline-post">
                <div class="timeline-date">2004</div>
                <div class="timeline-icon-con">
                    <div class="timeline-icon">
                        <div class="timeline-icon-inner"></div>
                    </div>
                </div>
                <div class="timeline-content">
                    <h3>七里香</h3>
                    <p>
                        该专辑的制作人由周杰伦担任，共收录了10首歌曲。2005年，该专辑获得第16届台湾金曲奖年度最佳专辑提名、HITO流行音乐奖年度DJ最爱专辑等奖项。
                    </p> 
                </div>
            </div>
        </div>
    </div>
</body>
CSS部分
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        font-family:'Courier New', Courier, monospace, sans-serif;
    }

    .con {
        width: 1000px;
        margin: 0 auto;
    }

    .title {
        text-align: center;
        font-size: 24px;
        color: #333;
        margin-top: 50px;
        text-align: center;    
    }

    .timeline-con {
        position: relative;
        margin: 100px 30px;
        position: relative;
    }

    .timeline-con::before {
        content: '';
        display: block;
        width: 1px;
        height: 100%;
        background: linear-gradient(#feeeed , #f05b72, #feeeed);
        background: -webkit-linear-gradient(#feeeed , #f05b72, #feeeed);
        background: -o-linear-gradient(#feeeed , #f05b72, #feeeed);
        background: -moz-linear-gradient(#feeeed , #f05b72, #feeeed); 
        position: absolute;
        left: 50%;
        top: 0;
    }

    .timeline-post {
        width: 50%;
        margin-left: 50%;
        margin-bottom: 60px;
    }

    .timeline-post:nth-child(even) {
        margin-left: 0;
    }

    .timeline-date {
        font-size: 20px;
        font-weight: bold;
        color: #666;

        position: absolute;
        right: 50%;
        margin-top: 15px;
        margin-right: 24px;
    }

    .timeline-post:nth-child(even) .timeline-date {
        left: 50%;
        margin-left: 24px;
    }

    .timeline-icon-con {
        width: 38px;
        height: 50px;
        background-color: #fff;

        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        left: 50%;
        margin-left: -18px;
    }

    .timeline-icon {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border: 3px solid #d93a49;
    }


    .timeline-content {
        position: relative;
        top: -6px;
        font-size: 18px;
        color: #666;
        line-height: 36px;
        margin: 0 0 0 44px;
        padding: 15px 16px 20px;
        background-color: #ffeeed;  
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }

    .timeline-post:nth-child(even) .timeline-content {
        margin: 0 44px 0 0;
        text-align: right;
    }

    .timeline-post:nth-child(odd) .timeline-content::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-right: 16px solid #ffeeed;
        border-bottom: 8px solid transparent;
        border-left: 16px solid transparent;
        position: absolute;
        top: 22px;
        left: -30px;
    }

    .timeline-post:nth-child(even) .timeline-content::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-right: 16px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 16px solid #ffeeed;
        position: absolute;
        top: 22px;
        right: -30px;
    }


    .timeline-content h3 {
        font-size: 18px;
        color: #f05b72;
    }

    .timeline-content p {
        margin-top: 0;
    }
</style>
某柚啊
关注
  • 11
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
js+css 实现时间轴类似箭头
走向CTO的路上...
07-20 149
在 JavaScript 代码中，我们首先获取到要操作的 DOM 元素，然后使用循环遍历 stages 数组，创建每个阶段的 li 元素，根据阶段状态添加相应的 CSS 类，以及添加阶段名称的内容。"stageName": "第十一阶段","stageName": "第五阶段","stageName": "第六阶段","stageName": "第七阶段","stageName": "第八阶段","stageName": "第九阶段","stageName": "第十阶段",
纯CSS与HTML实现垂直时间轴
AsunHunt的博客
12-11 33
原创YouTube HTML源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
CSS时间线样式
zhaoyang314的博客
11-07 562
用CSS实现时间线样式，简单明了，实用。
纯CSS3实现常见的时间进度线（竖立方向）
宋承佑
05-28 607
实现效果图： 实现思路： html代码： <div class="grow-item"> <div class="time-line"> <div class="time-line-dot"></div> <div class="time-line-title">2019年</div> <div class="time-line-cont">2019年厦门x
css实现时间轴
最新发布
你说你有丶难追的博客
05-08 427
【代码】css实现时间轴。
时间轴CSS Timeline
ICode联盟
11-10 458
下载地址 简约的时间轴CSS Timeline，垂直样式的时间轴效果，可以作为事件展示等用途。 dd:
HTML5+CSS3实现的响应式垂直时间轴
weixin_30820151的博客
09-13 900
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示：HTML5+CSS3实现的响应式垂直时间轴</titl...
jQuery css3的简单的纵向时间轴代码.zip
07-11
一款非常简单的jQuery纵向时间轴代码，无论li内容多少，直线都不会超出，并且红点永远居中的jQuery垂直时间轴插件。 js代码 [removed] $(document).ready(function(e) { var h = $(".about4_main ul li:first-...
css实例教程 一款纯css实现的垂直时间线效果
09-25
总结来说，纯CSS实现的垂直时间线是一个展示项目进展、任务列表或历史事件的好方法。它通过HTML结构和CSS样式控制，能够灵活地适应各种网页设计需求，同时保持代码的简洁性和可维护性。在实际开发中，可以根据具体...
网页模板——纯CSS3实现蛇形时间轴特效代码.zip
11-23
网页模板——纯CSS3实现蛇形时间轴特效代码
纯CSS3竖直蛇形时间轴特效代码
03-20
纯CSS3竖直蛇形时间轴代码是一款通过半圆形连接为一条曲线路径，组成时间轴样式代码。
CSS+Html垂直时间轴
04-08
CSS+Html垂直时间轴，好看简单实用！
jQuery公司大事记纵向时间轴
07-15
jQuery公司大事记纵向时间轴 文件类型：.rar软件大小：0.03 MB
手把手教你用纯css3实现轮播图效果实例
09-27
本文将详细介绍如何使用纯CSS3来创建一个简单的图片轮播效果，以实现自动轮播和淡入淡出的动画效果。 **一、布局与样式设定** 轮播图的基础结构通常包含一个包含所有图片的容器（`<section>`）和一系列的图片列表...
炫酷的时间HTML页面,炫酷css3垂直时间轴特效
weixin_36211536的博客
06-03 718
这是一款炫酷css3垂直时间轴特效。该css3垂直时间轴特效通过伪元素来制作炫酷的半圆形，所有半圆形连接为一条曲线路径，组成时间轴的线路。使用方法在页面中引入bootstrap.min.css文件。HTML结构该css3垂直时间轴的HTML结构如下：2018Web DesginerLorem ipsum dolor sit amet,...2017Web DeveloperLorem ipsum ...
一款纯css实现的垂直时间线效果
weixin_33853794的博客
10-26 173
今天给大家分享一款纯css实现的垂直时间线效果。垂直时间线适合放在类似任务时间安排的网页上。该实现采用了蓝色作为主题色，界面效果还不错。一起看下效果图： 在线预览   源码下载 实现的代码。 html代码： &lt;div class="container"&gt; &lt;header class="clearfix"&gt; &l...
css 垂直时间轴_使用CSS和JavaScript构建垂直时间线
Web design 教程小屋
07-10 938
在本教程中，我们将学习如何从头开始构建响应式垂直时间轴。 首先，我们将创建具有最少标记和CSS伪元素功能的基本结构。 然后，在向下滚动页面时，我们将使用一些JavaScript添加一些过渡效果。 让我们来了解一下我们将要构建的内容（ 在CodePen上查看较大的版本 ）。 1. HTML标记 我们将使用的标记非常简单； 一个普通的无序列表，每个列表项中都有一个div元素。 当我们...
css 两边是线中间文字的多种实现方法
weixin_44727080的博客
05-18 535
css 两边是线中间文字的多种实现方法 页面： <div class="soild_text_one"> <fieldset> <legend>历史活动一</legend> </fieldset> </div> <div class="soild_text_two"> <hr/><span>历史活动二</span><hr/> </div&gt
【日期、时区、时间】本地时间转UTC时间详解
热门推荐
m0_45406092的博客
04-03 1万+
/** * 把时间转化为utc时间格式 * * @param localTime * @return */ public static Date translatetoUtc(long localTime, TimeZone localZone) { Calendar cal = Calendar.getInstanc...
请用纯css实现简单月亮背景图，不使用图片链接
03-12
以下是一个纯 CSS 实现简单月亮背景图的示例代码： ```html <!DOCTYPE html> <title>Moon Background body { background-color: #1a1a1a; background-image: radial-gradient(circle at 50% 100%, #f2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值