- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有这段代码允许对象左右移动模糊,但我希望它垂直移动蓝色,以便它从上到下然后再回到上。你能帮帮我吗?
#outer {
position: relative;
margin: 10px;
}
#mb {
position: absolute;
left: 0;
font-size: 2em;
font-weight: bold;
padding: 0.2em 1em;
color: #fff;
background-color: #600;
border: 0.2em solid #c00;
border-radius: 8px;
text-shadow: 0 0 5px rgba(255, 255, 255, 0);
box-shadow: 0 0 2px rgba(200, 0, 0, 0);
-webkit-animation: motionblur 4s ease-in-out infinite;
animation: motionblur 4s ease-in-out infinite;
}
@-webkit-keyframes motionblur {
0% {
left: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleX(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleX(1.1) skewX(-4deg);
}
50% {
left: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleX(1) skewX(0deg);
}
55% {
left: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleX(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleX(1.1) skewX(4deg);
}
100% {
left: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleX(1) skewX(0deg);
}
}
@keyframes motionblur {
0% {
left: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
left: 0;
transform-origin: 0 0;
transform: scaleX(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
transform: scaleX(1.1) skewX(-4deg);
}
50% {
left: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
transform: scaleX(1) skewX(0deg);
}
55% {
left: 300px;
transform-origin: 100% 0;
transform: scaleX(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
transform: scaleX(1.1) skewX(4deg);
}
100% {
left: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
transform: scaleX(1) skewX(0deg);
}
<div id="outer">
<div id="mb">Motion Blur</div>
</div>
最佳答案
试试这个来反转动画。
只需将所有 left
属性替换为 Top
X、ScaleX
和 SkewX
的所有变换属性到 SkewX
SkewY
#outer {
position: relative;
margin: 10px;
}
#mb {
position: absolute;
left: 0;
font-size: 2em;
font-weight: bold;
padding: 0.2em 1em;
color: #fff;
background-color: #600;
border: 0.2em solid #c00;
border-radius: 8px;
text-shadow: 0 0 5px rgba(255, 255, 255, 0);
box-shadow: 0 0 2px rgba(200, 0, 0, 0);
-webkit-animation: motionblur 4s ease-in-out infinite;
animation: motionblur 4s ease-in-out infinite;
}
@-webkit-keyframes motionblur {
0% {
top: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
top: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleY(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(-4deg);
}
50% {
top: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
55% {
left: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleY(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(4deg);
}
100% {
top: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
}
@keyframes motionblur {
0% {
top: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
top: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleY(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(-4deg);
}
50% {
top: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
55% {
top: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleY(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(4deg);
}
100% {
top: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
<div id="outer">
<div id="mb">Motion Blur</div>
</div>
关于html - 将此 css 运动模糊效果反转为垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31790381/
我使用 POI4XPages api 从 Word 文档创建了 PDF。这是代码: var template = poiBean.buildResourceTemplateSource(null,"p
我如何转换它: SELECT max(id), value FROM GROUP BY value; 能言善辩吗? 提前致谢!! 最佳答案 这应该可行,您可以在 https://laravel.co
我有Jquery点击事件,并且我想在执行我的函数UpdateItemStatus(this.id);之前防止多次点击,所以我已尝试使用开/关事件的以下代码, $('#tableItems').on('
有谁知道有什么软件包支持以下将base58转换为十六进制字符串或从十六进制字符串转换为base58编码的相反方式。下面是一个 python 实现的示例。 https://www.reddit.com/
我正在使用 Rob Monies 的“Jquery Week Calendar”来构建日历应用程序。 我有一个 MSSQL 数据库,其中包含名为“dates”的表和以下字段: ID开始结尾标题 我想用
我有一个以下形式的字典 >>> {'1' : [V3210 , 234567 ,1235675 , 23], '2' : [v3214 , 5678 ,65879 ,89} , ...} 如何将字典写
我有一堆 one 形式的变量, two , three , four_five我想把它们转到getOne , getTwo , getThree , getFourFive ... 我写了一个公式来实
这是我的第一个问题,我是初学者,代码是用 C (ANSI C) 编写的。 代码应该为递归函数中的每个数字返回数字 (n+1)。(123 -> 234; 801->912; 239->340) 问题是当
这可能是一个愚蠢的问题,但是我很难找到我需要的答案。我有一个计算中继器的测试。我想返回 count 变量,以便我可以将其传递给另一个测试以在 for 循环中使用。 我尝试过的: this.counts
我有这个字符串列表: private final List categoryList = Arrays.asList("27", "28, 96", "10", "15", "7", "98"); 从
我正在使用互操作将 excel 文件转换为 pdf。我有一个工作代码。 但在将其保存为 pdf 之前。它会提示一个对话框,要求用户“是否保存对文件的更改”我怎样才能避免这个提示? 保存完成后如何关闭e
我有一个 Canvas ,我想将其转换并显示在标签中。我知道我们可以使用 toDataURL() 和 toBlob() 将 Canvas 转换为图像,但这两种方法都给我 base64 数据,这不是图像
我有一个获取用户 profilePicture、lblUsername 和 lblEmail 的 Facebook 登录名。我知道 FBProfilePictureView 是一个包含 UIImage
我正在尝试使用 grunt-webfont 从 SVG 生成网络字体. 问题是我需要这个任务在 windows 和 linux 机器上有效。为了实现这一点,我需要使用 doesn’t work wit
我使用的是我在 GitHub 上发现的一个 JS 插件,它使视频标题出现视差,问题是当我运行它响应手机时视频变黑,我试图在响应模式下将视频更改为图像。 我尝试使用@mediatag 但无法正常工作。
我正在尝试学习 Go 并研究降雨强度工具。对于此工具,我必须进行如下计算: var intensity float32 intensity = 10^((value−109)÷32) 值是一个 uin
我有一个看起来像这样的字符串,例如 Lübeck Nürnberg Österreich 和“Umlaute”。 现在我想拆分它并在字符串上添加新的“单词”,如下所示Lübeck Nürnberg Ö
我的任务: 通过 ffmpeg 将 YUV Frame 数据转换为 jpeg 图像。 我有的: 每个平面的数据和每个平面的线尺寸; 我试图创建空的 AVFrame 并用这些信息填充它的数据和行大小,但
使用 Reflex-DOM,我想做一个 Event t ()当浏览器准备好绘制下一帧时触发,即 requestAnimationFrame火灾。我试过这样: {-# LANGUAGE Recursiv
我有一条路线 Route::post('/updateLogo', 'CaptivePortalController@updateLogo'); 然后我在这里发布 $http({ method
我是一名优秀的程序员,十分优秀!