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

最新推荐文章于 2021-06-03 06:14:51 发布
最新推荐文章于 2021-06-03 06:14:51 发布 · 350 阅读 · 0
文章标签：

#css #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实战开发:手把手教大家折角效果实战开发》

 

个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证
小程序H5开发：如何利用CSS3动画
小程序开发
07-06 662
小程序H5页面（即小程序中的WebView页面）是连接用户与功能的“门面”。用户滑动、点击时的反馈是否流畅，直接影响使用体验。CSS3动画作为前端开发的“轻量级特效工具”，无需复杂JS代码，就能实现平移、旋转、淡入淡出等效果，且性能更优（浏览器底层优化）。本文将聚焦“如何在小程序H5中高效使用CSS3动画”，覆盖基础概念、代码实战、性能优化等核心内容。本文从“生活中的动画”引入，拆解CSS3动画三大核心（过渡、变换、关键帧），用代码示例演示如何在小程序中实现，最后总结实战技巧与未来趋势。CSS3动画。
java高并发框架 SSM框架 详细整合教程(Spring+SpringMVC+MyBatis)
powiosmi09的博客
03-20 7411
系统框架为：springmvc + mybaits 3.2 有 maven 版本和 非maven 版本 jdk 1.6 1.7 1.8  tomcat 6 7 8 数据库：oracle 版本 和 msyql 版本 ( spring3.0 和4.02  mybaits 3.2)     开发工具：myeclipse  eclipse 均可 赠送 同UI      springmvc +
15种漂亮的纯CSS3滑动按钮特效
06-29
15种漂亮的纯CSS3滑动按钮特效
鼠标滑动特效
qq_35935600的博客
05-14 811
1. 鼠标带动线条 效果: 代码 !function () { function n(n, e, t) return n.getAttribute(e) || t } function e(n) { return document.getElementsByTagName(n) } function t() { var t = e("script"), o = t.length, i = t[o - 1]
CSS3鼠标悬停按钮滑动特效
07-22
CSS3鼠标悬停按钮滑动特效CSS3鼠标悬停按钮滑动特效CSS3鼠标悬停按钮滑动特效
鼠标滑动效果
lxw19930327的博客
03-07 681
鼠标滑动效果 待审核上报任务待审核上报任务待审核上报任务待审核(上报任务)待审核上报任务待审核上报任务2017.02.24             待审核(上报任务)2017.02.24             待签收2017.02.24             待审核(审核情况)2017.02.24             待审核(审核情况)2017.02.24          
css3的鼠标悬停按钮滑动切换动画特效.zip
07-11
这是一款多组不同效果的css3鼠标悬停按钮滑动切换动画特效，非常漂亮的css3 transition按钮动画特效下载。
jQuery实战源码解析：实例演示与深入教程
标题和描述中提到的“jQuery实战源码”以及“手把手教你”，表明该文档或资源是一个关于使用jQuery进行实际开发的详细教程或示例代码集合。jQuery作为一个强大的JavaScript库，广泛用于简化HTML文档遍历、事件处理、...
maven大型互联网企业架构 SpringMVC Mybatis Shiro Bootstrap
ddkk8898的博客
04-15 6095
获取【下载地址】   QQ: 313596790   【免费支持更新】 三大数据库 mysql  oracle  sqlsever   更专业、更强悍、适合不同用户群体 【新录针对本系统的视频教程，手把手教开发一个模块，快速掌握本系统】 A 集成代码生成器(开发利器)+快速构建表单;            QQ：313596790 freemaker模版技术 ，0个代码不用写，生成完
bootstrap ace admin 整合java HTML5 全新高大尚web后台框架
wernisng090的博客
03-12 4165
获取【下载地址】   QQ: 313596790   【免费支持更新】 支持三大数据库 mysql  oracle  sqlsever   更专业、更强悍、适合不同用户群体 【新录针对本系统的视频教程，手把手教开发一个模块，快速掌握本系统】 A 代码生成器(开发利器);       增删改查的处理类，service层，mybatis的xml，SQL( mysql   和oracle)脚
HTML鼠标滑过特效
06-14
HTml5开发的一款鼠标滑动特效的网页 对WEb开发的前端设计很哟用处
CSS3鼠标滚动控制页面滚动特效
06-24
CSS3鼠标滚动控制页面滚动特效是一款基于CSS3属性制作的鼠标滚动控制页面单屏滚动效果。
css3实现导航滑动效果
05-24
使用css3打造鼠标经过导航炫酷动画
css3实现唱片滑动特效.zip
07-03
本特效采用html css3实现类似唱片专辑封面的滑动效果，鼠标经过时唱片图案会自动弹出。 css3实现唱片滑动特效演示图：                                                                                         点击查看演示
鼠标滑动Tab选项卡切换特效
10-16
鼠标滑动Tab选项卡切换特效，两种效果可以选择。一种有动画延迟，一种直接切换。
鼠标滚动插件smoovejs和wowjs
weixin_34066347的博客
01-11 564
前言鼠标滚动特效很常见，当鼠标滚动到特定的位置时才会触发相应的CSS特效，这里简单聊两款鼠标滚动特效插件smoovejs和wowjs。smoovejssmoovejs基于jQuery，所以在引入smoovejs之前确保先引入jQuery，相关版本的smoovejs的cdn可以点击这里或者下面的链接查看。http://www.bootcdn.cn/jquery-smoove/激...
CSS3元素滑动等效果
酒肉猿
06-23 2898
css3 animation
html纯css页面滑动效果,纯css3滑动按钮动画效果
weixin_30302513的博客
06-03 937
android系统的滑动按钮相信大家都使用过。这款插件就是使用纯css3制作出类似android系统的滑动按钮效果。HTMLhtml代码十分简单。使用一个大的div作为包裹容器，给它一个class toggle用于控制样式，一个Id switch 用于使用js来控制动画。OFFONCSShtml{height: 95%;}body{height: 95%;background-color: #14...
php页面滑动效果,css3怎么实现页面滚动动画特效？
weixin_42443533的博客
03-12 489
本篇文章主要介绍css3实现页面滚动动画特效。那么我们首页要认识一下，什么是AOS？AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和WOWJS 一样，虽然他们的效果类似，但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值