css实现自适应时间轴时间线大事记效果代码-html代码-BFW代码库

css实现自适应时间轴时间线大事记效果代码

代码语言：html

所属分类：响应式

代码描述：css实现自适应时间轴时间线大事记效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
  body {
        margin:0;
        padding:0;
        background:#e6e6e6;
        color:#323232;
        font-family:'Open Sans',sans-serif;
        font-size:112.5%;
        line-height:1.6em
}
.timeline {
        position:relative;
        width:660px;
        margin:0 auto;
        margin-top:20px;
        padding:1em 0;
        list-style-type:none
}
.timeline:before {
        position:absolute;
        left:50%;
        top:0;
        content:' ';
        display:block;
        width:6px;
        height:100%;
        margin-left:-3px;
        background:#505050;
        background:-moz-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(30,87,153,1)),color-stop(100%,rgba(125,185,232,1)));
        background:-webkit-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
        background:-o-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
        background:-ms-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
        .........完整代码请登录后点击上方下载按钮下载查看