CSS3 to achieve timeline effects
|
Recently, when I turned on my computer, I saw that Geek Academy offered a free month for new users, so I went in to take a look. I won’t go into details about its courses, but I saw this effect on the practical path map page:
It feels a bit like a timeline, and when you hover the mouse over each block, there is a drop-down effect to expand the screenshot information. The effect feels pretty good. But I feel that this effect doesn't seem to be very flexible for dynamic addition, because the height cannot be flexibly adapted like the width, so you have to set them one by one. So many of them are made for display effects. Of course, I also made some simpler similar effects based on this idea, mainly the overall layout effect, and I won’t imitate each specific content. I also added an opening animation to make it more interesting... Let’s take a look at the effect first:
That's about it. Let's get straight to the point without further ado: HTML structure:
<div class="timezone">
<div class="time">
<h2>2015-07-02</h2>
<div>
<p>Rage Event Season 1</p>
<ul>
</ul>
</div>
</div>
<div class="timeLeft" style="top: 100px;">
<h2>2015-07-02</h2>
<div>
<p>Rage Event Season 2</p>
<ul>
</ul>
</div>
</div>I have simplified the HTML structure here. The .time class represents the right side, and .timeLeft represents the left side. Then I just add some margins. I have deleted the content in each block. The CSS style code is as follows:
body{
background: #333;
}
h1{
text-align: center;
color:#fff;
}
.timezone{
width:6px;
height: 350px;
background: lightblue;
margin: 0 auto;
margin-top:50px;
border-radius: 3px;
position: relative;
-webkit-animation: heightSlide 2s linear;
}
@-webkit-keyframes heightSlide{
0%{
height: 0;
}
100%{
height: 350px;
}
}
.timezone:after{
content: 'To be continued...';
width: 100px;
color:#fff;
position: absolute;
margin-left: -35px;
bottom: -30px;
-webkit-animation: showIn 4s ease;
}
.timezone .time,.timezone .timeLeft{
position: absolute;
margin-left: -10px;
margin-top:-10px;
width:20px;
height:20px;
border-radius: 50%;
border:4px solid rgba(255,255,255,0.5);
background: lightblue;
-webkit-transition: all 0.5s;
-webkit-animation: showIn ease;
}
.timezone .time:nth-child(1){
-webkit-animation-duration:1s;
}
.timezone .timeLeft:nth-child(2){
-webkit-animation-duration:1.5s;
}
.timezone .time:nth-child(3){
-webkit-animation-duration:2s;
}
.timezone .timeLeft:nth-child(4){
-webkit-animation-duration:2.5s;
}
@-webkit-keyframes showIn{
0%,70%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.timezone .time h2,.timezone .timeLeft h2{
position: absolute;
margin-left: -120px;
margin-top: 3px;
color:#eee;
font-size: 14px;
cursor:pointer;
-webkit-animation: showIn 3s ease;
}
.timezone .timeLeft h2{
margin-left: 60px;
width: 100px;
}
.timezone .time:hover,.timezone .timeLeft:hover{
border:4px solid lightblue;
background: lemonchiffon;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.4);
}
.timezone .time div, .timezone .timeLeft div{
position: absolute;
top:50%;
margin-top: -25px;
left:50px;
width: 300px;
height: 50px;
background: lightblue;
border:3px solid #eee;
border-radius: 10px;
z-index: 2;
overflow: hidden;
cursor:pointer;
-webkit-animation: showIn 3s ease;
-webkit-transition: all 0.5s;
}
.timezone .timeLeft div{
left:-337px;
}
.timezone .time div:hover,.timezone .timeLeft div:hover{
height: 170px;
}
.timezone .time div p,.timezone .timeLeft div p{
color: #fff;
font-weight: bold;
text-align: center;
}
.timezone .time:before,.timezone .timeLeft:before{
content: '';
position: absolute;
top:0px;
left: 32px;
width: 0px;
height: 0px;
border:10px solid transparent;
border-right:10px solid #eee;
z-index:-1;
-webkit-animation: showIn 3s ease;
}
.timezone .timeLeft:before{
left:-33px;
border:10px solid transparent;
border-left:10px solid #eee;
}
.timezone .time div ul,.timezone .timeLeft div ul{
list-style: none;
width:300px;
padding:5px 0 0;
border-top:2px solid #eee;
color:#fff;
text-align: center;
}
.timezone .time div li, .timezone .timeLeft div li{
display: inline-block;
height: 25px;
line-height: 25px;
}This CSS style code is for reference only. It is not very practical and has not been organized much. The main purpose is to understand the animation effects and the overall layout. Best wishes! Original link: https://www.cnblogs.com/jr1993/p/4779678.html The above is the details of how to implement timeline effects with CSS3. For more information about CSS3 timeline effects, please pay attention to other related articles on 123WORDPRESS.COM! |
<<: Linux configuration without password login stand-alone and full distribution detailed tutorial
>>: MySQL sorting feature details
Recommend
Vue uses echart to customize labels and colors
This article example shares the specific code of ...
HTML Form Tag Tutorial (4):
Suppose now you want to add an item like this to ...
A simple example of using js to get the time of the last week, month and three months
Table of contents Get the time in the past week G...
Introduction to setting up Tomcat to start automatically on Linux system
1. Enter the /etc/init.d directory: cd /etc/init....
Use Meta to cancel the traffic cache to refresh the page every time you visit it for easy debugging
Copy code The code is as follows: <!-- Prevent...
MySQL tutorial DML data manipulation language example detailed explanation
Table of contents 1. Data Manipulation Language (...
JavaScript implements simple date effects
The specific code of JavaScript date effects is f...
Explore how an LED can get you started with the Linux kernel
Table of contents Preface LED Trigger Start explo...
Docker Gitlab+Jenkins+Harbor builds a persistent platform operation
CI/CD Overview CI workflow design Git code versio...
Mysql desktop tool SQLyog resources and activation methods say goodbye to the black and white command line
Without further ado, let’s get started with resou...
Solve the problem of mysql's int primary key self-increment
Introduction When we use the MySQL database, we a...
Detailed explanation of four solutions to floating problems in CSS layout
1. Cause: The effect after the subbox is set to f...
Why should MySQL fields use NOT NULL?
I recently joined a new company and found some mi...
Shtml Concise Tutorial
Shtml and asp are similar. In files named shtml, s...
Echarts tutorial on how to implement tree charts
Treemaps are mainly used to visualize tree-like d...