前端实战——带有时间轴的博客首页布局

一、布局参照模板

http://www.yangqq.com/web/24/

二、布局的html页面

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/animation.css">
    <link rel="stylesheet" href="css/timelineBlog.css">
    <title>个人博客模板</title>
</head>
<body>
    <header>
        <nav id="nav">
            <ul class="nav-bar">
                <li class="nav-menu"><a href="#">网站首页</a></li>
                <li class="nav-menu"><a href="#">个人博客模板</a></li>
                <li class="nav-menu"><a href="#">图书推荐</a></li>
                <li class="nav-menu active"><a href="#">网站建设</a></li>
                <li class="nav-menu "><a href="#">html5/css</a></li>
                <li class="nav-menu"><a href="#">技术探讨</a></li>
                <li class="nav-menu"><a href="#">慢生活</a></li>
                <li class="nav-menu"><a href="#">闲言碎语</a></li>
                <li class="nav-menu"><a href="#">JS实践</a></li>
            </ul>
        </nav>
    </header>
    <div class="main-body">
        <div class="banner">
            <figure>
                <img src="images/art.jpg" alt="banner-img"/>
                <figcaption>
                    <h4>
                        渡人如渡己，渡已，亦是渡
                    </h4>
                    <p>
                        当我们被误解时，会花很多时间去辩白。 但没有用，没人愿意听，大家习惯按自己的所闻、理解做出判别，每个人其实都很固执。与其努力且痛苦的试图扭转别人的评判，不如默默承受，给大家多一点时间和空间去了解。而我们省下辩解的功夫，去实现自身更久远的人生价值。其实，渡人如渡己，渡已，亦是渡人。
                    </p>
                </figcaption>
            </figure>
            <div class="mingpian">
                <h2>我的名片</h2>
                <p>网名：DanceSmile | 即步非烟</p>
                <p>职业：Web前端设计师、网页设计</p>
                <p>电话：13662012345</p>
                <p>Email：dancesmiling@qq.com</p>
                <ul class="social-link">
                    <li><a href="/" class="talk" title="给我留言"></a></li>
                    <li><a href="/" class="address" title="联系地址"></a></li>
                    <li><a href="/" class="email" title="给我写信"></a></li>
                    <li><a href="/" class="photos" title="生活照片"></a></li>
                    <li><a href="/" class="heart" title="关注我"></a></li>                
                </ul>
            </div>
        </div>
        <div class="bland"></div>
        <div class="main-content">
            <ul class="ul-blogs">
                <li class="blog-item">
                    <div class="blog-wrapper">
                        <div class="trigle"></div><!--三角形-->
                        <div class="circle"></div><!--圆形-->
                        <h4><a href="#">我希望我的爱情是这样的</a></h4>
                        <div class="item-main">
                            <div class="img-wrapper">
                                <a href="#"><img src="images/s1.jpg" alt="article1"/></a>
                            </div>
                            <p>
                                我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。
                            </p>
                        </div>
                        <ul class="blog-footer">
                             <li class="likes"><a href="#">10</a></li>
                            <li class="comments"><a href="#">34</a></li>
                            <li class="icon-time"><a href="#">2013-8-7</a></li>
                        </ul>
                    </div>
                </li>
                
                <li class="blog-item">
                    <div class="blog-wrapper">
                        <div class="trigle"></div><!--三角形-->
                        <div class="circle"></div><!--圆形-->
                        <h4><a href="#">我希望我的爱情是这样的</a></h4>
                        <div class="item-main">
                            <div class="img-wrapper">
                                <a href="#"><img src="images/s1.jpg" alt="article1"/></a>
                            </div>
                            <p>
                                我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。
                            </p>
                        </div>
                        <ul class="blog-footer">
                             <li class="likes"><a href="#">10</a></li>
                            <li class="comments"><a href="#">34</a></li>
                            <li class="icon-time"><a href="#">2013-8-7</a></li>
                        </ul>
                    </div>
                </li>    
                
                <li class="blog-item">
                    <div class="blog-wrapper">
                        <div class="trigle"></div><!--三角形-->
                        <div class="circle"></div><!--圆形-->
                        <h4><a href="#">我希望我的爱情是这样的</a></h4>
                        <div class="item-main">
                            <div class="img-wrapper">
                                <a href="#"><img src="images/s1.jpg" alt="article1"/></a>
                            </div>
                            <p>
                                我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。
                            </p>
                        </div>
                        <ul class="blog-footer">
                             <li class="likes"><a href="#">10</a></li>
                            <li class="comments"><a href="#">34</a></li>
                            <li class="icon-time"><a href="#">2013-8-7</a></li>
                        </ul>
                    </div>
                </li>
                
                <li class="blog-item">
                    <div class="blog-wrapper">
                        <div class="trigle"></div><!--三角形-->
                        <div class="circle"></div><!--圆形-->
                        <h4><a href="#">我希望我的爱情是这样的</a></h4>
                        <div class="item-main">
                            <div class="img-wrapper">
                                <a href="#"><img src="images/s1.jpg" alt="article1"/></a>
                            </div>
                            <p>
                                我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。
                            </p>
                        </div>
                        <ul class="blog-footer">
                             <li class="likes"><a href="#">10</a></li>
                            <li class="comments"><a href="#">34</a></li>
                            <li class="icon-time"><a href="#">2013-8-7</a></li>
                        </ul>
                    </div>
                </li>
                
                <li class="blog-item">
                    <div class="blog-wrapper">
                        <div class="trigle"></div><!--三角形-->
                        <div class="circle"></div><!--圆形-->
                        <h4><a href="#">我希望我的爱情是这样的</a></h4>
                        <div class="item-main">
                            <div class="img-wrapper">
                                <a href="#"><img src="images/s1.jpg" alt="article1"/></a>
                            </div>
                            <p>
                                我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。
                            </p>
                        </div>
                        <ul class="blog-footer">
                             <li class="likes"><a href="#">10</a></li>
                            <li class="comments"><a href="#">34</a></li>
                            <li class="icon-time"><a href="#">2013-8-7</a></li>
                        </ul>
                    </div>
                </li>        
                
                
            </ul>
        
            <aside>
                <div class="tuijian">
                 <h2>推荐文章</h2>
                <ol>
                  <li><span><strong>1</strong></span><a href="/">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
                  <li><span><strong>2</strong></span><a href="/">励志人生-要做一个潇洒的女人</a></li>
                  <li><span><strong>3</strong></span><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li>
                  <li><span><strong>4</strong></span><a href="/">Green绿色小清新的夏天-个人博客模板</a></li>
                  <li><span><strong>5</strong></span><a href="/">女生清新个人博客网站模板</a></li>
                  <li><span><strong>6</strong></span><a href="/">Wedding-婚礼主题、情人节网站模板</a></li>
                  <li><span><strong>7</strong></span><a href="/">Column 三栏布局 个人网站模板</a></li>
                  <li><span><strong>8</strong></span><a href="/">时间煮雨-个人网站模板</a></li>
                  <li><span><strong>9</strong></span><a href="/">花气袭人是酒香—个人网站模板</a></li>
                </ol>
            </div>
            
                <div class="topic">
                    <h2>图文并茂</h2>
                    <ul class="ul-topic">
                        <li>
                            <a href="#">            
                                <img src="images/k01.jpg"/>
                                <p>腐女不可怕，就害怕腐女会画画！</p>
                                <p class="added">伤不起</p>
                            </a>
                        </li>
                        <li>
                            <a href="/">
                                <img src="images/k01.jpg">
                                <p>问前任，你还爱我吗？无限戳中泪点~</p>
                                <p class="added">感兴趣</p>
                                </a>
                            </li>
                        <li>
                            <a href="/">
                                <img src="images/k01.jpg">
                                <p>世上所谓幸福，就是一个笨蛋遇到一个傻瓜。</p>
                                <p class="added">喜欢</p>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="clicks">
                    <h2>热门点击</h2>
                    <ol>
                      <li><span><a href="/">慢生活</336666></span><a href="/">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
                      <li><span><a href="/">爱情美文</a></span><a href="/">励志人生-要做一个潇洒的女人</a></li>
                      <li><span><a href="/">慢生活</a></span><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li>
                      <li><span><a href="/">博客模板</a></span><a href="/">Green绿色小清新的夏天-个人博客模板</a></li>
                      <li><span><a href="/">女生个人博客</a></span><a href="/">女生清新个人博客网站模板</a></li>
                      <li><span><a href="/">Wedding</a></span><a href="/">Wedding-婚礼主题、情人节网站模板</a></li>
                      <li><span><a href="/">三栏布局</a></span><a href="/">Column 三栏布局 个人网站模板</a></li>
                      <li><span><a href="/">个人网站模板</a></span><a href="/">时间煮雨-个人网站模板</a></li>
                      <li><span><a href="/">古典风格</a></span><a href="/">花气袭人是酒香—个人网站模板</a></li>
                    </ol>
                </div>
                
                <div class="search">
                    <form class="search-form" method="post" action="#">
                        <input type="text" value="Search" onfocus="this.value=''" onblur="this.value='Search'"/>
                    </form>
                </div>
                
                <div class="video">
                    <img src="images/artwork.png"/>
                    <p>南方姑娘</p>
                    <p>歌手：赵磊</p>
                    <p>所属专辑《赵小磊》</p>
                    <p><a href="#">喜欢</a></p>
                    <p class="video-player">
                        <audio src="#" controls></audio>
                    </p>
                    </div>
                    
                </div>
            
            </aside>
        
        </div>
        
    </div>    
    <footer>
        <div class="footer-content">
            <div class="links"> 
                <h2>友情链接</h2>
                  <ul>
                    <li><a href="/">杨青个人博客</a></li>
                    <li><a href="http://www.3dst.com">3DST技术服务中心</a></li>
                  </ul>                
            </div>
            
            <div class="comments">
                 <h2>最新评论</h2>
                  <dl>
                    <dt><img src="images/s8.jpg">
                    </dt>
                    <dd>DanceSmile
                      <time>49分钟前</time>
                    </dd>
                    <dd>在 <a href="http://www.yangqq.com/jstt/bj/2013-07-28/530.html" class="title">如果要学习web前端开发，需要学习什么？ </a>中评论：</dd>
                    <dd>文章非常详细，我很喜欢.前端的工程师很少，我记得几年前yahoo花高薪招聘前端也招不到</dd>
                  </dl>
                  <dl>
                    <dt><img src="images/s8.jpg">
                    </dt>
                    <dd>yisa
                      <time>2小时前</time>
                    </dd>
                    <dd>在 <a href="http://www.yangqq.com/news/s/2013-07-31/533.html" class="title">芭蕾女孩的心事儿</a>中评论：</dd>
                    <dd>我手机里面也有这样一个号码存在</dd>
                  </dl>
                  <dl>
                    <dt><img src="images/s8.jpg">
                    </dt>
                    <dd>小林博客
                      <time>8月7日</time>
                    </dd>
                    <dd>在 <a href="http://www.yangqq.com/jstt/bj/2013-06-18/285.html" class="title">如果个人博客网站再没有价值，你还会坚持吗？ </a>中评论：</dd>
                    <dd>博客色彩丰富，很是好看</dd>
                  </dl>
            </div>
            <div class="photos">
             <h2>摄影作品</h2>
              <ul>
                <li><a href="/"><img src="images/01.jpg"></a></li>
                <li><a href="/"><img src="images/01.jpg"></a></li>
                <li><a href="/"><img src="images/01.jpg"></a></li>
                <li><a href="/"><img src="images/01.jpg"></a></li>
                <li><a href="/"><img src="images/01.jpg"></a></li>
                <li><a href="/"><img src="images/01.jpg"></a></li>
                <li><a href="/"><img src="images/01.jpg"></a></li>
                <li><a href="/"><img src="images/01.jpg"></a></li>
                <li><a href="/"><img src="images/01.jpg"></a></li>
              </ul>
            </div>
            
        </div>
        
        <div class="footer-bottom">
        <p>Copyright 2013 Design by <a href="#">DanceSmile</a></p>
        </div>
    </footer>
    <script src="js/jquery-2.1.4.min.js"></script>
</body>

博客布局html代码

三、布局的css代码

/*Css Document*/

* {
margin:0;
padding:0;
}

*,*:before,*:after{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
} 
body{
    font:12px "宋体";
    background-color:#333;
    color:#3F3E3C;
    line-height:1.5;    
}
img{
    border:0;
    vertical-align:middle;
}
h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}
h1{
    font:24px "微软雅黑";    
}
p{
    word-wrap:break-word;
}
ul,ol{
    list-style:none;
    margin:0;
    padding:0;
}
dl,dt,dd{
    margin:0;
    padding:0;
}
a{
    color:#a6a6a6;
    text-decoration:none;
    transition:all 1s ease;
}
a:hover{
    color:#fff;
}
.clear:after{
   content:"";
  display:table;
  clear:both;       
}

.clear{
   zoom:1;  
}
/*用来清除浮动*/
.blank {
     height: 5px; 
     overflow: hidden; 
     width: 100%; 
     margin: auto;
     clear: both 
 }
 /*nav导航*/
 header{
    margin-top:30px;
    width:100%;
    background-color:#222;
    height:70px;
    line-height:70px;
    border-bottom:1px solid #464647;
 }
 
 nav>ul{
    width:1000px;
    margin:0 auto; 
    /*保证各个菜单处于居中状态*/
    text-align:center;
 }
 nav>ul li{
    display:inline-block;
    
 }
 nav>ul li>a{
    color:#e7e7e7;
    display:block;
    padding:0 20px;
    /*使用这个来控制高度，就可以不用使用padding-top*/
    line-height:40px;
    font-size:12px;     
 } 
 nav>ul li>a:hover,
 nav>ul li.active>a{
    color:#fff;
    border-radius:6px;
    background-color:rgba(20,20,20,0.8); 
    box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
 }
 .main-body{
    width:100%;
    overflow:hidden;
    border-top:1px solid #000;
 }
 /*第一部分的图片和名片*/
 
 .banner{
    width:1000px;
    margin:30px auto;
    overflow:hidden;
    margin-top:30px;
    position:relative;     
 }
 /*图片部分*/
 .banner figure{    
    width:630px; 
    height:250px; 
    position:relative;  
    float:left; 
    margin:0; 
    position:relative;
    -webkit-animation:pageTop 6s ease backwards;
 }
 .banner figure>figcaption{
    position:absolute;
    top:20%;
    left:0;
    right:0;
    bottom:20%; 
    color:white;
    background-color:rgba(153,153,153,.8);     
    padding:20px;
    opacity:0;
    transition:all 1s ease;
 }
  .banner figure>figcaption>h4{
    font-weight:bold;
  }
  .banner figure:hover>figcaption{
    opacity:1;
  }
 /*名片部分*/
 .mingpian{
    background-color:#222;
    box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
    border-radius:6px;
    width:350px;
    float:right;
    height:248px;
    overflow:hidden;
 }
 
 .mingpian h2{
    margin-left:10px;
    margin-top:15px;
    margin-bottom:15px;
    font-size:2.1em;
    font-weight:bold;    
 }
 .mingpian p{
    color:#89919a;
    line-height:2.1;
    margin-left:45px;
    -webkit-animation:blink 3s ease backwards;     
 }
 .mingpian ul.social-link{
 
    text-align:center;
    margin:15px 0 0 15px;
 }
  .mingpian ul.social-link li{
    display:inline-block;
    margin-right:5px;
  }
 .mingpian ul.social-link li a{
    display:block;
    border-radius:59%;
    background-color:pink;
    width:50px; 
    height:50px;
    box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
 }
 /*博客区域*/
 .main-content{
    width:1000px;
    margin:40px auto;
 }
 .ul-blogs{
    width:666px;
    float:left;
    position:relative;
     
 }
 
 .ul-blogs:before{
    width:2px;
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    background-color:#000;
    
 }
.blog-wrapper{    
    margin-bottom:40px;
    position:relative;
    width:630px;     
    background-color:#222;
    border-radius:6px;
    box-shadow:0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
 }
 /*三角形*/
 .trigle{     
    position:absolute;
    right:0;
    margin-right:-20px;
    top:20px;
    border-style:solid;
    border-width:0 0 20px 22px;
    border-color:transparent transparent transparent #111;
 }
 /*圆形*/
.circle{
    position:absolute;
    top:15px;
    right:0;
    margin-right:-40px;
    width:12px;
    height:12px;
    border:2px solid #333;
    border-radius:50%;
    background-color:#111;
}
.circle:hover{
    border:2px solid #B9B9B9;
}
li.blog-item h4{
    padding:0 0 0 20px;
    font-size:16px;
    font-family:"微软雅黑";     
    line-height:40px;
    height:40px;
}
li.blog-item h4>a:hover{
    padding-left:20px;
}
 
.blog-item .item-main{
    padding:10px 20px 60px 20px;
}
.item-main img{  
    width:150px;
    height:120px;
    transition:all 1s ease;
}
.item-main img:hover{
    opacity:0.6;
}
.item-main .img-wrapper{
    float:left;
}
.item-main p{
    padding-left:170px;
    color:#a6a6a6;
    font-size:12px;
    line-height:28px;
}
ul.blog-footer{
    clear:both;
    background-color:#000;
    overflow:hidden; 
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
}
ul.blog-footer li{
    display:inline-block;
    
 
}
ul.blog-footer li>a{
    display:block;
    height:20px;
    line-height:20px;
    padding:0 10px;     

    
}
ul.blog-footer li:first-child{
    float:right;
}
ul.blog-footer li:second-child{
    float:right;
}
/*侧边栏部分*/
aside{
    width:310px;
    float:right;
}
aside h2, footer h2 { 
    font-size: 16px; 
    margin-bottom: 10px; 
    text-shadow: #000 1px 1px 1px; 
    color: #ccc
}
aside>div{
    box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); 
    border-radius: 6px; 
    padding: 15px; 
    background: #222; 
    margin-bottom: 20px; 
    overflow: hidden;
}
.tuijian li{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;    
}
.tuijian li span:before{
    content:"0";
}
.tuijian li span{
    margin-right:10px;
    font-size:14px;
    font-family:"微软雅黑";
}
 
.tuijian li:nth-child(-n+3) span{
    width:39px;
    color:#999;

}
.tuijian li:nth-child(-n+3) strong{
    font-size:24px;
    font-weight:normal;
}
.tuijian li:first-child span{
    color:#f8490b;
}
.tuijian li:nth-child(n+3){
    line-height:24px;
}
.tuijian li:nth-child(4){
    margin-top:5px;
}
.tuijian li a:hover{
    padding-left:20px;
}
/*图文并茂*/
.ul-topic>li>a{
    display:block;
}
.ul-topic>li{
    overflow:hidden;
    margin-bottom:15px;
}
.ul-topic>li:last-child{
    margin-bottom:0;
}
.ul-topic{
    overflow:hidden;
}
.topic img{
    float:left;
}
.topic p{
    padding-left:93px;
    
}

.topic p.added{
    color:#B5783E;
    margin-top:10px;
}
/*热门点击*/
.clicks span:before{
    content:"【";
    margin-right:5px;
}
.clicks span:after{
    content:"】";
    margin-left:5px;
}
.clicks span{
    color:#3F3E3C;
}
.clicks span a{
    color:#336666;
}
.clicks  a:hover{
    text-decoration:underline;
}
 
.clicks li{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    line-height:24px;
}

/*搜索框*/
.search {
    text-align:center;
    padding:25px 30px;
}
.search input{
    display:block;
    background-color:#191919;
    line-height:26px;
    color:#a6a6a6;
    border:1px solid #111;
    width:100%;
}
/*音频播放*/
.video img{
    width:95px;
    height:90px;
    float:left;
}
.video p:not(:last-child){
    padding-left:115px;
    line-height:24px;
    color:#B9B9B9;
}
.video .video-player{
    overflow:hidden;
    width:100%;
}
.video audio{
    margin-top:20px;
    width:100%;
}
.video a{
    color:B5783E;
}
.video a:hover{
    text-decoration:underline;
}

/*页脚部分*/
footer{
    margin-top:10px;
    background-color:#1D1D1D;
    overflow:hidden;
 
}
footer .footer-content{
    width:1000px;
    margin:0 auto;
    overflow:hidden;
    padding:15px;
}
footer .links{
    width:200px;
    overflow:hidden;
     
    float:left;
    line-height:25px;
    
}
footer .comments{
    width:410px;
    float:left;
}
footer .comments dl>dt{     
    float:left;
}
footer .comments dl{
    overflow:hidden;
    clear:left;
    margin-bottom:15px;
}
footer .comments dl>dt>img{
    width:70px;
    height:70px; 
}

footer .comments dl>dd{
    padding-left:10px;
    line-height:2;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    
}
footer .comments time{
    color:#006666;
} 
footer .comments dl>dd:last-child{
    color:#6A9150;
}

footer .photos{
    width:250px;
    text-align:center;     
    float:right;
}
footer .photos>ul>li{
    display:inline-block;
    margin-right:3px;
    margin-bottom:10px;
 
}
 
footer .photos img{
    width:70px;
    height:70px;
}
.footer-bottom{
    clear:both;
    background-color:#000;
}
footer .footer-bottom p{
    width:1000px;
    margin:0 auto;
    padding:10px 5px;
}

博客布局css代码

四、相关动画的css定义

/*图片向上翻转的动画效果*/
 @-webkit-keyframes pageTop { 0% {
opacity: 0;
-webkit-transform: perspective(400px) rotateX(90deg);
}
 100% {
opacity: 1;
-webkit-transform: perspective(400px) rotateX(0deg);
}
}

/*文字的闪烁效果*/
@-webkit-keyframes blink{
    0%{
        opacity:0;
    }40%{
        opacity:.3;
    }50%{
        opacity:.8;
    }55%{
        opacity:.3;
    }60%{
        opacity:.8;
    }100%{
        opacity:0;
    }
}

博客布局动画定义

五、该案例知识点总结

1，导航条的实现（line-height取代padding-top,padding-bottom）

2,图像的翻转动画

3，文字的闪烁动画

4，带箭头和圆点的div的实现（箭头可以是完整的三角，半三角；利用和背景相同的border实现圆角周围的间隙效果）；

5，ul：before实现一条竖线

6，hover时候改变padding，opacity等实现动画效果

7，长文本的单行文字效果

8，特殊选择器的使用,nth-child(-n+3)

9,audio组件的使用

10，dl，dt，dd组件的使用

posted @ 2015-06-24 11:28 bobo的学习笔记阅读(1105) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端实战——带有时间轴的博客首页布局

公告