<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <title>Document</title>

    <style>

        .main-timeline {

            overflow: hidden;

            position: relative;

        }

        .main-timeline .timeline {

            position: relative;

            margin-top: -79px;

        }

        .main-timeline .timeline:first-child {

            margin-top: 0;

        }

        .main-timeline .timeline:before,

        .main-timeline .timeline:after {

            content: "";

            display: block;

            width: 100%;

            clear: both;

        }

        .main-timeline .timeline:before {

            content: "";

            width: 100%;

            height: 100%;

            box-shadow: -8px 0 5px -5px rgba(0, 0, 0, 0.5) inset;

            position: absolute;

            top: 0;

            right: 0;

            z-index: 2;

        }

        .main-timeline .timeline-icon {

            width: 210px;

            height: 210px;

            border-radius: 50%;

            border: 25px solid transparent;

            border-top-color: #f44556;

            border-right-color: #f44556;

            margin: auto;

            position: absolute;

            top: 0;

            left: 0;

            bottom: 0;

            right: 0;

            z-index: 1;

            transform: rotate(45deg);

        }

        .main-timeline .year {

            display: block;

            width: 110px;

            height: 110px;

            line-height: 110px;

            border-radius: 50%;

            background: #fff;

            box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);

            margin: auto;

            font-size: 30px;

            font-weight: bold;

            color: #f44556;

            text-align: center;

            position: absolute;

            top: 0;

            left: 0;

            bottom: 0;

            right: 0;

            transform: rotate(-45deg);

        }

        .main-timeline .timeline-content {

            width: 35%;

            float: right;

            background: #f44556;

            padding: 30px 20px;

            margin: 50px 0;

            z-index: 1;

            position: relative;

        }

        .main-timeline .timeline-content:before {

            content: "";

            width: 20%;

            height: 15px;

            background: #f44556;

            position: absolute;

            top: 50%;

            left: -20%;

            z-index: -1;

            transform: translateY(-50%);

        }

        .main-timeline .title {

            font-size: 20px;

            font-weight: bold;

            color: #fff;

            margin: 0 0 10px 0;

        }

        .main-timeline .description {

            font-size: 16px;

            color: #fff;

            line-height: 24px;

            margin: 0;

        }

        .main-timeline .timeline:nth-child(2n):before {

            box-shadow: 8px 0 5px -5px rgba(0, 0, 0, 0.5) inset;

        }

        .main-timeline .timeline:nth-child(2n) .timeline-icon {

            transform: rotate(-135deg);

        }

        .main-timeline .timeline:nth-child(2n) .year {

            transform: rotate(135deg);

        }

        .main-timeline .timeline:nth-child(2n) .timeline-content {

            float: left;

        }

        .main-timeline .timeline:nth-child(2n) .timeline-content:before {

            left: auto;

            right: -20%;

        }

        .main-timeline .timeline:nth-child(2n) .timeline-icon {

            border-top-color: #e97e2e;

            border-right-color: #e97e2e;

        }

        .main-timeline .timeline:nth-child(2n) .year {

            color: #e97e2e;

        }

        .main-timeline .timeline:nth-child(2n) .timeline-content,

        .main-timeline .timeline:nth-child(2n) .timeline-content:before {

            background: #e97e2e;

        }

        .main-timeline .timeline:nth-child(3n) .timeline-icon {

            border-top-color: #13afae;

            border-right-color: #13afae;

        }

        .main-timeline .timeline:nth-child(3n) .year {

            color: #13afae;

        }

        .main-timeline .timeline:nth-child(3n) .timeline-content,

        .main-timeline .timeline:nth-child(3n) .timeline-content:before {

            background: #13afae;

        }

        .main-timeline .timeline:nth-child(4n) .timeline-icon {

            border-top-color: #105572;

            border-right-color: #105572;

        }

        .main-timeline .timeline:nth-child(4n) .year {

            color: #105572;

        }

        .main-timeline .timeline:nth-child(4n) .timeline-content,

        .main-timeline .timeline:nth-child(4n) .timeline-content:before {

            background: #105572;

        }

        @media only screen and (max-width: 1199px) {

            .main-timeline .timeline {

                margin-top: -103px;

            }

            .main-timeline .timeline-content:before {

                left: -18%;

            }

            .main-timeline .timeline:nth-child(2n) .timeline-content:before {

                right: -18%;

            }

        }

        @media only screen and (max-width: 990px) {

            .main-timeline .timeline {

                margin-top: -127px;

            }

            .main-timeline .timeline-content:before {

                left: -2%;

            }

            .main-timeline .timeline:nth-child(2n) .timeline-content:before {

                right: -2%;

            }

        }

        @media only screen and (max-width: 767px) {

            .main-timeline .timeline {

                margin-top: 0;

                overflow: hidden;

            }

            .main-timeline .timeline:before,

            .main-timeline .timeline:nth-child(2n):before {

                box-shadow: none;

            }

            .main-timeline .timeline-icon,

            .main-timeline .timeline:nth-child(2n) .timeline-icon {

                margin-top: -30px;

                margin-bottom: 20px;

                position: relative;

                transform: rotate(135deg);

            }

            .main-timeline .year,

            .main-timeline .timeline:nth-child(2n) .year {

                transform: rotate(-135deg);

            }

            .main-timeline .timeline-content,

            .main-timeline .timeline:nth-child(2n) .timeline-content {

                width: 100%;

                float: none;

                border-radius: 0 0 20px 20px;

                text-align: center;

                padding: 25px 20px;

                margin: 0 auto;

            }

            .main-timeline .timeline-content:before,

            .main-timeline .timeline:nth-child(2n) .timeline-content:before {

                width: 15px;

                height: 25px;

                position: absolute;

                top: -22px;

                left: 50%;

                z-index: -1;

                transform: translate(-50%, 0);

            }

        }

    </style>

</head>

<body>

    <div class="demo">

        <div class="container">

            <div class="row">

                <div class="col-md-12">

                    <div class="main-timeline">

                        <div class="timeline">

                            <div class="timeline-icon"><span class="year">2018</span></div>

                            <div class="timeline-content">

                                <h3 class="title">Web Desginer</h3>

                                <p class="description">

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia mi ultrices,

                                    luctus nunc ut, commodo enim. Vivamus sem erat.

                                </p>

                            </div>

                        </div>

                        <div class="timeline">

                            <div class="timeline-icon"><span class="year">2017</span></div>

                            <div class="timeline-content">

                                <h3 class="title">Web Developer</h3>

                                <p class="description">

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia mi ultrices,

                                    luctus nunc ut, commodo enim. Vivamus sem erat.

                                </p>

                            </div>

                        </div>

                        <div class="timeline">

                            <div class="timeline-icon"><span class="year">2016</span></div>

                            <div class="timeline-content">

                                <h3 class="title">Web Desginer</h3>

                                <p class="description">

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia mi ultrices,

                                    luctus nunc ut, commodo enim. Vivamus sem erat.

                                </p>

                            </div>

                        </div>

                        <div class="timeline">

                            <div class="timeline-icon"><span class="year">2015</span></div>

                            <div class="timeline-content">

                                <h3 class="title">Web Developer</h3>

                                <p class="description">

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia mi ultrices,

                                    luctus nunc ut, commodo enim. Vivamus sem erat.

                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

效果：移动和PC端

内容来源于链接https://www.toutiao.com/i6738373341314286088/

炫酷CSS3垂直时间轴特效的更多相关文章

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

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name=&qu ...

  2. Jquery实现超酷的时间轴特效

    Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分 ...

  3. 10大炫酷的HTML5文字动画特效欣赏

    文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HT ...

  4. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  5. CSS3实现时间轴效果

    原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬 ...

  6. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  7. 发展简史jQuery时间轴特效

    发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wr ...

  8. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  9. 基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效

    今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图 ...

随机推荐

  1. 基于hanlp的es分词插件

    摘要:elasticsearch是使用比较广泛的分布式搜索引擎,es提供了一个的单字分词工具,还有一个分词插件ik使用比较广泛,hanlp是一个自然语言处理包,能更好的根据上下文的语义,人名,地名,组 ...

  2. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  3. Struts2 流程原理

    一.流程图 (转) 二.流程详解 1.服务器传递来的请求,通过ActionContextClearUp.other filters.最后到达StrutsPrepareAndExecuteFilter ...

  4. 单元操作和仓储模式 repository+unitOfWork

    仓储和工作单元模式是用来在数据访问层和业务逻辑层之间创建一个抽象层.应用这些模式,可以帮助用来隔离你的程序在数据存储变化. 在数据源层和业务层之间增加一个repository层进行协调,有如下作用:1 ...

  5. js判断一个 object 对象是否为空

    方法一:使用for...in for...in... 遍历属性,为真则为“非空数组”:否则为“空数组” for (var i in obj) { return true  // 如果不为空,则会执行到 ...

  6. 1 SQL SERVER 实现字符串分割成table的方法

    CREATE FUNCTION [dbo].[fn_SplitStringToTable] ( @p_Input VARCHAR(MAX), @p_Delimeter CHAR() = ',' ) R ...

  7. IntelliJ IDEA(Community版本)本地模式的下载、安装及其使用

    对于初学者来说可以先使用免费的社区版本练练手. ideaIC-2017.3.5——>社区版 ideaIU-2017.3.5——>旗舰版 一.IntelliJ IDEA(Community版 ...

  8. jsp引入文件时候经常遇到的${ctx}

    jsp引入文件时候经常遇到的${ctx} 在jsp页面中经常见到这样的代码: <script type="text/JavaScript" src="${ctx}/ ...

  9. flex整页布局

    使用flex进行整页的三列布局,flex:1下的子元素无法铺满父级.给flex:1元素,添加stretch拉伸 display: flex; align-content: stretch; align ...

  10. kbmMWClientQuery判断一个字段是否修改？

    function TForm5.IsFieldChanged(aDataSet: TkbmMWCustomClientQuery; aFieldName: string): Boolean; var ...