详解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 弹性布局快速入门
Jun 06 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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
德生S2000电路分析
2021/03/02 无线电
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP简洁函数小结
2011/08/12 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
UNIX文件名称有什么规定
2013/03/25 面试题
业务代表的岗位职责
2013/11/16 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS