html经过菜单变色移开恢复,h5学习笔记：transition菜单过渡变色

今天客户提出一些样式方面的要求，在之前css动画一直偶尔用。在互动媒体的行业里面采用了大量的使用。趁着今年最后一天记录一下今天用的一些笔记。

1.创建菜单

在日常中，编写一个横向菜单是很容易的事情。下面，我们看一下效果。

这个代码是一组采用ul 和 li 组合的常规菜单。我们看一下如下的代码。在这个菜单里面，我们仅仅把li 的display 设置display: inline-block; 即可产生横向的菜单了。

title>

head>

display: inline-block;

background:gray;

color: white;

padding: 10px 20px;

}style>

菜单一li>菜单二li>菜单三li>菜单四li>

ul>

div>

body>

html>

2.菜单变色

客户的一个需求是，希望产生变色。对此css的hover能够提供这个日常操作变色的操作。我们稍微改变一下菜单颜色，当鼠标经过的时候让它产生变色。

看如下的代码：将li 加上hover的伪类处理。即可实现变色变色的效果。

title>

head>

display: inline-block;

background:gray;

color: white;

padding: 10px 20px;

}

.ui-menu ul li:hover{

background:deepskyblue;

}style>

菜单一li>菜单二li>菜单三li>菜单四li>

ul>

div>

body>

html>

3.添加过渡效果

看起来非常简单。不过客户的要求还不能满足。客户希望菜单能够在鼠标自然过渡产生一个视角。那么，css是否可以实现？答案是肯定的。css提供过渡动画效果，效果设置很方便。经过改造后。加上一行代码实现。

transition: background 0.8s ease-out;

.ui-menu ul li:hover{

background:deepskyblue;

transition: background 0.8s ease-out;//让菜单产生过渡效果

}

有了这个基础后。菜单过渡产生一个过渡效果。同样在离开的时候，客户又提出了一个要求，让菜单变色后，恢复原来的。但是需要一点过渡。

这个时候也要对标签加上过渡处理，就会产生变化了。

.ui-menu ul li{

display: inline-block;

background:gray;

color: white;

padding: 10px 20px;

transition: background 0.3s ease-out;//鼠标松开后自然地恢复

}

title>

head>

display: inline-block;

background:gray;

color: white;

padding: 10px 20px;

transition: background 0.3s ease-out;

}

.ui-menu ul li:hover{

background:deepskyblue;

transition: background 0.8s ease-out;

}style>

菜单一li>菜单二li>菜单三li>菜单四li>

ul>

div>

body>

html>

综述

整个菜单看起来很简单，结合hover 和transition 组合就可以满足到相应的过渡效果。transition 有兼容性的问题，在使用的时候加上兼容性处理。

transition: background 0.8s ease-out;

-moz-transition: background 0.8s ease-out;

-o-transition: background 0.8s ease-out;

-webkit-transition: background 0.8s ease-out;

其他问题：display: inline-block; 产生间距的问题，对父类设置font-size:0;子类设置对应大小的字体即可消除间距问题。

html经过菜单变色移开恢复,h5学习笔记：transition菜单过渡变色相关推荐

Swift网络开发之NSURLSession学习笔记
为什么80%的码农都做不了架构师?>>> Swift网络开发之NSURLSession学习笔记先上效果图: 功能: -单个任务下载 -暂停下载任务 -取消下载任 ...
中移物联网onenet入门学习笔记2：中移物联的通信格式
中移物联网onenet入门学习笔记2:中移物联的通信格式中移物联网硬件接入协议:LWM2M协议,EDP协议,MQTT协议,HTTP协议,TCP透传,MODBUS协议,JT/T808协议,RCMP协议 ...
计算机开始菜单打不开是什么原因,电脑开始菜单打不开怎么办_win7开始菜单点击无效解决方法...
2014-10-10 17:59:41 浏览量:130609 在默认状态下,开始按钮位于屏幕的左下方,开始按钮是一颗圆形Windows标志.在Windows10技术预览版中开始菜单以全新的面貌重新出现 ...
计算机开始菜单打不开是什么原因,win10开始菜单打不开怎么办啊
我们在电脑刚刚开机进入系统后,不知道大伙有没有遇到这样的情况,刚开机win10 开始菜单就出现打不开的现象,想必大伙遇到这样的情况都不知道如何解决吧,其实很好解决,下面就由小编带你解决win10开始菜 ...
Android学习笔记--Menu菜单的使用
实现选项菜单.上下文菜单,以及菜单内部的子菜单. 视图效果: MainActivity 选项菜单选项菜单的子菜单上下文菜单(按住按钮或者EditText弹出) 注意:上下文菜单如何弹出?在注册该菜 ...
cocos2dx学习笔记之菜单Menu和菜单项MenuItem
首先需要明确的是cocos2d-x 3.x版本不推荐使用菜单类Menu了,因为菜单的功能可以用Button,Sprite或者ImageView等经常使用的控件替代. 回想一下个人经历的实际项目,确实没 ...
鼠标移到某一行某一行变色鼠标移开恢复
这好像是周一还是周二的课堂作业吃完午饭在思考这个东西怎么做感觉超有感觉的虽然不是很炫酷,但是效果很漂亮 <div> javascript综合练习二</div><di ...
JS实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...
h5学习笔记下拉菜单
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 鼠标经过 ...
前端开发文档-学习笔记
规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档命名规范为了让大家书写可维护的代码,而不是一次性的代码让团队当中其他人看你的代码能一目了然甚至一段时间时候 ...

html经过菜单变色移开恢复,h5学习笔记：transition菜单过渡变色

html经过菜单变色移开恢复,h5学习笔记：transition菜单过渡变色相关推荐

最新文章

热门文章