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

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

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

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

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

首先，我们先准备好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>

为了使页面呈现一个好的布局，我设置外面边框以及固定了热门网址的宽度，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;
}

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

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

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

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

此时的效果如下：

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

@-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>标签添加样式代码：

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

好了，现在我们来看看此时的页面效果：

好了，至此今天的实战代码已经开发完了。如果你想使用不用的颜色，只需要修改<i></i>标签里的背景色，不信就去试试吧！

往期精彩实战开发案例一览(已被广为转载，下面只列出部分)：

　　1. 《CSS3实战开发：手把手教大家搜索表单发光特效实战开发》

　　2. 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》

　　3. 《CSS3线性渐变技术详解及超炫按钮实战开发》

　　4. 《CSS3 2D转换之translate技术详解 及 网页导航实战开发》

　　5. 《CSS3实战开发:手把手教你照片墙实战开发》

　　6. 《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》

　　7. 《CSS3实战开发:仿天猫首页图片展示动画特效实战开发》

　　8. 《CSS3实战开发:手把手教大家折角效果实战开发》

欢迎大家加入互联网技术交流QQ群：62329335 

个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证

CSS3实战开发:手把手教你鼠标滑动特效开发,布布扣,bubuko.com

时间： 2024-10-04 05:50:42

CSS3实战开发:手把手教你鼠标滑动特效开发的相关文章

CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效

各位网友大家好,我是陌上花会开,当然大家也可以叫我陌陌.今天这篇文章,我将手把手带领大家实战开发一个鼠标划过图片时的动画特效.在这里我不会给大家提供案例的源码下载,但是本人可以保证,只要大家跟着我的思路,一步步将代码复制到本地,一定会得到同样的运行效果.希望大家明白我的用心.好了不废话,直接进入今天的主题吧. 在今天这个案例里,我准备3个素材,一张背景图,两张风景图片.这个大家可以到网上自行下载. 在写代码之前,我先给大家展示一下,动画特效的效果图. 鼠标花过前: 当鼠标划过图片时,图片将逐渐变

CSS3实战开发:手把手教你照片墙实战开发

在<CSS3 2D转换技术之translate实战开发>文章中,我给大家列出了CSS3中的2D转换方法: 1.    translate() 2.    rotate() 3.    scale() 4.    skew() 5.    matrix() 同时对第一个方法 translate()做了非常详尽的介绍,并带领大家实战开发了一个导航条.如果你对translate不了解或不是太熟悉,请阅读我的博文 <CSS3 2D转换技术之translate实战开发> . 在讲解知识点之前

CSS3实战开发:手把手教大家折角效果实战开发

各位网友,大家好,我是陌上花会开,今天这篇文章,我将手把手教大家如何开发一套纯CSS的折角效果.一如往常,我不提供代码下载,但是我可以保证,只要将教程中的代码复制到本地,绝对百分百获得与我演示的效果一样,希望各位明白我的用意. 好了,直接开始今天的教程吧.首先,我先给大家演示一下今天实战案例的效果: 有人会说这是什么?这就是我们今天的实战开发,我将带领大家开发上图中的右上角折叠效果. 在我讲解完之前,有些人可能觉得很难,不可思议.我想跟你们说:真的so easy.下面就请跟着我的分解步骤一步步学

[swift实战入门]手把手教你编写2048(三)

上篇地址:swift实战入门之手把手教你编写2048(二) github地址:https://github.com/scarlettbai/2048.git. 今天给大家带来2048最后一篇,之前已经实现了向游戏区域中随机插入数字块,接下来要做的,就是当我们滑动屏幕时移动及合并数字块以及插入一个新的数字块.本篇的难点就是移动时的算法问题,首先来给大家讲一下算法. 2048的算法实现其实很简单,假如我们当前数字格的格式如下: | |4| | | | | |4| | |2| |2|2| |2| |

[swift实战入门]手把手教你编写2048(二)

上篇地址:swift实战入门之手把手教你编写2048(一) github地址:https://github.com/scarlettbai/2048.git. 上篇文章已经中已经把2048的游戏区块画好了,这篇来加入计分板以及往游戏面板中插入数字块 计分板同样作为一个view,我们新建一个ScoreView.swift文件,代码如下: import UIKit //这里协议的作用是方便别的类中调用计分板的scoreChanged方法 protocol ScoreProtocol{ func sc

手把手教你ARC——iOS/Mac开发ARC入门和使用

转载自:http://www.onevcat.com/2012/06/arc-hand-by-hand/ 本文部分实例取自iOS 5 Toturail一书中关于ARC的教程和公开内容,仅用于技术交流和讨论.请不要将本文的部分或全部内容用于商用,谢谢合作. 欢迎转载本文,但是转载请注明本文出处:http://www.onevcat.com/2012/06/arc-hand-by-hand/ 本文适合人群:对iOS开发有一定基础,熟悉iOS开发中内存管理的Reference Counting机制,对

一起学Google Daydream VR开发，快速入门开发基础教程一：Android端开发环境配置一

原文因涉及翻墙信息,被强制删除,此文为补发! 准备工作 进入Google Daydream开发者官网,开启准备工作,官网地址:https://vr.google.com/daydream/developers/ -------------------------------------------------------------------------------------------------------------------- Google Daydream开发者网址: https

[swift实战入门]手把手教你编写2048(一)

苹果设备越来越普及,拿着个手机就想捣鼓点啥,于是乎就有了这个系列,会一步一步教大家学习swift编程,学会自己做一个自己的app,github地址:https://github.com/scarlettbai/2048.git. 这篇文章需要大家了解一些swift基本语法,这里注重实践,就不讲太多基本语法了,不懂的大家可以Google一下,swift开发环境也很简单,直接在mac上安装一个XCode即可,首先我们来看下最终我们要实现的效果: 当然你也可以将其中的数字换成文字给你女票安手机上,还可

手把手教hadoop2.5.1+eclipse开发调试环境搭建(2)

前一篇博文我们搭建了好了运行环境,这篇小文我们开始搭建开发调试环境.这才是真正的精华,是无数血泪铸就的! 4.eclipse,又见eclipse 这个我想只要是做java的没有不熟悉,因此我就不再多说了,一切向http://www.eclipse.org索取. 注意,这里的eclipse环境安装在虚拟机中哦,别装错地方了! 5.安装maven环境 去maven.apache.org上下载maven3,解压到/home(因为/home一般是数据盘,装在这里不占系统盘的空间).配置~/.bash_p