详解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实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 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 Socket配置以及实例的详细介绍
2013/06/13 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP运行模式汇总
2016/11/06 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python实现图片上添加图片
2019/11/26 Python
Python 音频生成器的实现示例
2019/12/24 Python
浅析matlab中imadjust函数
2020/02/27 Python
Etam德国:内衣精品店
2019/08/25 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
继电保护工岗位职责
2014/01/05 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
股东授权委托书
2014/10/15 职场文书
2014年财政所工作总结
2014/11/22 职场文书
学雷锋活动简报
2015/07/20 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL