- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有两个 div 元素,它们的宽度可以通过 javascript 上的点击事件来控制。无论是点击事件(切换类名)还是悬停事件,其伪元素的背景图像似乎都在晃动(在 chrome,即 edge 和 safari 上确认)。
我查过 SO 和谷歌,但似乎是改变背景大小本身的问题,这是我在这里没有做的。
section {
width: 100%;
max-width: 1920px;
position: relative;
min-height: 700px;
overflow: hidden;
}
.container {
width: 99%;
height: 700px;
position: absolute;
transition: 1s linear width;
overflow: hidden;
}
.left {
top: 0;
left: 0;
background: transparent;
transform: skew(20deg) translateX(-50%);
border-radius: 0 20px 20px 0;
}
.left::after {
content: "";
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 100vw;
transform: skew(-20deg);
background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.right {
top: 0;
right: 0;
border-radius: 20px 0 0 20px;
transform: skew(20deg) translateX(50%);
}
.right::after {
content: "";
position: absolute;
top: 0;
right: 50%;
height: 100%;
width: 100vw;
transform: skew(-20deg);
background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.right:hover {
width: 250%;
}
<section>
<div class="container left"></div>
<div class="container right"></div>
</section>
最佳答案
我优化了代码并考虑使用左/右来定义元素的大小然后通过平移更改宽度过渡。
section {
max-width: 1920px;
position: relative;
overflow: hidden;
height: 500px;
}
.container {
position: absolute;
top: 0;
bottom:0;
transition:transform 1s linear;
overflow: hidden;
transform: skew(20deg);
}
.left {
left: -60vw; /*to create the overflow*/
right: calc(55% + 10px); /*10px distance between both element*/
border-radius: 0 20px 20px 0;
}
.right {
right: -80vw;
left: 45%; /*100% - 55% (the right value of .left)*/
border-radius: 20px 0 0 20px;
}
.left::after,
.right::after {
content: "";
position: absolute;
top: 0;
left: -40%;
bottom: 0;
right: -40%;
transform: skew(-20deg);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
transition:transform 1s linear;
}
.left::after {
background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);
transform-origin: bottom;
}
.right::after {
transform-origin: top;
background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);
}
.right:hover {
transform: skew(20deg) translateX(-60vw);
}
.right:hover::after {
transform: skew(-20deg) translateX(60vw);
}
<section>
<div class="container left"></div>
<div class="container right"></div>
</section>
关于html - 过渡中背景抖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55183005/
我构建了一个没有修饰的 Java Swing 对话框。我已经通过 MouseListener 和 MouseMotionListener 接口(interface)使用拖放实现了对话框移动。 但是,在
我在 Linux 2.6 上使用 clock_gettime()(来自 time.h)来控制线程循环中的计时。我需要在 +/- 5mS 时间范围内有 500mS。它似乎给了我 500 毫秒,然后开始漂
有没有办法抖动 geom_line() 中的线条? ?我知道这有点违背了这个情节的目的,但是如果你有一个只有几行的情节并且希望他们都展示它可能会很方便。也许有一些其他解决方案可以解决这个可见性问题。
所以我有一些物体(我可以在运行时创建越来越多的物体),我需要它们被磁化到屏幕中心。让它在世界空间中为 (480/2/WORLD_SCALE, 320/2/WORLD_SCALE)。我是 box2d 的
我终于制作了一个可以按照我想要的方式运行的股票代码,但现在唯一的问题是它看起来有点不稳定,看起来像是在旧电视上显示的。如何让它看起来更平滑? 这是我的代码: import java.awt.Color
所以我的游戏几乎完成了...但是当我将手指按住屏幕时会出现这种小故障或抖动,现在我已经注意到了,我无法不注意到... 它发生得非常快,并且只有在调用一个函数来处理点击和按住(长按)时才会发生。这会在使
我接手了一个半成品的网站开发,这个网站上有一些使用jquery 1.3.2的 slider 。突然间,今天,我第一次看到 slider 在到达内容末尾时摇晃。这是带有问题 slider 的站点: ht
正如您从下面的屏幕截图中看到的那样,“标题栏”在带有文本的区域中出现了这些丑陋的 strip ,这些 strip 延伸了整个屏幕的宽度。它在真实设备上更加明显。 有什么办法可以解决这个问题吗? 最佳答
我创建了一个 UICollectionView 并希望所有单元格都像 iPhone 上跳板的编辑模式一样摇动。我已经创建了我的 shake 代码,但不知道如何实现它。我有自定义单元格,所以我假设它在那
我正在尝试将列表传递给有状态小部件的构造函数,但是在 main.dart 中添加小部件时,它不需要任何参数。 class Appointments extends StatefulWidget {
我最初在 gamedev 上问过这个问题,但没有一个答案有助于解决问题,我仍然不知道真正的原因是什么。我在常见问题解答中没有看到任何关于在 SE 中重新发布问题的内容,所以我只能希望这没问题。此外,回
我的数据看起来像这样: df1 <- structure( list( y = c(-0.19, 0.3,-0.05, 0.15,-0.05, 0.15), lb
我目前的工作需要在 Intel Core 系列的 CPU 上生成指定数量的 TLB 未命中,但进展并不顺利。我尝试了很多方法,但所有方法的 TLB 命中率都非常高。有谁知道一些关于 x86 TLB 如
我知道有一种方法可以将图像转换为 Icon通过 ImageIcon .但我正在使用 FancyBottomNavigation这是必需的 TabData具有参数 iconData类型 IconData
我想像在js中的示例一样实现视频到 Canvas 应用程序:http://jsfiddle.net/Ls9kfwot/2/ 但是我的问题是如何在特定区域拍摄视频播放器的屏幕截图? 就像drawImag
如果 onTap: changeName, void changeName() { setState(() { name = "Your own codes"; }
我正在尝试为从api中获取的list实现延迟加载。我为ListView实现了一个侦听器,以检查它何时到达底部。我在这里的问题是: 1)如何为列表设置初始加载项数? 2)如何在调用loadMore()方
我正在使用流从REST API检索数据,但是当数据库中的数据更新时,流不会刷新应用程序中的数据。 StreamController _productsController = new StreamCo
我还没有看到这个问题在 SO 中被提及,所以就这样吧。我有一个搜索栏,可以防止搜索超出次要进度(在本例中为音乐缓冲)。假设这首歌长 5 分钟,已缓冲 4 分钟,并且正在一分钟标记处播放。当我去拖动
我的应用程序基于 GPS 数据,为此我使用了 Fused-location-provider。从现在开始,我看到有一个 gps 抖动,一些 GPS 坐标偏离了道路。这是无法接受的。我试图做的是实现 K
我是一名优秀的程序员,十分优秀!