博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3transition实现的简单动画菜单
阅读量:5797 次
发布时间:2019-06-18

本文共 590 字,大约阅读时间需要 1 分钟。

transition是css3中新添加的特性,在W3C标准中是这样描述 的:“css的transition允许css的属性值在一定的时间内从 一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值。”有了transition一切动画都变得如此简单。

在今天的小贴士,我们将向您展示如何让你的菜单添加一个整洁的悬浮效果。

主要就是设置图片的属性left 从0过度到300,透明度从0变到1:

.mh-menu li img{      position: absolute;      z-index: 1;      left: 0px;      top: 0px;      opacity: 0;      transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;  }  .mh-menu li:hover img{      left: 300px;      opacity: 1;  }

demo仔细看了一下,没有特别复杂,主要就是先把各个元素定位好,然后再设置透明度和动画的方向,关键是理解transition的属性

转载于:https://www.cnblogs.com/zhaolizhe/p/6936560.html

你可能感兴趣的文章
锐捷交换机密码恢复(1)
查看>>
Kali linux virtualbox rc=1908 错误解决办法
查看>>
Erlang学习总结之Erlang语法中的逗号(,)、分号(;),句号(.)的正确用法...
查看>>
linux软件包管理之三(源代码安装)
查看>>
数据库三范式是什么?
查看>>
[转载]设置Ubuntu自动连接无线,无须再输入密钥环和无线密码
查看>>
SQL Server 2014 许可证(三)各版本的许可证
查看>>
九叔Xen App测试报告
查看>>
Apache配置
查看>>
Ext gridPanel 单元格数据的渲染
查看>>
Android SDK 的下载代理
查看>>
Method Swizzling对Method的要求
查看>>
佛祖保佑,永不宕机
查看>>
四、配置开机自动启动Nginx + PHP【LNMP安装 】
查看>>
LNMP一键安装
查看>>
SQL Server数据库概述
查看>>
Linux 目录结构及内容详解
查看>>
startx命令--Linux命令应用大词典729个命令解读
查看>>
华为3026c交换机配置tftp备份命令
查看>>
Oracle命令导入dmp文件
查看>>