详解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 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 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面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
详解python 爬取12306验证码
2019/05/10 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Python 解析xml文件的示例
2020/09/29 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
pandas按条件筛选数据的实现
2021/02/20 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
Why we need EJB
2016/10/20 面试题
审计工作个人的自我评价
2013/12/25 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python
python装饰器代码解析
2022/03/23 Python