- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
对于用于移动浏览器的 Web 应用程序,我想集成 this简单而优雅的预加载器。它将驻留在半透明覆盖层之上。它上面还会有一些文字(例如“请稍候...”或“稍等...”等)。
我尝试整合所有这些。结果如下(运行代码片段)。它有 3 个不同的问题(你能帮我解决所有问题吗):
1) 我无法定位预加载器 + 它是半透明覆盖层顶部的文本(尽管我使用了高 z-index
)。
2) 此外,预加载器图形会随着上面句子的长度而倾斜。我希望它独立于此。
3) 最后,它们没有位于正中间(垂直而言)。
body{background:#ECF0F1}
.parent{
position:fixed;
z-index:1;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.caption{
margin-bottom:1em;
color:gray;
position:relative;
z-index:10;
}
.load{
width:50px;
height:50px;
position:relative;
z-index:10;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:fixed;border-radius:50%;animation:spin 2s ease infinite}
.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}
@keyframes spin{
0%,100%{transform:translate(0)}
25%{transform:translate(160%)}
50%{transform:translate(160%, 160%)}
75%{transform:translate(0, 160%)}
}
.overlay{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
opacity:0.6;
z-index:100;
background-color:#FFFFFF;
}
body {
background: #E8F5E9;
background: repeating-linear-gradient(
to right,
#FAFAFA,
#FAFAFA 50px,
#E8F5E9 50px,
#E8F5E9 100px
);
}
<body>
<div class="overlay">
<div class="parent">
<div class="caption">Lorem ipsum dolor sit amet ...</div>
<div class="load">
<hr><hr><hr><hr>
</div>
</div>
</div>
<body>
注意:我希望使用纯 CSS 解决方案,不涉及 JS。我还想避免 flex-box
,并寻求通用的东西(在向后兼容的意义上)。例如。 flex-box
支持在旧版本的 Android 浏览器中减少(根据 caniuse.com)。我也想尊重这些版本,因此最好坚持使用受良好支持的 CSS 2.1 属性。
最佳答案
问题在于 hr
元素,它们被固定放置并且它们应该是绝对的以保持它们与父容器的关系。然后只需将 margin:auto
添加到 load
即可使它们居中。
并且由于 parent
和 overlay
元素都是固定位置的,您可以将它们分开以便能够正确使用 z-index 并避免叠加应用的不透明度:
body {
background: #ECF0F1
}
.parent {
position: fixed;
z-index: 1000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.caption {
margin-bottom: 1em;
color: gray;
position: relative;
z-index: 10;
}
.load {
width: 50px;
height: 50px;
position: relative;
z-index: 10;
margin: auto;
}
.load hr {
border: 0;
margin: 0;
width: 40%;
height: 40%;
position: absolute;
border-radius: 50%;
animation: spin 2s ease infinite
}
.load :first-child {
background: #19A68C;
animation-delay: -1.5s
}
.load :nth-child(2) {
background: #F63D3A;
animation-delay: -1s
}
.load :nth-child(3) {
background: #FDA543;
animation-delay: -0.5s
}
.load :last-child {
background: #193B48
}
@keyframes spin {
0%,
100% {
transform: translate(0)
}
25% {
transform: translate(160%)
}
50% {
transform: translate(160%, 160%)
}
75% {
transform: translate(0, 160%)
}
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.6;
z-index: 100;
background-color: #FFFFFF;
}
body {
background: #E8F5E9;
background: repeating-linear-gradient( to right, #FAFAFA, #FAFAFA 50px, #E8F5E9 50px, #E8F5E9 100px);
}
<div class="overlay">
</div>
<div class="parent">
<div class="caption">Lorem ipsum dolor sit amet ...</div>
<div class="load">
<hr>
<hr>
<hr>
<hr>
</div>
</div>
关于html - 定位位置为 :fixed side-by-side each other 的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48713940/
我正在尝试获取从过去的 startposition/location 到当前移动的 currentposition/location 的距离(以米为单位)。 我确实有工作正常的currentposit
所以我有一堆绝对覆盖的 div。用户通过在叠加层上拖动来创建方形 div。如果您要创建一个 div,然后放大和缩小,div 会保持在同一位置,因为它对叠加层是绝对的,如前所述。 然而问题就出在这里。您
我想找到 View 在显示屏幕上的位置。 为此,我使用了 view.getLeft() 、view.getBottom() 、view.getRight() 等方法> , view.getTop()。
我有一个看起来像这样的 View 层次结构(基于其他答案和 Apple 的使用 UIScrollView 的高级 AutoLayout 指南): ScrollView 所需的2 个步骤是: 为 Scr
所以我有一个名为 MARKS 的表,我有这些列 STUDENT_ID, CLASSFORM_NAME, ACADEMIC_YEAR, TERM, SUBJECT_NAME, TOTAL_MARKS
我有一个问题我无法理解,请帮助: 我开发了带有图像的 html 页面,并使用 jQuery UI 帮助使它们可拖动,我将这些图像位置设置为相对位置并给出了左侧和顶部像素,这是页面的链接 http://
我正在尝试创建一个 CSS 动画,它在 sprite 表中循环播放 16 个图像,给人一种幽灵“漂浮”的错觉。动画通过在 background-position 位置之间移动以显示不同状态的幽灵来实现
我正在创建这个网站的 WebView https://nearxt.com/打开时询问位置但是当我使用此链接在 flutter 中创建 webview 时那么它就无法定位我还在应用程序中定义了位置,但
我正在以编程方式创建一个需要跨越 2 个屏幕的窗口。正在创建的窗口的大小是正确的,但窗口大约从第一个屏幕的一半开始。我可以将它拖回第一个屏幕的开头,NSWindow 非常适合。 我只需要知道在窗口的起
位置“/”的匹配叶路由没有元素。这意味着默认情况下它将呈现一个空值,从而导致一个“空”页面 //App.js File import { BrowserRouter as Router, Routes
我有一个运行 Ubuntu 和 Apache 的 VPS 例如,假设地址是:5.5.5.5 在 VPS 上,我有一个名为 eggdrop 的用户(除了我的 root 用户)。 用户 eggdrop 有
我有一个 JLabel与 ImageIcon ,我使用 setIcon() JLabel中的函数. ImageIcon然后上来,坐在我的JLabel 的文字左侧.是否有可能拥有 ImageIcon在文
我的图中有节点,它们的 xlabels 位于它们的左上方。我怎样才能改变这个位置?我希望 xlabels 正好位于节点本身的旁边。 最佳答案 xlp是你想要的属性,但它没有做任何事情。 你不能改变位置
我对基本的 VIM 功能有疑问:(我尝试谷歌搜索但找不到答案) 如何列出所有自定义功能。(我做了 :function 并且不能找到我的自定义函数) 如何获得自定义函数列表中的函数(或它们的存储位置)。
我是 PHP 的新手,虽然我一直在搜索,但我不知道该怎么做。 我知道可以使用 Location("some page") 进行重定向。我还读到,只要没有向用户显示任何内容,它就可以工作。 我想做的是:
如果在 jgrowl.css 中位置更改为“center”,我如何将其覆盖为默认值,即“top-right” $.jGrowl(data, { header: 'data', an
我需要根据用户是否滑动屏幕顶部、屏幕中间或屏幕底部来触发不同的事件。我正在尝试找出最好/最简单的方法来做到这一点,因为我很确定没有办法从 UISwipeGestureRecognizer 获取位置。
我需要枚举用delphi编写的外部应用程序中使用的类 ,因此我需要访问VMT表以获取该信息,但是我找不到任何有关如何在exe(由delphi生成)文件中找到VMT(虚拟方法表)的位置(地址)的文档。
在 D2010 (unicode) 中是否有像 Pos 这样不区分大小写的类似函数? 我知道我可以使用 Pos(AnsiUpperCase(FindString), AnsiUpperCase(Sou
我正在尝试为我的reveal.js 演示文稿制作一个标题,该标题会粘贴在屏幕顶部。标题中的内容在每张幻灯片的基础上都是动态的,因此我必须将标记放在 section 标记中。 显然,如果标记在 sect
我是一名优秀的程序员,十分优秀!