HTML5+CSS3实现的响应式垂直时间轴

最新推荐文章于 2023-04-18 11:24:29 发布
最新推荐文章于 2023-04-18 11:24:29 发布
阅读量938 收藏 1
点赞数
文章标签： php 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/sure2016/p/5868893.html
版权

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示：HTML5+CSS3实现的响应式垂直时间轴</title>
<style type="text/css">

html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-size: 100%;
color: #7f8c97;
background-color: #e9f0f5;
}

 

img {
max-width: 100%;
}

/* --------------------------------

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: 1170px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}

/* --------------------------------

Main components

-------------------------------- */

#cd-timeline {
position: relative;
padding: 2em 0;
margin-top: 2em;
margin-bottom: 2em;
}
#cd-timeline::before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
#cd-timeline {
margin-top: 3em;
margin-bottom: 3em;
}
#cd-timeline::before {
left: 50%;
margin-left: -2px;
}
}

.cd-timeline-block {
position: relative;
margin: 2em 0;
}
.cd-timeline-block:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-block {
margin: 4em 0;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
}

.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
}
.cd-timeline-img.cd-picture {
background: #75ce66;
}
.cd-timeline-img.cd-movie {
background: #c03b44;
}
.cd-timeline-img.cd-location {
background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 0.6s;
-moz-animation: cd-bounce-1 0.6s;
animation: cd-bounce-1 0.6s;
}
}

.cd-timeline-content {
position: relative;
margin-left: 60px;
background: white;
border-radius: 0.25em;
padding: 1em;
box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-content h2 {
color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 13px;
font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
margin: 1em 0;
line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
float: right;
padding: .8em 1em;
background: #acb7c0;
color: white;
border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
}
a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
.cd-timeline-content .cd-date {
float: left;
padding: .8em 0;
opacity: .7;
}
.cd-timeline-content::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
.cd-timeline-content h2 {
font-size: 20px;
font-size: 1.25rem;
}
.cd-timeline-content p {
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 14px;
font-size: 0.875rem;
}
}
@media only screen and (min-width: 1170px) {
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: white;
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: white;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 0.6s;
-moz-animation: cd-bounce-2 0.6s;
animation: cd-bounce-2 0.6s;
}
}

@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */
.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
-webkit-animation: cd-bounce-2-inverse 0.6s;
-moz-animation: cd-bounce-2-inverse 0.6s;
animation: cd-bounce-2-inverse 0.6s;
}
}

h2.top_title{border-bottom:none;background:none;text-align:center;line-height:32px; font-size:20px}
h2.top_title span{font-size:12px; color:#666;font-weight:500}
</style>
</head>

<body>
<div id="header">
<div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
</div>

<h2 class="top_title"><a href="http://www.helloweba.com/view-blog-285.html">HTML5+CSS3实现的响应式垂直时间轴</a><br/><span>请使用IE9+或Chrome，Firefox高级浏览器或手机访问本页</span></h2>

<section id="cd-timeline" class="cd-container">
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div>

<div class="cd-timeline-content">
<h2>HTML5+CSS3实现的响应式垂直时间轴</h2>
<p>网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴，它可以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。</p>
<span class="cd-date">2015-01-06</span>
</div>
</div>
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="img/cd-icon-movie.svg" alt="Movie">
</div>

<div class="cd-timeline-content">
<h2>jQuery+PHP动态数字展示效果</h2>
<p>我们在一些应用中需要动态展示数据，比如当前在线人数，当前交易总额，当前汇率等等，前端页面需要实时刷新获取最新数据。本文将结合实例给大家介绍使用jQuery和PHP来实现动态数字展示效果。</p>

<span class="cd-date">2014-12-25</span>
</div>
</div>
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div>

<div class="cd-timeline-content">
<h2>PHP操作Session和Cookie</h2>
<p>我们跟踪用户信息时需要用到Session和Cookie，比如用户登录验证、记录用户浏览历史，存储购物车数据，限制用户会话有效时间等。今天我们来了解下PHP是如何操作Session和Cookie的。</p>

<span class="cd-date">2014-12-20</span>
</div>
</div>
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="img/cd-icon-movie.svg" alt="Movie">
</div>

<div class="cd-timeline-content">
<h2>jQuery数字加减插件</h2>
<p>我们在网上购物提交订单时，在网页上一般会有一个选择数量的控件，要求买家选择购买商品的件数，开发者会把该控件做成可以通过点击实现加减等微调操作，当然也可以直接输入数字件数。本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法。</p>

<span class="cd-date">2014-12-14</span>
</div>
</div>
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-movie">
<img src="img/cd-icon-location.svg" alt="Location">
</div>

<div class="cd-timeline-content">
<h2>收集整理的非常有用的PHP函数</h2>
<p>项目中经常会需要一些让人头疼的函数，作为开发者应该整理一个自己的函数库，在需要之时复制过来即可。本文作者收集整理数十个PHP项目中常用的函数，保证能正常运行，你只要复制粘贴到你项目中即可。</p>

<span class="cd-date">2014-12-05</span>
</div>
</div>
</section>

<div id="footer">
<p>出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/sure2016/p/5868893.html

weixin_30820151
关注
CSS-Timeline:使用CSS的简单移动响应时间线
05-06
CSS时间轴 这是发生在2019年和2020年的事件的基本时间表。 它使用CSS3。 所有这些只是我的经验。 它还使用@media查询来在移动设备上获得更好的视图。
垂直时间轴
02-09
垂直时间轴源码，样式很好看，已经写好了，直接可用！
垂直时间轴VerticalTimeline
08-29
垂直时间轴效果VerticalTimeline Created by Codrops Please read more about our license here: http://tympanus.net/codrops/licensing/
excel自动生成舒尔特表_Excel图表制作系列之自动生成垂直时间轴
weixin_39605455的博客
11-21 815
此前分享了水平时间轴的制造方法，你是否由此做出了垂直时间轴呢？本文分享小编做的垂直时间轴的步骤，看看是否和你的一样。若喜欢，请关注。转载请注明出处。1.数据处理：与水平时间轴的处理方式一样，为X轴设置长短不一的位置点，同时合并字段生成数据标签，合并方法不再详述，见Excel图表制作系列之自动生成水平时间轴(散点图的进化)，如下图：2.生成空白图表：选择生成'散点图'。如下图：说明：这步与水平时间轴...
Vue3时间轴（Timeline）
最新发布
Mr Dear的博客
04-18 7896
垂直展示的时间流信息组件，支持：自定义样式；使用虚线；使用右侧或左侧或中间时间轴；功能丰富，简单易用😁😁
HTML5响应式垂直时间轴
12-13
这是一款HTML5响应式垂直时间轴效果。该HTML5响应式垂直时间轴采用bootstrap网格布局，通过CSS3代码来对时间轴进行美化，简单实用。
HTML5+CSS3实现的响应式垂直时间轴效果源码
08-31
在这个“HTML5+CSS3实现的响应式垂直时间轴效果源码”中，我们主要关注如何利用这两者来构建一个适应不同设备屏幕尺寸的动态时间轴。 首先，HTML5引入了许多新元素，比如`<article>`、`<section>`、`<time>`等，...
HTML5+CSS3实现的响应式垂直时间轴效果源码.zip
11-03
【HTML5+CSS3实现的响应式垂直时间轴效果源码】是一个利用现代网页技术创建的交互式设计示例，它结合了HTML5的强大标记语言功能和CSS3的丰富样式及布局特性，以呈现一种适应不同设备屏幕尺寸的时间轴布局。...
HTML5+CSS3响应式垂直时间轴
02-26
在这个“HTML5+CSS3响应式垂直时间轴”项目中，开发者利用了HTML5的新特性以及CSS3的高级布局和动画效果，创建了一个无需JavaScript的动态时间轴，这在实现交互性的同时，也保证了页面加载速度和性能。 HTML5引入了...
CSS+Html垂直时间轴
04-08
CSS+Html垂直时间轴，好看简单实用！
HTML5 响应式时间轴 纵向时间轴.rar
07-10
HTML5 响应式时间轴 一款CSS3技术纵向时间轴特效，一款基于HTML5和CSS3的漂亮的垂直时间轴，它可以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。用于显示以时间为主线的事件，比如企业的发展历程、公司大事记等。
响应式时间轴
11-15
html、js、css响应式时间轴，可根据页面大小而自动适配。
css3垂直时间轴.zip
07-05
css3垂直时间轴是一款基于响应式图标时间轴颜色交替排序列表效果。 css3垂直时间轴演示图：
HTML5+CSS3 实现的响应式垂直时间轴
wgchen
09-07 330
HTML5+CSS3 实现的响应式垂直时间轴
css 垂直时间轴_使用CSS和JavaScript构建垂直时间线
Web design 教程小屋
07-10 1006
在本教程中，我们将学习如何从头开始构建响应式垂直时间轴。 首先，我们将创建具有最少标记和CSS伪元素功能的基本结构。 然后，在向下滚动页面时，我们将使用一些JavaScript添加一些过渡效果。 让我们来了解一下我们将要构建的内容（ 在CodePen上查看较大的版本 ）。 1. HTML标记 我们将使用的标记非常简单； 一个普通的无序列表，每个列表项中都有一个div元素。 当我们...
Android自定义View实现动态垂直时间轴布局
wolfking0608的博客
03-23 873
转载自:https://blog.csdn.net/shineflowers/article/details/60878859时间轴时间轴，顾名思义就是将发生的事件按照时间顺序罗列起来，给用户带来一种更加直观的体验。京东和淘宝的物流顺序就是一个时间轴，想必大家都不陌生，如下图：分析实现这个最常用的一个方法就是用ListView，我这里用继承LinearLayout的方式来实现。首先定义了一些自定义...
Vue之时间轴组件
weixin_30500473的博客
02-13 6093
github地址：https://github.com/SunshineMibai/vue-timeline 实现思路及步骤： 页面分为四个部分 1、左侧时间 2、中间圆点 3、右侧内容 4、虚线部分 最外层div,relative布局,方便子元素计算尺寸 左侧时间固定宽度，显示时间（本demo:100px）,之后absolute绝对定位（left:0） 中间圆点ab...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值