CSS3实战开发:百度新闻热搜词特效实战开发

当前位置 : 首页 > 网页制作 > CSS > CSS3实战开发:百度新闻热搜词特效实战开发

CSS3实战开发:百度新闻热搜词特效实战开发

来源: 作者: 时间:2016-01-23 10:51
大概知道这些细节后,现在我就分步骤带领大家开发这个特效。根据上面所说的关键细节,编写html代码如下:复制代码!DOCTYPE htmlhtml head meta charset=utf-8 link rel=styleshe
大概知道这些细节后,现在我就分步骤带领大家开发这个特效。
 
根据上面所说的关键细节,编写html代码如下:
 
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title>CSS3实战开发:百度热搜词动画特效实战开发</title>
    </head>
    <body>
        <div class="container">
            <div id="news_hotwords">
                <div class="keywords_title">
                    <a href="http://www.itdriver.cn">新闻热搜词</a><span>HOT WORDS</span>
                </div>
                <div class="hotwords">
                    <ul>
                        <li class="li_0 li_color_0">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网实战教程">一起为改革发力</a>
                            <a class="detail" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网实战教程">一起为改革发力</a>
                        </li>
                        <li class="li_1 li_color_1">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">习 近 平会见外国友人</a>
                            <a class="detail" href="http://www.itdriver.cn">习 近 平会见外国友人</a>
                        </li>
                        <li class="li_2 li_color_0">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">李 克 强重视知识产权</a>
                            <a class="detail" href="http://www.itdriver.cn">李 克 强重视知识产权</a>
                        </li>
                        <li class="li_3 li_color_1">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">36斤纯黄金鸳鸯枕</a>
                            <a class="detail" href="http://www.itdriver.cn">36斤纯黄金鸳鸯枕</a>
                        </li>
                        <li class="li_4 li_color_0">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">EXO机场辱工作人员</a>
                            <a class="detail" href="http://www.itdriver.cn">EXO机场辱工作人员</a>
                        </li>
                        <li class="li_5 li_color_1">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">学费迎来"涨价潮"</a>
                            <a class="detail" href="http://www.itdriver.cn">学费迎来"涨价潮"</a>
                        </li>
                        <li class="li_6 li_color_0">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">女举小将蒋惠花夺魁</a>
                            <a class="detail" href="http://www.itdriver.cn">女举小将蒋惠花夺魁</a>
                        </li>
                        <li class="li_7 li_color_1">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">童名谦获刑五年</a>
                            <a class="detail" href="http://www.itdriver.cn">童名谦获刑五年</a>
                        </li>
                        <li class="li_8 li_color_0">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">青奥会</a>
                            <a class="detail" href="http://www.itdriver.cn">青奥会</a>
                        </li>
                        <li class="li_9 li_color_1">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">白卷英雄成4亿富豪</a>
                            <a class="detail" href="http://www.itdriver.cn">白卷英雄成4亿富豪</a>
                        </li>
                        <li class="li_10 li_color_0">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">被俘虏女子拒做性奴</a>
                            <a class="detail" href="http://www.itdriver.cn">被俘虏女子拒做性奴</a>
                        </li>
                        <li class="li_11 li_color_1">
                            <a class="hotwords_li_a" href="http://www.itdriver.cn">女子把狗毛当零食</a>
                            <a class="detail" href="http://www.itdriver.cn">女子把狗毛当零食</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>
复制代码
大家从html中会发现,每个热搜词都出现两次,这是因为一个用作正常显示的,另一是用作当鼠标划过时,滑动上来的黑色区域。这里我暂且分别将它们样式定义为.hotwords_li_a和detail,同时我们的关键词用无序列表(ul)来显示。
 
 
 
页面元素都准备好之后,接着我们给页面添加样式,首先要做的是先清除掉无序列表(ul)的默认样式,同时设置外容器布局以方便演示。样式代码如下:
 
复制代码
*{ /*设置所有元素默认内外边距,同时设置默认字体大小*/
    margin:0;
    padding:0;
    font-size:14px;
}
 
.container{ /*设置外层容器布局,这里主要是为了方便演示*/
    margin:200px 200px auto;
}
/*清除ul默认显示样式*/
ul { list-style-type:none; }
 
a { /*去除超链接下划线*/
    text-decoration:none; 
}
 
 
 
外容器的基本布局以及所有元素的默认样式设置完成之后,现在我们就可以来实现新闻热搜词的区域样式了:
 
复制代码
.hotwords li{ 
    float:left; /*使热搜词都向左浮动*/
    position:relative; /*由于li里面有元素要执行动画效果,所以将li的position设置为相对定位*/
    width:68px; /*设置热搜词的基本宽高度*/
    height:68px;
    margin:0 2px 2px 0;
    overflow:hidden; /*设置当热搜词显示的内容超过区域大小时,隐藏超出的部分*/
    text-align:center; /*内部文字居中显示*/
}
 
.hotwords li.li_0,
.hotwords li.li_3,
.hotwords li.li_8,
.hotwords li.li_11 { /*大家访问百度新闻首页,定会发现,它的1,4,9和12这几个快的宽度是其他的两倍,所以这里单独设置*/
    width:138px;
}
 
.hotwords li a{ /*将所有a元素都设置为块元素block,这样就可以调整它的高度*/
    display:block;
    text-decoration:none;
    padding:2px;
    height:64px;
    color:white;
}
 
.hotwords li.li_0 a,
.hotwords li.li_3 a,
.hotwords li.li_8 a,
.hotwords li.li_11 a { /*对于1,4,9和12这几个元素它的文字是垂直方向上居中显示的*/
    width:135px;
    line-height:64px;
}
 
.hotwords li.li_color_0{
    background:#0DA4D6;
}
.hotwords li.li_color_1{
    background:#35C4EF;
}
 
 
 
 
大家可以发现,我在最开始时演示的样式,新闻热搜词这个title信息为淡蓝色的,同时热搜词区域是显示两行的,现在我们来添加以下设置显示热搜词区域的样式:
 
复制代码
.hotwords{ /*设置新闻热搜词区域的大小*/
    width:568px;
}
 
.keywords_title{ /*设置热搜词区域字体样式以及它距离底部外边距的距离*/
    font-size:1.5em;
    margin-bottom:10px;
}
.keywords_title,.keywords_title a{ /*设置热搜词title以及热搜词link的默认颜色*/
    color:#3399CC;
}
 
 
 
 
当我们鼠标划过这些热搜词时,没有任何变化。好,接着我们给页面中的类型为detail的元素应用样式:
 
复制代码
.hotwords .detail{ 
    position:absolute;/*设置detail为绝对定位,由于li设置了relative,所以detail是相对于li元素的绝对定位*/
    background:rgba(0,0,0,0.8); /*设置detail区域的背景色*/
    left:0; /*设置detail相对li的偏移距离*/
    top:68px;
    -webkit-transition:top 0.2s; /*当detail类型的元素top属性发生变化时,执行过度动画,过度时间为0.2s*/
    -moz-transition:top 0.2s;
    -o-transition:top 0.2s;
    transition:top 0.2s;
}
 
.hotwords li:hover .detail{ /*当鼠标划过li时,设置detail类型元素的样式*/
    top:0px;
}
复制代码
在上面这段代码中,我们主要使用了两个关键属性,position:absolute和transition,如果大家对这两个不是太了解的,可以参考我以前写的教程《3实战开发:手把手教你照片墙实战开发》和《CSS3基本属性之Transition详解》。经过这两个教程的学习,相信你对这些知识点都会了如指掌了。
Tag:
网友评论

<