问题:给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. 百度地图api根据地图缩放等级显示不同的marker点,功能二

    功能一里面有marker点后台的代码 根据地图的缩放等级显示不同marker点的坐标JSP代码 <%@ page language="java" contentType=&q ...

  2. spring下载及部署

    网址http://repo.spring.io/release/org/springframework/spring Bean配置项 Id : 在IOC容器中此Bean唯一标识 Class : 要实例 ...

  3. 网页手机wap2.0网页的head里加入下面这条元标签......

    网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" conten ...

  4. 如何使用THashedStringList

    1.添加 uses system.IniFiles 2.实例代码: unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System ...

  5. 二叉树遍历(Binary Tree Traversal)

    二叉树的递归遍历比较简单,这里说一下非递归遍历,以中序遍历为例子. 非递归遍历主要用到栈来协助进行.对于一个二叉树,首先根节点入栈,如果有左儿子,则继续入栈,重复直到最左边的儿子,这时候此节点值为要遍 ...

  6. MongoDB学习笔记(数据操作)

    1.  批量插入:     以数组的方式一次插入多个文档可以在单次TCP请求中完成,避免了多次请求中的额外开销.就数据传输量而言,批量插入的数据中仅包含一份消息头,而多次单条插入则会在每次插入数据时封 ...

  7. 在angular中实现下拉框的两种方式 ng-repeat和 ng-option

    1. ng-repeat实现下拉框: select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 实现源码   <!DOCTYPE html> <html&g ...

  8. 使用Birt开发报表

    间隔一段时间未使用Birt开发报表后,本文章记录Birt开发报表的常遇到的开发问题及解决措施,方便自己和园内其他朋友学习. 一.Birt连接数据库配置 1.连接DB2数据库: 1.1.birt的数据连 ...

  9. javascript运行模式:并发模型 与Event Loop

    看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...

  10. MySQL临时表创建

    和SQL SERVER 创建临时表不同 不能直接写 Create table #Test_Table 而是需要在 Create 和 table 之间 加入 TEMPORARY(temporary< ...