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

118 2020/06/03 艾维畅想网

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


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

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


示例代码:



<style  type="text/css">
 .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)
 }
 </style>


HTML代码:


<div class="animated_opacity">CSS3实现DIV图层隐藏到显示的过渡效果!</div>




分享到
  • 微信好友
  • QQ好友
  • QQ空间
  • 腾讯微博
  • 新浪微博
  • 人人网
成都艾维畅想网络科技有限公司
地址:成都市双流区华阳镇西寺路石化大厦酒店附近100米
联系人:满经理(成都/北京) 沈经理(广州)
电话:199-3875-5567
QQ:845583755(成都/北京) 578551723(广州)
邮箱:845583755@qq.com
  • 微信公众号
  • 手机版
  • 微信小程序

——需求定制——

您的姓名
联系电话
需求
热门标签: 品牌网站建设 | 购物商城建设 | 微信公众号 | 微信小程序 | APP开发 | 响应式开发 北京网站建设 | 成都网站建设 | 广州网站建设 | 网站推广优化 | 网站维护 | 服务器环境搭建 LOGO设计 | 宣传册设计 | 产品包装设计 | 名片设计 | 海报设计 | 广告设计
Copyright © 2011-2020 艾维畅想网 All Right Reserved.
ICP备案: 蜀ICP备20018253号-1
川公网安备 51010402000995号 川公网安备 51010402000995号

在线
客服

客服
热线

199-3875-5567
7*24小时客服服务热线

新浪
微博

微信
咨询

微信咨询

关注
微信

关注官方微信公众号
顶部