- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当下面的代码在 fiddle 中运行时元素“.title-wrap”和“.bg-wrap”并排出现。任何人都可以告诉我如何使“.bg-wrap”自动占据整个“.wrap”并进行最少的 css 更改。
html:
<div class="wrap selected">
<div class="title-wrap"></div>
<div class="bg-wrap"></div>
</div>
CSS:
.selected .title-wrap{
position:initial !important;
text-align: center;
height:29.42px;
animation:titleAnimation .2s;
-webkit-animation:titleAnimation .2s;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes titleAnimation
{
from {left:85px;top:5px}
to {left:25px;top:5px}
}
.wrap .title-wrap{
width:202px;
display:block;
position:absolute;
top:5px;
left:85px;
background:black;
}
.selected .bg-wrap{
background:green;
height:700px;
width:100%;
animation:bgAnimation .2s;
-webkit-animation:bgAnimation .2s;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes bgAnimation
{
from {left:85px;top:35px;}
to {left:205px;top:0px;}
}
.wrap .bg-wrap{
display:block;
position:absolute;
top:35px;
left:85px;
}
最佳答案
对您试图完成的事情并不乐观,但我认为我有解决方案。我还清理了你的代码,它现在被缩小并且更容易阅读。我还针对跨浏览器使用进行了更新。这是更新后的 JSFiddle,其中包含必要的修复:http://jsfiddle.net/mLh7r/34/
HTML:
<div class="wrap selected">
<div class="title-wrap titleAnimation"></div>
<div class="bg-wrap bgAnimation"></div>
</div>
CSS:
@-webkit-keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}
@-moz-keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}
@keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}
@-webkit-keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}
@-moz-keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}
@keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}
.titleAnimation {
-webkit-animation: titleAnimation ease-in 1s;
-moz-animation: titleAnimation ease-in 1s;
animation: titleAnimation ease-in 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.bgAnimation {
-webkit-animation: bgAnimation ease-in 1s;
-moz-animation: bgAnimation ease-in 1s;
animation: bgAnimation ease-in 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.wrap .title-wrap, .wrap .bg-wrap {
position: absolute;
display: block;
left: 85px;
}
.title-wrap {
position:absolute !important;
text-align: center;
height:29.42px;
}
.bg-wrap {
height:700px;
width:100%;
background:green;
z-index: -1;
}
.wrap .title-wrap {
width:202px;
top:5px;
background:black;
}
.wrap .bg-wrap {
top:35px;
}
关于css - 使用css获取兄弟html元素以占用整个父容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19370159/
我正在阅读 SQL/92(我是新手),它经历了不同的数据类型。其中之一是CHAR,我当然知道它与java中的String非常相似,而不是java中的char。但我们假设它是 CHAR(1)。只有一个字
我的 mysqld 进程消耗了 232% 的 CPU,并且有 14000 多个连接 (我对这件事有点陌生,但关注 Stack Overflow 寻求帮助)。 顶部: PID USER P
Tomcat 服务器占用 100% 的 CPU,但仅在 PRD。我们无法在其他环境中重现这一点。 进行线程转储后,我们发现有一些线程处于等待/可运行状态,但无法找到我们如何找到根本原因。 你能帮忙吗?
我正在使用 Xcode、SpriteKit 和 Swift 构建我的第一款 iPhone 游戏。我对这些技术不熟悉,但我熟悉一般的编程概念。 这是我想用英语做的事情。我想让圆圈随机出现在屏幕上,然后开
我的套接字消耗了 100% 的计算机 CPU。有 150 个客户端每 30 秒异步向服务器发送消息。有谁知道如何解决这个问题?下面是我的 ServerSocket 类 public class Ser
一段时间后(有时几分钟,有时几天),我的应用开始消耗 100% 的 CPU。正如我从 VisualVM 看到的那样,它总是发生在 org.elasticsearch.common.netty.chan
在我的容器 Controller 中,用户可以平移 View 以切换到不同的 View 。当平移手势开始时,它会将新 View Controller 的 View 添加到 View 中:view.in
假设我在数据框中有两列,其中一列不完整。 df = pd.DataFrame({'a': [1, 2, 3, 4], 'b':[5, '', 6, '']}) df Out: a b
在Ubuntu 16.04 LTS中,pyteserract脚本吃得太高,导致系统间歇性重启。 top命令输出为 top - 21:23:31 up 27 min, 4 users, lo
我在具有 88 个内核和 60 个 reducer 的 hadoop 集群上运行 mapreduce 作业。由于某种原因,它只使用了 79 个集群核心。开始时它运行 79 个映射器,但当完成一半拆分时
我正在对机器上的所有用户进行查询,当它执行时,它会占用 100% 的 CPU 并锁定系统。我已经等了 5 分钟,但什么也没有发生。 在任务管理器中,wmiprvse.exe 占用了所有 CPU。当我终
我正在从套接字(通过 TCP 协议(protocol))读取消息,但我注意到 CPU 花费大量时间来调用 BufferedInputStream 的 available() 方法。这是我的代码:
我有 6 个线程。其中一个线程进入某个范围并打开“锁定”和所有其他线程线程正在等待并希望进入相同的范围。 现在,其他线程是否会获得 CPU 时间?其他线程是否在线程调度中?我知道所有其他线程都处于等待
我正在尝试创建一个社交媒体应用程序。但它需要大约 300mb 内存。所以我的主页上有 5 个包含帖子的 fragment 。总体内存使用量为 250-300mb 然后为了测试,我禁用了这些 fragm
我有一个带有一些 TextFormField 的表单,我想扩展最后一个 TextFormField 以占据屏幕的其余部分。最后一个 TextFormField 可以有多行文本。 我没能做到这一点,并尝
我收到磁盘几乎已满的警告,所以我运行 DaisyDisk .. 显然 Xcode 占用了 15GB 的空间: http://imgur.com/a/cTIZZ iOS 设备支持为 12.3 GB: h
我正在使用 Xcode Playground 研究 Swift 内存布局,我创建了一个带有 bool、double 和 int32 的结构,如下所示。基于这种结构,MemoryLayout 的打印结果
一旦执行“self.navigationController pushviewcontroller:vc animated:YES”,我的 CPU 就会达到 100%。我在 Stack Overflo
警告:CPU 使用率达到 100%,请小心。 Link to the jsFiddle 编写此脚本是为了设计动态蛇梯板。每次刷新页面时,都会创建一个新板。大多数时候所有的背景图像都不会出现,CPU 使
我不知道为什么,但是MYSQL给CPU带来了很大的负载。我必须每秒多次更新数据库,并且用户群正在不断增长。 一开始还好,但是现在 CPU 负载每天都在增加 这是日志中的慢速查询: *Query_tim
我是一名优秀的程序员,十分优秀!