- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试在图像上创建脉冲效果,但目前还无法正常工作。我尝试了一个 span
元素,它是这样工作的:
HTML:
<span class="pulse"></span>
CSS:
.pulse {
margin:100px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
我想和这张图片一样:
<a href="javascript:void(0)" class="item">
<img src="https://image.ibb.co/cNjXna/guided_inv_icon.png" alt="">
</a>
当页面加载时,图像应具有脉冲效果或仅将图像放大一点并持续 2 秒以指示交互性,然后图像应保持其原始形状。
有什么建议吗?
我创建了这支笔:https://codepen.io/maketroli/pen/ZyOJYM
编辑
我需要在黄色圆圈下方的图像中创建相同的效果。由 span
制作的黄色圆圈正在做我想用下图实现的目标。
最佳答案
您可以将相同的动画应用于图像,类似于将动画应用于 span
元素的方式。
.item img{
animation: pulse 2s infinite;
}
看看这个 pen
编辑
为了显示更大的图像 2 秒然后将其缩小到正常大小,我添加了放大
动画。
@keyframes magnified{
0%{
transform: scale(1.2,1.2);
}
70%{
transform: scale(1.2,1.2);
}
100%{
transform: scale(1,1);
}
}
并且您可以向元素添加多个动画:
.item img{
animation: pulse 2s infinite, magnified 2s 1;
}
我已经更新了 pen显示这些效果。
关于jquery - 如何在页面加载时在图像上创建几秒钟的脉冲效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44513333/
如果之前已经回答过这个问题,我深表歉意,但我无法找到我想要的东西。 我有一个 Box2D 动态主体,我对其应用线性脉冲以将其变成射弹。因此,当我单击屏幕上的任意位置时,我希望 body 投影到触摸位置
脉冲神经网络和循环神经网络都可以对时变信息进行建模。但我不确定哪种模型相对于计算成本更好。使用更复杂的脉冲神经网络是否值得,或者循环神经网络是否可以在所需计算量少得多的情况下工作?脉冲网络收敛得更快吗
如何在我的应用程序运行且屏幕打开时使 LED 或轨迹球闪烁或闪烁?比如接到电话时? 谢谢 最佳答案 Android 具有仅在屏幕关闭时 LED 才会亮起的硬编码功能。这是在源代码 Notificati
我的目标是从健身手环获取数据(脉搏)Torntisc T1使用我的应用程序并独立处理来自手环的数据。 为了实现,我使用了 Xamarin 并找到了一个 Bluetooth LE plugin for
我很难理解 Wait()、Pulse()、PulseAll()。他们都能避免僵局吗?如果您解释一下如何使用它们,我将不胜感激? 最佳答案 简短版: lock(obj) {...} 是 Monitor.
我在 Cigarette Smoker Problem 工作. 我只应该使用 Monitor 类。没有信号/信号量。 (是的,这是给学校的,但不是家庭作业,只是我的实践测试的免费练习,我真的需要做好准
我想使用 bcm2835.h 和纯 C 语言通过 PWM 控制 LED 二极管。我的代码不起作用。我错过了什么? 我尝试过“gpio”控制台命令,它工作正常,所以我知道 LED 已连接到正确的端口。我
在 ARKit/SceneKit 中,当用户点击按钮时,我想对我的节点施加一个脉冲。我希望冲动来自当前用户的角度。这意味着节点将远离用户的视角。多亏了这段代码,我能够获得当前的方向/方向: func
我正试图在 SK/SWIFT 中“脉冲”一个 Sprite 。我尝试使用 For 循环和 .setScale 进行粗略尝试,但它们不起作用(没有错误 - 只是没有动画)。我觉得使用 SKActions
我想为以下绘图符号设置动画(脉冲、发光)。实现所需行为的最佳方法是什么。谢谢 最佳答案 您不能为绘图符号设置动画。您可以做的是在突出显示的点上放置一个绘图空间注释。创建一个自定义的 CPTLayer
在 Perl 下,在 Linux 上将 Serial::Device 作为文件打开会重置我的 Arduino,但我不希望它被重置。 Arduino 可以通过脉冲 DTR 来重置,因此默认打开串口设备必
我用 alsa 成功渲染了音频,但是我完全无法确定 channel 映射。正如各种消息来源所说,我调用 snd_pcm_get_chmap设置好硬件和软件参数并准备好设备后。 snd_config_g
我是一名优秀的程序员,十分优秀!