CSS时间轴特效

最新推荐文章于 2023-08-14 15:24:54 发布

容艾

最新推荐文章于 2023-08-14 15:24:54 发布

阅读量538

点赞数 5

分类专栏： PHP 网页文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_46627433/article/details/121590138

版权

PHP 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

网页

2 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述

html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css时间轴</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>
        时间轴
    </h1>
    <div class="timezone">
        <div class="time" style="top:0px">
            <h2>2015-07-02</h2>
            <div>
                <p>
                    第一季
                </p>
            </div>
        </div>
        <div class="timeleft" style="top:150px;">
            <h2>2015-08-02</h2>
            <div>
                <p>
                    第二季
                </p>
            </div>            
        </div>
        <div class="time" style="top:300px;">
            <h2>2015-07-02</h2>
            <div>
                <p>
                    第一季
                </p>
            </div>
        </div>
        <div class="timeleft" style="top:450px;">
            <h2>2015-08-02</h2>
            <div>
                <p>
                    第二季
                </p>
            </div>            
        </div>
    </div>
</body>
</html>

css内容：

body{
    background: #333;    
}
/*加入背景色*/
h1{
    text-align:center;
    color:#fff;
}
.timezone{
    width:6px;
    height:800px;
    background:lightblue;
    margin: 0 auto;
    margin-top:50px;
    border-radius: 3px;
    position:relative;
    -webkit-animation: heightSlide 2s linear;
}
/*加入竖线，宽度为6px*/
@-webkit-keyframes heightSlide{
    0%{
        height:0;
    }
    100%{
        height:800px;
    }
}
/*增加动画*/
.timezone:after{
    content:'待续';
    width:100px;
    color:#fff;
    position:absolute;
    margin-left:0px auto;
    bottom:0px;
    -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);
    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);
}
/*点击后圆球变色*/
.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: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;
}
/*设置div边框内容，就是那个尖*/

容艾

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS时间轴特效

效果图：html内容：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
复制链接

扫一扫