h5学习笔记:transition菜单过渡变色

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

1.创建菜单

在日常中,编写一个横向菜单是很容易的事情。下面,我们看一下效果。
h5学习笔记:transition菜单过渡变色_第1张图片
这个代码是一组采用ul 和 li 组合的常规菜单。我们看一下如下的代码。在这个菜单里面,我们仅仅把li 的display 设置display: inline-block; 即可产生横向的菜单了。


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	
	<style>
		.ui-menu ul li{
			display: inline-block;
			background:gray;
			color: white;
			padding: 10px 20px;
		}

	style>
	
	<body>
	<div>
		<div class="ui-menu">
			<ul>
				<li>菜单一li>
				<li>菜单二li>
				<li>菜单三li>
				<li>菜单四li>
			ul>			
		div>		
	div>	
	body>
html>

2.菜单变色

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

h5学习笔记:transition菜单过渡变色_第2张图片
看如下的代码:将li 加上hover的伪类处理。即可实现变色变色的效果。


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	
	<style>
		.ui-menu ul li{
			display: inline-block;
			background:gray;
			color: white;
			padding: 10px 20px;
		}
		
		.ui-menu ul li:hover{
            background:deepskyblue;
         }		

	style>
	
	<body>
	<div>
		<div class="ui-menu">
			<ul>
				<li>菜单一li>
				<li>菜单二li>
				<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;//鼠标松开后自然地恢复
			
		}

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	
	<style>
		.ui-menu ul li{
			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>
	
	<body>
	<div>
		<div class="ui-menu">
			<ul>
				<li>菜单一li>
				<li>菜单二li>
				<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;子类设置对应大小的字体即可消除间距问题。

你可能感兴趣的:(h5学习笔记:transition菜单过渡变色)