其他代码

超炫酷CSS3垂直时间轴特效

也想出现在这里?联系我们
面包多

超炫酷CSS3垂直时间轴特效-创客云
超炫酷 CSS3 垂直时间轴特效。该特效通过 HTML DOM 元素和 CSS transform 来制作非常炫酷的时间轴布局效果。

使用方法

在页面中引入 fontawesome.min.css 和 bootstrap.min.css 文件。

也想出现在这里?联系我们
创客主机
  1. <link href="dist/bootstrap.min.css" rel="stylesheet">
  2. <link href="dist/fontawesome.min.css" rel="stylesheet">

HTML 结构

该垂直时间轴的 HTML DOM 元素结构如下:

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-12">
  4.             <div class="main-timeline">
  5.                 <div class="timeline">
  6.                     <a href="#" class="timeline-content">
  7.                         <div class="timeline-icon">
  8.                             <i class="fa fa-globe"></i>
  9.                         </div>
  10.                         <div class="inner-content">
  11.                             <h3 class="title">Web Designing</h3>
  12.                             <p class="description">
  13.                                 Lorem ipsum dolor ..
  14.                             </p>
  15.                         </div>
  16.                         <div class="timeline-year"><span>2018</span></div>
  17.                     </a>
  18.                 </div>
  19.                 <div class="timeline">
  20.                     <a href="#" class="timeline-content">
  21.                         <div class="timeline-icon">
  22.                             <i class="fa fa-rocket"></i>
  23.                         </div>
  24.                         <div class="inner-content">
  25.                             <h3 class="title">Web Development</h3>
  26.                             <p class="description">
  27.                                 Lorem ipsum dolor sit amet,..
  28.                             </p>
  29.                         </div>
  30.                         <div class="timeline-year"><span>2017</span></div>
  31.                     </a>
  32.                 </div>
  33.             </div>
  34.         </div>
  35.     </div>
  36. </div>

CSS 样式

然后通过下面的 CSS 样式来制作垂直时间轴效果。

  1. .main-timeline{
  2.     font-family: 'Roboto', sans-serif;
  3.     padding: 20px 100px;
  4.     overflow: hidden;
  5.     position: relative;
  6. }
  7. .main-timeline .timeline{
  8.     background-color: #fff;
  9.     padding: 20px 70px 20px 20px;
  10.     margin-bottom: 70px;
  11.     border-radius: 0 100px 100px 0;
  12.     position: relative;
  13.     display: inline-block;
  14.     z-index: 1;
  15. }
  16. .main-timeline .timeline:before{
  17.     content: '';
  18.     background-color: #fff;
  19.     height: 240px;
  20.     width: 240px;
  21.     border-radius: 50%;
  22.     transform: translateY(-50%);
  23.     position: absolute;
  24.     right: 0;
  25.     top: 50%;
  26. }
  27. .main-timeline .timeline-content{
  28.     color: #000;
  29.     text-align: right;
  30.     width: 95%;
  31.     min-height: 160px;
  32.     padding: 30px 170px 30px 180px;
  33.     border: 2px solid #FD8881;
  34.     display: block;
  35.     float: left;
  36.     position: relative;
  37. }
  38. .main-timeline .timeline-content:hover{ text-decoration: none; }
  39. .main-timeline .timeline-icon{
  40.     color: #808080;
  41.     background-color: #e7e7e7;
  42.     font-size: 80px;
  43.     text-align: center;
  44.     line-height: 130px;
  45.     height: 130px;
  46.     width: 160px;
  47.     border-radius: 10px;
  48.     transform: translateY(-50%);
  49.     position: absolute;
  50.     left: 13px;
  51.     top: 50%;
  52. }
  53. .main-timeline .title{
  54.     color: #808080;
  55.     text-transform: capitalize;
  56.     font-size: 25px;
  57.     font-weight: 600;
  58.     margin: 0 0 5px;
  59. }
  60. .main-timeline .description{
  61.     color: rgba(0,0,0,0.5);
  62.     font-size: 15px;
  63.     letter-spacing: 1px;
  64.     margin: 0;
  65. }
  66. .main-timeline .timeline-year{
  67.     color: #fff;
  68.     background: linear-gradient(60deg,#FF9389,#FF4E68);
  69.     font-size: 70px;
  70.     font-weight: 600;
  71.     text-align: center;
  72.     text-shadow: 2px 2px 5px #000;
  73.     line-height: 200px;
  74.     height: 200px;
  75.     width: 200px;
  76.     border-radius: 50%;
  77.     overflow: hidden;
  78.     transform: translateY(-50%);
  79.     position: absolute;
  80.     right: -95px;
  81.     top: 50%;
  82. }
  83. .main-timeline .timeline-year:before,
  84. .main-timeline .timeline-year:after{
  85.     content: '';
  86.     height: 190px;
  87.     width: 190px;
  88.     background-color: #fff;
  89.     border-radius: 50%;
  90.     position: absolute;
  91.     left: 85px;
  92.     top: 135px;
  93. }
  94. .main-timeline .timeline-year:after{
  95.     border-radius: 0;
  96.     transform: rotate(58deg);
  97.     top: 144px;
  98.     left: 116px;
  99.     box-shadow: 0 0 8px #000;
  100. }
  101. .main-timeline .timeline:nth-child(even){
  102.     border-radius: 100px 0 0 100px;
  103.     padding: 20px 20px 20px 70px;
  104. }
  105. .main-timeline .timeline:nth-child(even) .timeline-icon{
  106.     left: auto;
  107.     right: 13px;
  108. }
  109. .main-timeline .timeline:nth-child(even) .timeline-content{
  110.     padding: 20px 180px 20px 170px;
  111.     text-align: left;
  112.     float: right;
  113. }
  114. .main-timeline .timeline:nth-child(even):before{
  115.     right: auto;
  116.     left: 0;
  117. }
  118. .main-timeline .timeline:nth-child(even) .timeline-year{
  119.     right: auto;
  120.     left: -95px;
  121. }
  122. .main-timeline .timeline:nth-child(4n+2) .timeline-content{ border-color: #FDCC4C; }
  123. .main-timeline .timeline:nth-child(4n+2) .timeline-year{
  124.     background: linear-gradient(60deg,#FDCC4C,#FFF68D);
  125. }
  126. .main-timeline .timeline:nth-child(4n+3) .timeline-content{ border-color: #ADEEC3; }
  127. .main-timeline .timeline:nth-child(4n+3) .timeline-year{
  128.     background: linear-gradient(60deg,#ADEEC3,#83C796);
  129. }
  130. .main-timeline .timeline:nth-child(4n+4) .timeline-content{ border-color: #7AB8DD; }
  131. .main-timeline .timeline:nth-child(4n+4) .timeline-year{
  132.     background: linear-gradient(60deg,#7AB8DD,#A9E3F7);
  133. }
  134. @media screen and (max-width:1200px){
  135.     .main-timeline{ padding: 20px 0 0; }
  136. }
  137.     @media screen and (max-width:990px){
  138.     .main-timeline{ padding: 20px 0 0 0; }
  139.     .main-timeline .timeline:nth-child(even),
  140.     .main-timeline .timeline{
  141.         border-radius: 0;
  142.         padding: 20px;
  143.         margin: 0 100px 60px 0;
  144.     }
  145.     .main-timeline .timeline:nth-child(even){ margin: 0 0 60px 100px; }
  146.     .main-timeline .timeline:nth-child(even) .timeline-content,
  147.     .main-timeline .timeline-content{
  148.         padding: 20px 120px 20px 190px;
  149.     }
  150.     .main-timeline .timeline:nth-child(even) .timeline-content{ padding: 20px 190px 20px 120px; }
  151.     .main-timeline .timeline:before{ right: -100px; }
  152.     .main-timeline .timeline-year{
  153.         right: -130px;
  154.     }
  155.     .main-timeline .timeline:nth-child(even):before{ left: -100px; }
  156.     .main-timeline .timeline:nth-child(even) .timeline-year{
  157.         left: -130px;
  158.     }
  159. }
  160. @media screen and (max-width:767px){
  161.     .main-timeline{ padding: 70px 0 0; }
  162.     .main-timeline .timeline:nth-child(even),
  163.     .main-timeline .timeline{
  164.         border-radius: 0;
  165.         padding: 15px;
  166.         margin: 0 0 100px;
  167.     }
  168.     .main-timeline .timeline:nth-child(even) .timeline-content,
  169.     .main-timeline .timeline-content{
  170.         padding: 100px 30px 20px;
  171.         text-align: center;
  172.         width: 100%;
  173.     }
  174.     .main-timeline .timeline-icon{ display: none; }
  175.     .main-timeline .timeline:nth-child(even):before,
  176.     .main-timeline .timeline:before{
  177.         display: block;
  178.         right: 50%;
  179.         top: -70px;
  180.         transform: translateY(0) translateX(50%);
  181.         height: 180px;
  182.         width: 180px;
  183.     }
  184.     .main-timeline .timeline:nth-child(even):before{
  185.         left: 50%;
  186.         transform: translateY(0) translateX(-50%);
  187.     }
  188.     .main-timeline .timeline:nth-child(even) .timeline-year,
  189.     .main-timeline .timeline-year{
  190.         right: 50%;
  191.         top: -70px;
  192.         transform: translateY(0) translateX(50%);
  193.         height: 150px;
  194.         width: 150px;
  195.         line-height: 150px;
  196.         font-size: 50px;
  197.     }
  198.     .main-timeline .timeline-year:before{
  199.         left: 30px;
  200.         top: 100px;
  201.     }
  202.     .main-timeline .timeline-year:after{
  203.         left: 65px;
  204.         top: 106px;
  205.         transform: rotate(67deg);
  206.     }
  207.     .main-timeline .timeline:nth-child(even) .timeline-year{
  208.         left: 50%;
  209.         transform: translateY(0) translateX(-50%);
  210.     }
  211. }
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!