详解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实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 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
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php 高效率写法 推荐
2010/02/21 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
基于Python实现文件大小输出
2016/01/11 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
Python读取实时数据流示例
2019/12/02 Python
python logging模块的使用详解
2020/10/23 Python
Python实现一个论文下载器的过程
2021/01/18 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
50岁生日感言
2014/01/23 职场文书
材料员岗位职责
2014/03/13 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
拓展训练激励口号
2014/06/17 职场文书