个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
28
4
我有一个高度和宽度是动态的 div。我正在尝试为该 div 添加一个虚线动画边框。我面临的问题是动画持续时间与高度和宽度无关。即无论高度和宽度如何，它的动画在所有 Angular 落都应该以相同的速度
.dynamic {
position: absolute;
height: 30px;
width: 300px;
overflow: hidden
}
.dynamic::before {
animation: slideDash 2.5s infinite linear;
position: absolute;
content: '';
left: 0;
right: 0;
outline: 1px dashed #fff;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
width: 200%;
}
.dynamic::after {
animation: slideDash 2.5s infinite linear reverse;
position: absolute;
content: '';
right: 0;
bottom: 0;
outline: 1px dashed #fff;
left: 0;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
width: 200%;
}
.dynamic div::before {
animation: slideDashRev 2.5s infinite linear reverse;
position: absolute;
content: '';
top: 0;
bottom: 0;
outline: 1px dashed #fff;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
height: 200%;
}
.dynamic div::after {
animation: slideDashRev 2.5s infinite linear;
position: absolute;
content: '';
top: 0;
bottom: 0;
outline: 1px dashed #fff;
right: 0;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
height: 200%;
}
@keyframes slideDash {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0%);
}
}
@keyframes slideDashRev {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0%);
}
}<div class="dynamic">
<div></div>
</div>最佳答案
只是修正动画的方向
.dynamic {
position: relative;
width: 300px;
height: 30px;
overflow: hidden;
color: red;
}
.dynamic .line {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.dynamic .line:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.dynamic .line:nth-of-type(2) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-left: -164px; /* margin-left=(minus)((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(3) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.dynamic .line:nth-of-type(4) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
margin-left: 164px; /* margin-left=((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(1) i, .dynamic .line:nth-of-type(3) i {
-webkit-animation: move 2.5s infinite linear reverse;
animation: move 2.5s infinite linear reverse;
}
.dynamic .line:nth-of-type(2) i, .dynamic .line:nth-of-type(4) i {
-webkit-animation: move 2.5s infinite linear;
animation: move 2.5s infinite linear;
}
.dynamic .line i {
left: 0;
top: 0;
width: 200%;
display: block;
position: absolute;
border-bottom: 1px dashed;
}
.dynamic .text {
width: 100%;
line-height: 30px;
display: block;
text-align: center;
position: absolute;
font-size: 18px;
}
@-webkit-keyframes move {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
@keyframes move {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}<body>
<div class="dynamic">
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="text">Same Direction!!</div>
</div>
</body>关于html - 动画时长应该是相对于高度和宽度的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35695488/
28
4
0
当我编译我的 ionic 4 应用程序时，我得到这个错误:不开始。但是，如果我更改代码中的某些内容并再次编译，代码将成功编译。我查了一下它可能与路径(绝对/相对)有关。但在这些问题中，解决方案是使用相
现在我发现当我打开终端时，它总是显示这些消息: bash: /usr/local/texlive/2012/texmf/doc/man:: No such file or directory bash
我有一些具有不同 url 前缀的嵌套模块。现在我想在一个模块中导航而不指定前缀(在我的模块中，我不想知道在哪个前缀下可以访问该模块)。 这些是我的 app.module 的路线: const APP_
我想在java中进行日期范围搜索假设我想搜索从2019年10月22日到当前日期。但问题是在两周的 block 大小中进行日期范围搜索(考虑到这可能会有所不同，但以周为单位)，例如这里开始日期将为 20
我正在尝试实现移动到单击鼠标的点。 但是我遇到了 X 轴镜像行为的问题。当我点击顶部 -> 它移动到底部，当我点击底部 -> 它移动到顶部。 这里是原始位置的例子 我点击了屏幕上有红十字的位置。 但它
尝试使用以下方法让对象跟随光标: int mx =(int) MouseInfo.getPointerInfo().getLocation().getX()-50; Player.setX(mx);
我有 4 个 JButton 设置在彼此下方。我希望当用户水平调整框架大小时它们左右移动。 例如:帧大小:400,400 按钮位置:300,200 现在我将框架大小调整为:600,400 Button
我想要做的是将一个元素(我用作背景的彩色 UIView)定位到我的 Storyboard 中，以便它从 ImageField 的中间开始。并填充所有内容，直到屏幕底部。我正在使用 xcode7 和 s
我正在编写一些 C++ 代码，它主要为共享它的其他两个项目提供一个类，但也包括一个小程序，以便在需要时可以从命令行使用它。该类必须加载一些资源，这些资源被写入资源文件夹中的多个文件。这些文件的路径当然
我能以某种方式随时获得相对于帧初始引用的加速度矢量吗？ (我的意思是:xArbitraryZVertical 模式下的帧引用，我第一次得到 Core Motion 数据)我试图做什么:每次我得到 CM
saved 我希望 div#one 在父 div 的左边缘和提交按钮的左边缘之间的空间居中。 最佳答案 还有几种方法: saved 很难说 saved 文本没有居中在容器 d
所以我在页面上有一个带有背景图像的对象，在 mousemove 上它移动了相对于鼠标的背景位置。但我遇到的唯一问题是在鼠标进入对象时将背景图像动画化到鼠标的当前位置。 我能够将背景位置动画化回其原始位
我的一个网站中有一个图像缩放属性。我想相对于 div 的中心缩放图像。 缩放功能如下。 function zoom(zm) { img=document.getElementById("pic"
我正在尝试调整水平导航栏左侧的导航栏 Logo 的大小，然后让其余导航栏元素占据相同的垂直空间并在空间中垂直居中。导航栏元素目前不使用完整的垂直空间。我尝试过的每个尺寸属性都产生了另一个问题。感谢所有
我有一些 h2 文本当前在移动 View 中左对齐，位于居中的 div 上方。我怎样才能将它对齐到移动 View 中相对于 div 的左对齐(应用下面的 CSS 中提供的媒体查询)？ CodePen
我想让文本元素(在本例中为 h2 副标题)居中，方法是让它忽略左侧的 float 图像。我更喜欢 h2 副标题与 h1 标题垂直居中对齐。有没有什么办法可以单独使用 CSS 来做到这一点？ 这是一个示
您好! 我在这个网站上工作，但我一直遇到同样的问题。当我把边距放在百分比而不是像素时，它似乎是从包装器或页面中获取百分比。可能是一些愚蠢的错误，但我并没有真正使用过百分比。无论如何，我所说的类是“ L
我很好奇这是怎么做到的，我做了类似的东西，例如 Home About Search bar Container
我希望我的 firstLabel 位于同一行文本字段的右侧。 //css input[type="text"]{ display:block; margin-botto
我正在尝试绘制多边形，并希望能够单击我的框架以获取鼠标坐标，以便更快地将心理图像转换为 x/y 值。 我在用 System.out.println("("+ MouseInfo.getPointerI
我是一名优秀的程序员,十分优秀！