详解css3 Transition属性(平滑过渡菜单栏案例)


Posted in HTML / CSS onSeptember 05, 2017

CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and transition-delay。

语法

transition: property duration timing-function delay;

属性:

描述
transition-property 指定CSS属性的name,transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

下面给出一个案例

先看效果图:

详解css3 Transition属性(平滑过渡菜单栏案例)

原理图解:

详解css3 Transition属性(平滑过渡菜单栏案例)

当鼠标移入菜单列表上,添加一个hover样式。也就是让div.wrap 的top值设置为负值。然后利用transition属性使其平滑过渡。

完整demo

<!--html-->

<style>
 .menu{
        margin: 100px auto;
    }
    .menu ul li{
        float:left;
        width: 50px;
        height: 25px;
        background-color: #2aabd2;
        margin-right: 5px;
        line-height: 25px;
        position: relative;
        overflow: hidden;
    }
    .menu ul li a{
        display: block;
        height:25px;
        width: 50px;
        text-align: center;
        line-height: 25px;
        color: white;
    }
    .menu ul li .awrap{
        position: absolute;
        top:0;
        left: 0;
    }
    .menu ul li .awrap:hover{
        transition: all .3s ease-in;
        top:-25px;
    }
</style>
<div class="menu clearfix">
    <ul>
        <li>
            <div class="awrap">
                <a href=""><i class="fa fa-cog"></i></a>
                <a href="">菜单</a>
            </div>
        </li>
        <li>
            <div class="awrap">
                <a href=""><i class="fa fa-star-o"></i></a>
                <a href="">菜单</a>
            </div>
        </li>
        <li>
            <div class="awrap">
                <a href=""><i class="fa fa-user"></i></a>
                <a href="">菜单</a>
            </div>
        </li>
        <li>
            <div class="awrap">
                <a href=""><i class="fa fa-search"></i></a>
                <a href="">菜单</a>
            </div>
        </li>
        <li>
            <div class="awrap">
                <a href=""><i class="fa fa-adn"></i></a>
                <a href="">菜单</a>
            </div>
        </li>
    </ul>
</div>

注释:其中图标使用字体图标Font Awesome,需要了解的可以搜一下Font Awesome

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 #HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 #HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 #HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 #HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 #HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 #HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 #HTML / CSS
You might like
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
python根据距离和时长计算配速示例
2014/02/16 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python使用selenium实现批量文件下载
2019/03/11 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
python多进程并发demo实例解析
2019/12/13 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
个人总结与自我评价
2014/09/18 职场文书
校园安全教育心得体会
2016/01/15 职场文书
68句权威创业名言
2019/08/26 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers