css3 移入移出动画
css:
/*css3 鼠标移入移出动画 底部出现阴影层文字叙述*/
*{margin:;padding:}
.div1{width:300px;height: 300px;text-align: center; background: pink;position: relative;float: left;overflow: hidden;} /*设置父元素相对定位,超出父元素溢出部分隐藏*/
.div2{width:300px;height: 300px;opacity:; position: absolute; left:; top:;transition: 0.5s;-webkit-transition: 0.5s;background-color: rgba(255,255,255,0.8);}/*子元素设置绝对定位(绝对定位于父元素)设置初始left,top,然后设置动画效果(运行时间),其它样式自定义设置*/
.div2{opacity:;bottom: -100%;transition: 0.5s;-webkit-transition: 0.5s;top: auto}/*子元素设置在底部-100%的位置,高度自动*/
.div1:hover .div2{bottom: -160px}/*当鼠标移动在父元素的位置上,子元素从底部-100%的位置变动到负160的位置;设置变动到底部为0的位置,子元素将覆盖父元素*/
.text{font-size: 20px;padding-top: 100px;transition: 0.5s;-webkit-transition: 0.5s;position: absolute; left: 30%; top:;}/*同上*/
.text{bottom: 130px;top: auto}/*同上*/
.div1:hover .text{bottom: 180px;}/*同上*/
html:
<div class="div1"> //父元素
<div class="text">申明注释</div>
<div class="div2"> //子元素
内框1内框1内框1内框1内框1
</div>
</div>
效果如下:
css3 移入移出动画的更多相关文章
- CSS3鼠标移入移出图片生成随机动画
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...
- jQuery事件-div的显示隐藏及鼠标的移入移出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jquery事件一 ---鼠标移入移出
比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- CSS3的自定义动画帧
CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...
- CSS3中的动画功能(一)
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
随机推荐
- c#解析分析SQL语句
最近总结了c#一般的功能,然后自己在博文中写了很多东西.主要是在用途上面.能够解决一些问题.现在分各个组件和方向写完了.主要的内容写了demo,也写了自己的项目组件和模型. 最后一个SQL分析.其实在 ...
- NEC 框架规范 template media
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>NEC ...
- Linux上往mysql中导入SQL文件
1.首先连上你的服务器 2.进入你安装好的数据库 mysql -uroot -p****, 3.执行命令 source /xxx/xxx.sql 后面是文件的路径 4.如果你要是在本地有数据库管理 ...
- gcc 手动安装
由于公司内部服务器没有联通外网,只能苦逼的手动安装gcc(自带的版本太老) rpm -ivh ppl-0.10.2-11.el6.x86_64.rpm rpm -ivh cloog-ppl-0.15. ...
- djangorestframework怎么这么好用!
一年前就已经用过restframework, 当时觉得这个只是给web框架打辅助的, 他能实现的我也都实现(可能没有那么好用, 嘿嘿) 但是我有一种东西叫做效率, 时间就是金钱, 别人造好的就直接用就 ...
- Yaf学习(三)----Yaf类库Library和Model的命名规则
1.Yaf的library和model的文件命名规则和调用 1.1在项目中,往往需要封装一些,如redis,不同的产品需要用不同的库等等等,这就涉及到封装 1.在 Yaf 中,我们可以写一个单例模式的 ...
- 列表排序之NB三人组附加一个希尔排序
NB三人组之 快速排序 def partition(li, left, right): tmp = li[left] while left < right: while left < ri ...
- Python爬虫之JS异步加载
一.判断异步加载方式(常用的JS库) 1. jQuery(70%) # 搜索 jquery 茅塞顿开 <script src="http://ajax.googleapis.com/a ...
- ajax同步和异步的切换
ajax为网页提供了非常不错的异步机制,但是有时候两个ajax放在一起,希望第一个完成后再继续第二个ajax的执行.这时候可以将第一个ajax代码带上同步参数即可,如下: $.ajax({ async ...
- 转载:BUG定位
1.web前端 Web前端就是通常说的网页.互联网公司的前端一般包含如下内容:JavaScript.ActionScript.CSS.HTML(..ML).Flash.交互式设计.视觉设计 web前端 ...