菜单

CSS3实战开发:手把手教你鼠标滑动特效开发

2019年7月7日 - 计算机教程

各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的”新闻热搜词”特效。在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程。今天讲这个案例,也是希望告诉大家,在开发一个特效的时候,请不要将问题复杂化。可能有些人一开始真的不知道从哪下手,当你看完本次教程,你定会觉得,原来一切都这么简单。

各位网友,如果你已经看过我的CSS3实战开发系列教程,我相信你对CSS3已经有了非常全面深刻的了解。有些人可能CSS3语法掌握了不少,但是真正实际用起来还有点生疏,甚至无从下手。请别担心,我会不断更新一系列实战开发案例,我会为大家分步骤剖析特效开发过程。

可能有些人还不知道这个特效,啥也不说了,直接上效果图:

今天我将手把手带领大家开发一个鼠标滑动的特效案例,废话不多说,直接上效果动画:

图片 1

图片 2

从上面的特效中,大家不难发现,当鼠标划过热搜词时,会有一个半透明的黑色背景滑上来,而且这个黑色区域中也是有热搜词的。

你有没有觉得上面的这个特效很棒呢!

大概知道这些细节后,现在我就分步骤带领大家开发这个特效。

好,现在咱们就开始分步骤实战开发这个动画特效吧:

根据上面所说的关键细节,编写html代码如下:

首先,我们先准备好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>HOT WORDS                  </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>
<!DOCTYPE html>  <html>      <head>          <meta charset="utf-8">          <link rel="stylesheet" href="styles.css">          <title>CSS3实战开发:鼠标滑动特效实战开发</title>      </head>      <body>            <div class="container">          <div class="hot_navs">              <div class="hot_title">热门网址</div>              <div class="hot_area">                  <a class="hot_items" href="http://www.itdriver.cn" title="Css3教程,Html5教程,互联网开发技术">                      <i></i>                      <img src="imgs/101.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                      <i></i>                      <img src="imgs/102.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                          <i></i>                      <img src="imgs/103.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                          <i></i>                      <img src="imgs/104.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                          <i></i>                      <img src="imgs/105.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                      <i></i>                          <img src="imgs/106.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                          <i></i>                      <img src="imgs/107.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                      <i></i>                          <img src="imgs/108.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                      <i></i>                          <img src="imgs/109.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                          <i></i>                      <img src="imgs/110.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                          <i></i>                      <img src="imgs/111.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                      <i></i>                          <img src="imgs/112.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                      <i></i>                          <img src="imgs/113.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                      <i></i>                          <img src="imgs/114.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                          <i></i>                      <img src="imgs/115.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                      <i></i>                          <img src="imgs/116.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                      <i></i>                          <img src="imgs/117.png"  />                  </a>                  <a class="hot_items" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网开发技术">                      <i></i>                          <img src="imgs/118.png"  />                  </a>              </div>          </div>      </div>            </body>  </html>

大家从html源码中会发现,每个热搜词都出现两次,这是因为一个用作正常显示的,另一是用作当鼠标划过时,滑动上来的黑色区域。这里我暂且分别将它们样式定义为.hotwords_li_a和detail,同时我们的关键词用无序列表(ul)来显示。

为了使页面呈现一个好的布局,我设置外面边框以及固定了热门网址的宽度,CSS样式代码如下:

页面代码编写完后,我们先运行一下,查看一下现在的效果:

*{      margin:0;      padding:0;  }    .container{      margin:200px auto;      width:1024px;  }    .hot_navs{      border:1px solid #CCCCCC;      width:800px;  }    .hot_navs .hot_title{      margin:1em .5em;      border-bottom:1px dotted #CCCCCC;  }

图片 3

此时我们看一下页面效果:

页面元素都准备好之后,接着我们给页面添加样式,首先要做的是先清除掉无序列表(ul)的默认样式,同时设置外容器布局以方便演示。样式代码如下:

图片 4

*{ /*设置所有元素默认内外边距,同时设置默认字体大小*/      margin:0;      padding:0;      font-size:14px;  }    .container{ /*设置外层容器布局,这里主要是为了方便演示*/      margin:200px 200px auto;  }  /*清除ul默认显示样式*/  ul { list-style-type:none; }    a { /*去除超链接下划线*/      text-decoration:none;   }

大家会发现,此时页面中有一些黑色的下划线,这个是由a标签引起的,所以我们现在给a标签设置样式:

运行页面,查看此时的页面效果:

.hot_navs a{      text-decoration:none;      display:inline-block;      height:70px;      line-height:70px;      position:relative;  }

图片 5

由于我们有一个动画效果背景(开头动画的橙色效果),所以我们将a标签的位置设置为position:relative.

外容器的基本布局以及所有元素的默认样式设置完成之后,现在我们就可以来实现新闻热搜词的区域样式了:

此时的效果如下:

.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;  }

图片 6

 

我们想实现一个,当鼠标划过时,动画由0.8倍逐渐放大到1倍,且动画不透明度从0到0.6,我们先定义动画帧:

上面这段样式代码主要是设置热搜词区域li的样式,如果对代码不是太了解,可以参考我的样式注释。

@-webkit-keyframes hotnavIn {      0% {      -webkit-transform:scale(0.8);      -ms-transform:scale(0.8);      transform:scale(0.8);      opacity:0;  }  100% {      -webkit-transform:scale(1);      -ms-transform:scale(1);      transform:scale(1);      opacity:0.6;  }  }  @-moz-keyframes hotnavIn {      0% {      -webkit-transform:scale(0.8);      -ms-transform:scale(0.8);      transform:scale(0.8);      opacity:0;  }  100% {      -webkit-transform:scale(1);      -ms-transform:scale(1);      transform:scale(1);      opacity:0.6;  }  }  @-ms-keyframes hotnavIn {      0% {      -webkit-transform:scale(0.8);      -ms-transform:scale(0.8);      transform:scale(0.8);      opacity:0;  }  100% {      -webkit-transform:scale(1);      -ms-transform:scale(1);      transform:scale(1);      opacity:0.6;  }  }  @keyframes hotnavIn {      0% {      -webkit-transform:scale(0.8);      -ms-transform:scale(0.8);      transform:scale(0.8);      opacity:0;  }  100% {      -webkit-transform:scale(1);      -ms-transform:scale(1);      transform:scale(1);      opacity:0.6;  }  }    @-webkit-keyframes hotnavOut {      0% {      -webkit-transform:scale(1);      -ms-transform:scale(1);      transform:scale(1);      opacity:0.6;  }  100% {      -webkit-transform:scale(0.8);      -ms-transform:scale(0.8);      transform:scale(0.8);      opacity:0  }  }  @-moz-keyframes hotnavOut {      0% {      -webkit-transform:scale(1);      -ms-transform:scale(1);      transform:scale(1);      opacity:0.6;  }  100% {      -webkit-transform:scale(0.8);      -ms-transform:scale(0.8);      transform:scale(0.8);      opacity:0;  }  }  @-ms-keyframes hotnavOut {  0% {      -webkit-transform:scale(1);      -ms-transform:scale(1);      transform:scale(1);      opacity:0.6;  }  100% {      -webkit-transform:scale(0.8);      -ms-transform:scale(0.8);      transform:scale(0.8);      opacity:0;  }  }  @keyframes hotnavOut {      0% {      -webkit-transform:scale(1);      -ms-transform:scale(1);      transform:scale(1);      opacity:0.6;  }  100% {      -webkit-transform:scale(0.8);      -ms-transform:scale(0.8);      transform:scale(0.8);      opacity:0;  }}

此时效果如下:

动画帧定义好之后,我们就可以给页面添加动画效果了,如果你够细心,就会发现html页面中每个a标签下都有一个<i></i>标签。不错,它是实现我们今天动画效果的主角。现在我们给<i></i>标签添加样式代码:

图片 7

.hot_navs .hot_items i{      width:100%;      height:100%;      background-color:#FFB200;            position:absolute;            opacity:0;      -webkit-animation:hotnavOut 0.4s ease;      -moz-animation:hotnavOut 0.4s ease;      -ms-animation:hotnavOut 0.4s ease;      animation:hotnavOut 0.4s ease;  }  .hot_navs .hot_items:hover i{      opacity:0.6;      -webkit-animation:hotnavIn 0.2s ease;      -moz-animation:hotnavIn 0.2s ease;      -ms-animation:hotnavIn 0.2s ease;      animation:hotnavIn 0.2s ease;  }

大家可以发现,我在最开始时演示的样式,新闻热搜词这个title信息为淡蓝色的,同时热搜词区域是显示两行的,现在我们来添加以下设置显示热搜词区域的样式:

好了,现在我们来看看此时的页面效果:

.hotwords{ /*设置新闻热搜词区域的大小*/      width:568px;  }    .keywords_title{ /*设置热搜词区域字体样式以及它距离底部外边距的距离*/      font-size:1.5em;      margin-bottom:10px;  }  .keywords_title,.keywords_title a{ /*设置热搜词title以及热搜词link的默认颜色*/      color:#3399CC;  }

图片 8

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图