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 移入移出动画的更多相关文章

  1. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  2. jQuery事件-div的显示隐藏及鼠标的移入移出

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. jquery事件一 ---鼠标移入移出

    比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...

  4. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  5. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  6. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

  7. CSS3中的动画功能(一)

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  8. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  9. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

随机推荐

  1. 并发编程之多线程基础-Thread和Runnable的区别及联系(二)

    上篇文章讲述了创建线程的常用方式 本篇主要分析一下Thread和Runnable两种方式创建线程的区别及联系 联系: ▶Thread类实现了Runable接口. ▶都需要重写里面Run方法. 区别: ...

  2. eclipse的中文插件链接及使用方法

    链接:http://www.eclipse.org/babel/downloads.php 帮助-->安装-->打开链接使用链接里面的语言包下载地址-->下载安装-->完成

  3. Vue--- 使用vuex使用流程 1.0

    Vuex 1.安装vuex npm install  -save vuex 2. 引入 创建store文件夹目录 创建 vuex     指挥公共目录    store['state','action ...

  4. Maven 运行启动时****找不到符号*com.xxx.user.java

    Maven 运行启动时****找不到符号*com.xxx.user.java maven项目更改后没有安装 (install) 重新安装解决问题!

  5. Linux 学习第一天

    一.开源许可: GNU GPL(GNU General Public License,GNU 通用公共许可证): 开源许可特点:1.使用自由 2.传播自由 3.修改自由 4.衍生品自由 二.源代码安装 ...

  6. docker API 配置与使用

    在网上看到一大堆乱乱七八招的博客,很多都不能用,我根据这些天踩的坑来总结一下吧 首先!怎么配置 docker API 两种方法 在/etc/sysconfig/docker文件里加一行OPTIONS= ...

  7. hdcms v5.7.0学习笔记

    hdcms v5.7.0学习笔记 https://note.youdao.com/ynoteshare1/index.html?id=c404d63ac910eb15a440452f73d6a6db& ...

  8. Elasticsearch 常用API

    1.   Elasticsearch 常用API 1.1.数据输入与输出 1.1.1.Elasticsearch 文档   #在 Elasticsearch 中,术语 文档 有着特定的含义.它是指最顶 ...

  9. Linux 内核之api_man 手册安装

    开发环境:Ubuntu18.04,虚拟机virtual box 1.安装XML格式转换 sudo apt  install xmlto 2.在内核目录执行 make mandocs  大概持续了半小时 ...

  10. 10-C++远征之模板篇-学习笔记

    C++远征之模板篇 将会学到的内容: 模板函数 & 模板类 -> 标准模板类 友元函数 & 友元类 静态数据成员 & 静态成员函数 运算符重载: 一切皆有可能 友元函数 ...