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) {
.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;
}
}@-webkit-keyframes cd-bounce-1 {
0% {
opacity:0;
-webkit-transform:scale(0.5);
}
60% {
opacity:1;
-webkit-transform:scale(1.2);
}
100% {
-webkit-transform:scale(1);
}
}@-moz-keyframes cd-bounce-1 {
0% {
opacity:0;
-moz-transform:scale(0.5);
}
60% {
opacity:1;
-moz-transform:scale(1.2);
}
100% {
-moz-transform:scale(1);
}
}@keyframes cd-bounce-1 {
0% {
opacity:0;
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-ms-transform:scale(0.5);
-o-transform:scale(0.5);
transform:scale(0.5);
}
60% {
opacity:1;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2);
}
100% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
}.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;
}
.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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0