css3过渡动画（一）

你好，欢迎打开我的博客，阿雨每天与你分享许多有趣新鲜的knowledge！

最近给大家带来的是WEB前端中重要的一部分，一些有关CSS的基础知识，俗话说的好“万丈高楼平地起”，要想做一个优秀的前端人员，必须打好基础哦。

废话不多说，上干货

第一步，设计菜单结构。在每个菜单项

中包含两个子标签：

和

,设计菜单仅显示一个子标签，当光标经过时，翻转显示另一个子标签

第2步，设计菜单项样式，固定大小，相对定位，禁止内容溢出，向左浮动实现并列显示

第3步，设计每个菜单项中子标签

和

的样式，定义他们与菜单项相同大小，这样就只能显示一个子标签：为了方便控制，定义他们为绝对定位，包含文本水平居中和垂直居中，最后定义过渡动画时间为0.3秒，加速到减速显示。

第4步，设计过渡动画样式，当光标经过时，改变变位属性的值，实现菜单项动态翻转效果

二，激活动画
效果如下：

第一步，设计按钮的基本样式

第二步，设计光标经过时的动态样式

第三步，设计激活时，按钮下沉动态样式

好了，今天的干货分享就结束了，如果感觉阿雨的分享对你有帮助的，就关注我吧！！！
创作不易，感谢有你，一路同行，加油！