问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下;

解决:animation: myfirst 2s;加上animation: myfirst 2s forwards;之后就可以了,

要实现的样式:div框淡出,但保证div的字体opoacity为1,要不然字体不清晰。(如果给div设置opacity,div子元素都会有透明度)

解决方案:用background-color: rgba(0, 0, 0, 0.2)给div设置背景色,css3动画也设置background-color: rgba(0, 0, 0, 0.2)属性

eg:

@keyframes show {
0% {
background-color: rgba(0, 0, 0, 0);
}
100% {
background-color: rgba(0, 0, 0, 0.2);
}
}

给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下的更多相关文章

  1. 设置background属性使用selector的时候内置?attr报错的解决方案

    当我们设置background属性的时候可以设置background="@color/black" 也可以设置 background="@drawable/selecto ...

  2. div样式text-align在子元素缩进不规范的情况下,chrome出现的问题(貌似结果是inline-block导致的)

    在调css的时候,发现居然有firefox实现效果完整而chrome出现问题的情况: 详细情况:segmentfault1 segmentfault2 全文表达: <html><he ...

  3. div鼠标悬停,子元素上移,鼠标移出,子元素下移动画。

    HTML: <div class="edt_title" > <div id="edt_title"> <p class=&quo ...

  4. 父元素设置min-height子元素设置100%问题

    问题:父元素设置min-height子元素高度设置100%取不到值,这是因为子元素 div设置 height:100%: 只有当父级元素满足min-height:1000px;设置的条件才触发: 浏览 ...

  5. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. 第4天:JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...

  7. 【html/css】若母div设置了透明度,如何才能使得里面的子div不继承母div的透明度

    用rgba的方式给母div设置透明度的话就不会影响子div的透明度了. 例: background: rgba(51, 51, 51, 0.5);

  8. position:absolute 按钮左右分布:left:0 和 right:0 以及雪碧图

    问题:把两个a标签按钮 垂直居中,并且分别把两个按钮放在水平左右两边顶部1,祖父元素设定:position:relative2,把.arrow 设定上下垂直居中 position:absolute; ...

  9. 子DIV设置margin-top影响父DIV位置的解决办法

    父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. tr:even 与tr:odd

    :even匹配所有索引值为偶数的元素,从 0 开始计数查找表格的1.3.5...行(即索引值0.2.4...)<table> <tr><td>Header 1< ...

  2. Happy New Year

    今年的元旦能明显感觉到节日的狂欢.一方面,论文的事情,压抑了好久,另一方面,把自己融入节日之中.所以才有了节日的深度参与. 早上还是按时的起床,看了朋友圈,内心却能专注于平静.因为见到了优秀的人,才发 ...

  3. Entity Framework学习笔记——错误汇总

    之前的小项目做完了,到了总结经验和更新学习笔记的时间了.开始正题之前先啰嗦一下,对之前的学习目标进行一个调整:“根据代码生成表”与“生成数据库脚本和变更脚本”合并为“Code First模式日常使用篇 ...

  4. 关于jq+devexpress基础知识总结(随便的基础)

    //获取某行某列的值 onSelectionChanged: function (selectedItems) { ]; if (data != null) postionno = data.POST ...

  5. C++对象模型详解

    原文链接:吴秦大神的C++对象模型. 何为C++对象模型? C++对象模型可以概括为以下2部分: 1.语言中直接支持面向对象程序设计的部分: 2.对于各种支持的底层实现机制. 语言中直接支持面向对象程 ...

  6. (分享)FreeVideo1.6.1 VIP视频播放器(支持下载)

    软件名字:FreeVideo 版 本 号 :v 1.6.1 开发语言:易语言 压缩加壳:VMP 3.0 beta 皮      肤:易简约定制版(白色) 模块使用:乐易.精易.皮肤 主要技术:其实没啥 ...

  7. VMware中装Win2012并配置Hyper-v

    VMware中装配Win2012再配置Hyper-v,解决虚拟机监控程序已经在运行中的方法 找到虚拟机存放的位置,用记事本打开Windows Server 2012.vmx,在最后添加两行并保存: h ...

  8. Python字符串的encode与decode研究心得乱码问题解决方法

    为什么Python使用过程中会出现各式各样的乱码问题,明明是中文字符却显示成“\xe4\xb8\xad\xe6\x96\x87”的形式? 为什么会报错“UnicodeEncodeError: 'asc ...

  9. Hsqldb安装与使用

    HSQLDB是一个轻量级的纯Java开发的开放源代码的关系数据库系统,其体积小,占用空间小,使用简单,支持内存运行方式等特点.可以在http://sourceforge.net/projects/hs ...

  10. 移动端自动化环境搭建-RIDE的安装

    A.安装依赖 RIDE 是 Robot Framework 测试数据的编辑器.它使测试用例的创建.运行.测试项目的组织可以在图形界面下完成. B.安装过程 下载地址:https://pypi.pyth ...