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>

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>

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>

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;子类设置对应大小的字体即可消除间距问题。