css实现一个自适应滚动显示的时间线效果代码-html代码-BFW代码库

css实现一个自适应滚动显示的时间线效果代码

代码语言：html

代码描述：css实现一个自适应滚动显示的时间线效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        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%;
            	font-family:"Droid Serif",serif;
            	color:#7f8c97;
            	background-color:#e9f0f5;
            }
            a {
            	color:#acb7c0;
            	text-decoration:none;
            	font-family:"Open Sans",sans-serif;
            }
            img {
            	max-width:100%;
            }
            h1,h2 {
            	font-family:"Open Sans",sans-serif;
            	font-weight:bold;
            }
            /* -------------------------------- 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 -------------------------------- */header {
            	height:200px;
            	line-height:200px;
            	text-align:center;
            	background:#303e49;
            }
            header h1 {
            	color:white;
            	font-size:18px;
            	font-size:1.125rem;
            }
            @media only screen and (min-width:1170px) {
            	header {
            	height:300px;
            	line-height:300px;
            }
            header h1 {
            	font-size:24px;
            	font-size:1.5rem;
            }
            }#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) {
         .........完整代码请登录后点击上方下载按钮下载查看