今天给大家分享一款纯css实现的垂直时间线效果。垂直时间线适合放在类似任务时间安排的网页上。该实现采用了蓝色作为主题色，界面效果还不错。一起看下效果图：

实现的代码。

html代码：

复制代码代码如下:

Blueprint

Vertical Timeline

www.jb51.net/Article/9250" class="bp-icon bp-icon-prev"

data-info="previous Blueprint">Previous Blueprint

www.jb51.net/Article/9250" class="bp-icon bp-icon-drop"

data-info="back to the Codrops article">back to the Codrops article

www.jb51.net/Article/9250" class="bp-icon bp-icon-archive"

data-info="Blueprints archive">Go to the archive

  • 4/10/13 18:30

    Ricebean black-eyed pea

    Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber

    watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape radish

    bush tomato ricebean black-eyed pea maize eggplant. Cabbage lentil cucumber chickpea

    sorrel gram garbanzo plantain lotus root bok choy squash cress potato summer purslane

    salsify fennel horseradish dulse. Winter purslane garbanzo artichoke broccoli lentil

    corn okra silver beet celery quandong. Plantain salad beetroot bunya nuts black-eyed

    pea collard greens radish water spinach gourd chicory prairie turnip avocado sierra

    leone bologi.

  • 4/11/13 12:04

    Greens radish arugula

    Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach

    kombu courgette lettuce. Celery coriander bitterleaf epazote radicchio shallot winter

    purslane collard greens spring onion squash lentil. Artichoke salad bamboo shoot

    black-eyed pea brussels sprout garlic kohlrabi.

  • 4/13/13 05:36

    Sprout garlic kohlrabi

    Parsnip lotus root celery yarrow seakale tomato collard greens tigernut epazote

    ricebean melon tomatillo soybean chicory broccoli beet greens peanut salad. Lotus

    root burdock bell pepper chickweed shallot groundnut pea sprouts welsh onion wattle

    seed pea salsify turnip scallion peanut arugula bamboo shoot onion swiss chard.

    Avocado tomato peanut soko amaranth grape fennel chickweed mung bean soybean endive

    squash beet greens carrot chicory green bean. Tigernut dandelion sea lettuce garlic

    daikon courgette celery maize parsley komatsuna black-eyed pea bell pepper aubergine

    cauliflower zucchini. Quandong pea chickweed tomatillo quandong cauliflower spinach

    water spinach.

  • 4/15/13 13:15

    Watercress ricebean

    Peanut gourd nori welsh onion rock melon mustard jícama. Desert raisin amaranth

    kombu aubergine kale seakale brussels sprout pea. Black-eyed pea celtuce bamboo

    shoot salad kohlrabi leek squash prairie turnip catsear rock melon chard taro broccoli

    turnip greens. Fennel quandong potato watercress ricebean swiss chard garbanzo.

    Endive daikon brussels sprout lotus root silver beet epazote melon shallot.

  • 4/16/13 21:30

    Courgette daikon

    Parsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyed

    pea maize scallion green bean spinach cabbage jícama bell pepper carrot onion corn

    plantain garbanzo. Sierra leone bologi komatsuna celery peanut swiss chard silver

    beet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot.

  • 4/17/13 12:11

    Greens radish arugula

    Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach

    kombu courgette lettuce. Celery coriander bitterleaf epazote radicchio shallot winter

    purslane collard greens spring onion squash lentil. Artichoke salad bamboo shoot

    black-eyed pea brussels sprout garlic kohlrabi.

  • 4/18/13 09:56

    Sprout garlic kohlrabi

    Parsnip lotus root celery yarrow seakale tomato collard greens tigernut epazote

    ricebean melon tomatillo soybean chicory broccoli beet greens peanut salad. Lotus

    root burdock bell pepper chickweed shallot groundnut pea sprouts welsh onion wattle

    seed pea salsify turnip scallion peanut arugula bamboo shoot onion swiss chard.

    Avocado tomato peanut soko amaranth grape fennel chickweed mung bean soybean endive

    squash beet greens carrot chicory green bean. Tigernut dandelion sea lettuce garlic

    daikon courgette celery maize parsley komatsuna black-eyed pea bell pepper aubergine

    cauliflower zucchini. Quandong pea chickweed tomatillo quandong cauliflower spinach

    water spinach.

css代码：

复制代码代码如下:

*, *:after, *:before

{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body, html

{

font-size: 100%;

padding: 0;

margin: 0;

}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix:before, .clearfix:after

{

content: " ";

display: table;

}

.clearfix:after

{

clear: both;

}

body

{

font-family: 'Lato' , Calibri, Arial, sans-serif;

color: #47a3da;

}

a

{

color: #f0f0f0;

text-decoration: none;

}

a:hover

{

color: #000;

}

.main, .container > header

{

width: 90%;

max-width: 69em;

margin: 0 auto;

padding: 0 1.875em 3.125em 1.875em;

}

.container > header

{

padding: 2.875em 1.875em 1.875em;

}

.container > header h1

{

font-size: 2.125em;

line-height: 1.3;

margin: 0 0 0.6em 0;

float: left;

font-weight: 400;

}

.container > header > span

{

display: block;

position: relative;

z-index: 9999;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.5em;

padding: 0 0 0.6em 0.1em;

}

.container > header > span span:after

{

width: 30px;

height: 30px;

left: -12px;

font-size: 50%;

top: -8px;

font-size: 75%;

position: relative;

}

.container > header > span span:hover:before

{

content: attr(data-content);

text-transform: none;

text-indent: 0;

letter-spacing: 0;

font-weight: 300;

font-size: 110%;

padding: 0.8em 1em;

line-height: 1.2;

text-align: left;

left: auto;

margin-left: 4px;

position: absolute;

color: #fff;

background: #47a3da;

}

.container > header nav

{

float: right;

text-align: center;

}

.container > header nav a

{

display: inline-block;

position: relative;

text-align: left;

width: 2.5em;

height: 2.5em;

background: #fff;

border-radius: 50%;

margin: 0 0.1em;

border: 4px solid #47a3da;

}

.container > header nav a > span

{

display: none;

}

.container > header nav a:hover:before

{

content: attr(data-info);

color: #47a3da;

position: absolute;

width: 600%;

top: 120%;

text-align: right;

right: 0;

pointer-events: none;

}

.container > header nav a:hover

{

background: #47a3da;

}

.bp-icon:after

{

font-family: 'bpicons';

speak: none;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

text-align: center;

color: #47a3da;

-webkit-font-smoothing: antialiased;

}

.container > header nav .bp-icon:after

{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

line-height: 2;

text-indent: 0;

}

.container > header nav a:hover:after

{

color: #fff;

}

.bp-icon-next:after

{

content: "\e000";

}

.bp-icon-drop:after

{

content: "\e001";

}

.bp-icon-archive:after

{

content: "\e002";

}

.bp-icon-about:after

{

content: "\e003";

}

.bp-icon-prev:after

{

content: "\e004";

}

@media screen and (max-width: 55em)

{

.container > header h1, .container > header nav

{

float: none;

}

.container > header > span, .container > header h1

{

text-align: center;

}

.container > header nav

{

margin: 0 auto;

}

.container > header > span

{

text-indent: 30px;

}

}

/* COMPONENT.CSS */

/* Made with http://icomoon.io/ */

.cbp_tmtimeline

{

margin: 30px 0 0 0;

padding: 0;

list-style: none;

position: relative;

}

/* The line */

.cbp_tmtimeline:before

{

content: '';

position: absolute;

top: 0;

bottom: 0;

width: 10px;

background: #afdcf8;

left: 20%;

margin-left: -10px;

}

.cbp_tmtimeline > li

{

position: relative;

}

/* The date/time */

.cbp_tmtimeline > li .cbp_tmtime

{

display: block;

width: 25%;

padding-right: 100px;

position: absolute;

}

.cbp_tmtimeline > li .cbp_tmtime span

{

display: block;

text-align: right;

}

.cbp_tmtimeline > li .cbp_tmtime span:first-child

{

font-size: 0.9em;

color: #bdd0db;

}

.cbp_tmtimeline > li .cbp_tmtime span:last-child

{

font-size: 2.9em;

color: #3594cb;

}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child

{

color: #6cbfee;

}

/* Right content */

.cbp_tmtimeline > li .cbp_tmlabel

{

margin: 0 0 15px 25%;

background: #3594cb;

color: #fff;

padding: 2em;

font-size: 1.2em;

font-weight: 300;

line-height: 1.4;

position: relative;

border-radius: 5px;

}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel

{

background: #6cbfee;

}

.cbp_tmtimeline > li .cbp_tmlabel h2

{

margin-top: 0px;

padding: 0 0 10px 0;

border-bottom: 1px solid rgba(255,255,255,0.4);

}

/* The triangle */

.cbp_tmtimeline > li .cbp_tmlabel:after

{

right: 100%;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

border-right-color: #3594cb;

border-width: 10px;

top: 10px;

}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after

{

border-right-color: #6cbfee;

}

/* The icons */

.cbp_tmtimeline > li .cbp_tmicon

{

width: 40px;

height: 40px;

font-family: 'ecoico';

speak: none;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

font-size: 1.4em;

line-height: 40px;

-webkit-font-smoothing: antialiased;

position: absolute;

color: #fff;

background: #46a4da;

border-radius: 50%;

box-shadow: 0 0 0 8px #afdcf8;

text-align: center;

left: 20%;

top: 0;

margin: 0 0 0 -25px;

}

.cbp_tmicon-phone:before

{

content: "\e000";

}

.cbp_tmicon-screen:before

{

content: "\e001";

}

.cbp_tmicon-mail:before

{

content: "\e002";

}

.cbp_tmicon-earth:before

{

content: "\e003";

}

/* Example Media Queries */

@media screen and (max-width: 65.375em)

{

.cbp_tmtimeline > li .cbp_tmtime span:last-child

{

font-size: 1.5em;

}

}

@media screen and (max-width: 47.2em)

{

.cbp_tmtimeline:before

{

display: none;

}

.cbp_tmtimeline > li .cbp_tmtime

{

width: 100%;

position: relative;

padding: 0 0 20px 0;

}

.cbp_tmtimeline > li .cbp_tmtime span

{

text-align: left;

}

.cbp_tmtimeline > li .cbp_tmlabel

{

margin: 0 0 30px 0;

padding: 1em;

font-weight: 400;

font-size: 95%;

}

.cbp_tmtimeline > li .cbp_tmlabel:after

{

right: auto;

left: 20px;

border-right-color: transparent;

border-bottom-color: #3594cb;

top: -20px;

}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after

{

border-right-color: transparent;

border-bottom-color: #6cbfee;

}

.cbp_tmtimeline > li .cbp_tmicon

{

position: relative;

float: right;

left: auto;

margin: -55px 5px 0 0px;

}

}

html怎么实现蓝色垂直的直线,css实例教程 一款纯css实现的垂直时间线效果相关推荐

  1. css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...

    纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...

  2. 01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】

    若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...

  3. css 图标点击变色,纯CSS实现小图标变色的一些研究

    by zhangxinxu from www.zhangxinxu.com/wordpress/?- 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可,任何网站均可摘要聚合,商用 ...

  4. css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等

    css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...

  5. 纯css导航下拉_纯CSS标签导航

    纯css导航下拉 The appearence of "tab" navigation is relatively easy to create, but making a tab ...

  6. css 跳跃动画,如何使用纯CSS实现方块跳跃的动画（附源码）

    本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com/ ...

  7. css中间镂空,怎么用纯CSS实现镂空效果

    怎么用纯CSS实现镂空效果 发布时间:2021-03-19 09:49:16 来源:亿速云 阅读:99 作者:小新 小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...

  8. HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)

    先看题,别看答案试下吧 ~_~ 1.下面的代码输出的内容是什么? function O(name){ this.name=name||'world'; } O.prototype.hello=func ...

  9. html用css写彩虹,如何使用纯CSS实现彩虹条纹文字的效果（附代码）

    本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.co ...

最新文章

  1. html文档使用,使用提供 HTML 文档的过程
  2. centos6.7 安装redis
  3. JQuery 扩展多语言支持
  4. MyBatis学习总结(三)——优化MyBatis配置文件中的配置
  5. 造句简单_造句游戏的心理投射：被现代心理学摒弃的网红心理游戏
  6. Streaming的算法Reservoir Sampling
  7. 前端学习（2978）：上午回顾
  8. 交叉编译termcap1.3.1
  9. three.js 求两个vector3 的夹角_初中数学：动点问题-阿氏圆最值模型（2），求PD-1/2PC的最大值...
  10. DeFi预言机Umbrella Network与BSC上去中心化杠杆交易协议WOWswap达成合作
  11. C++常识之——C++中堆和栈的区别，自由存储区、全局/静态存储区和常量存储区...
  12. javaweb简单源代码_Java Web轻松学39 - JSP核心原理
  13. 电网101、104规约解析（Java）
  14. 电脑需要u盘启动的解决办法--蓝屏修复
  15. 2020年度总结和一些想法
  16. 在3小时内学习Kubernetes：编排容器的详细指南
  17. 现在网络安全员工资一般多少（网络安全员平均工资）
  18. 【IEEE】IEEE审稿意见与回复-写作指南
  19. 华为鸿蒙P10plus,华为P10 Plus全面评测 华为P10 Plus值不值得买
  20. 传统企业转战电商必看（独家视角）

热门文章

  1. 人工智能数学基础训练营5周学习资料
  2. PYTHON学习笔记之（一）2020.08
  3. 遗传算法求解TSP旅行商问题
  4. 华硕f540u内存条在哪里_华硕笔记本电脑怎么拆机添加内存条?
  5. 玩vr游戏的计算机配置要求,4款电脑横向评测: 寻找最适合玩VR的PC配置
  6. 一篇学习HTTP状态码的神文：我与依依的橙色岁月
  7. 屠呦呦入围BBC“20世纪最伟大科学家”，和爱因斯坦、居里夫人、图灵并列【中国科讯】...
  8. UDT 最新协议分析
  9. 计算机B级基金有哪些类型,分级b基金是什么
  10. 计算机组成原理(哈工大)学习笔记