html隐藏块元素过度动画,CSS3实现DIV图层隐藏到显示的过渡效果

本文介绍CSS3实现DIV图层隐藏到显示的过渡效果，可用于产品列表的产品简介过渡显示与隐藏等，希望对你有所帮助。

CSS3的transition过渡属性对于页面元素的显隐并没有提供过渡方法！所以DIV图层从display：none到display：block的过程中，瞬发没有过渡效果。

因此我们可以用透明度解决这个问题，通过透明度opacity属性从0到1的变化模拟元素的显隐，并且过渡属性transition是提供对透明度opacity属性的过渡的。但是在使用透明度的时候要注意兼容IE浏览器。

示例代码：

.animated_opacity{

font-size: 12px;

width:300px;

height:25px;

background:#92B901;

color:#ffffff;

position:relative;

font-weight:bold;

padding:8px 8px 0px 8px;

margin:5px;

opacity: 1;

filter:Alpha(opacity=100);

transition: opacity 2s;

}

.animated_opacity:hover{

opacity: 0;

filter:Alpha(opacity=0)

}

HTML代码：

CSS3实现DIV图层隐藏到显示的过渡效果！

html隐藏块元素过度动画,CSS3实现DIV图层隐藏到显示的过渡效果相关推荐

html鼠标悬停盒子凸起,css3 transform动画鼠标悬停div容器凸起放大显示
特效描述:css3 transform动画鼠标悬停 div容器凸起放大显示.鼠标悬停div容器凸起放大显示效果代码结构 1. HTML代码 what? If you want to sell s ...
使用css3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
css+隐藏+左侧菜单栏,放在网页左侧的DIV+CSS隐藏菜单代码
放在网页左侧的DIV+CSS隐藏菜单代码- www.webdm.cn body { background: #fff; font-family: "Lucida Grande", ...
html 定义悬浮块层级,采用CSS3的动态元素（动画）设计div块的层级式展现
此练习作品是为学习HTML5+CSS3而设计的(如有不好请大家批评指教~~~). 动画定义:animation:animationName; div块的移动: @keyframes keyframeN ...
html怎么设置出场动画,css3炫酷coming soon分步显示动画特效
这是一款效果十分炫酷的css3 coming soon分步显示动画特效. EXAMPLE 1 第一个demo是一个coming soon分步显示动画特效. html结构:创建一个class为sp-co ...
内联元素转化为内联块元素的一些小细节
内敛元素只能转化为块元素才能盒子居中.转换为内联块元素盒子不能居中内敛元素转化为内联块元素,单张背景图片写文字隐藏就会不显示图片,只能转化为块元素给内敛元素直接写文字隐藏不起作用,除非浮动或者转化 ...
html的隐藏标签的显示不出来,css如何让隐藏的元素显示出来
在css中,可以使用display属性让隐藏的元素显示出来,只需要给被隐藏的元素添加"display:block"样式即可.display属性规定元素应该生成的类型,当值为bloc ...
浮动元素具有行内块元素特点（HTML、CSS）
浮动元素具有行内块元素特点(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
CSS入门基础----行内元素、块级元素和行内块元素的特点和转换
块级元素常见的块元素有<h1>~<h6>.<p>.<div>.<ul>.<ol>.<li>等,其中<div& ...

html隐藏块元素过度动画,CSS3实现DIV图层隐藏到显示的过渡效果

html隐藏块元素过度动画,CSS3实现DIV图层隐藏到显示的过渡效果相关推荐

最新文章

热门文章