使用CSS和/或Javascript进行闪烁动画 [英] Flickering Animation with CSS and /or Javascript

问题描述

你好，



我现在想弄清楚如何创建一个闪烁的文本动画，如下例所示：



http://www.leedsbuildingsociety.co。英国/资源/踢我的习惯/ [ ^ ]



http：// www。 serve-mcr.com/ [ ^ ]



有人可以解释一下这个有效的Javascript-Plugin还是只有CSS（理想）的解决方案？



提前多多谢谢。



祝你好运

解决方案

请参阅我的评论题。我们在网页上已经有太多令人烦恼和分散注意力的特殊效果。



在第二个网站上你引用的看起来更好，可以用一个简单的文件来实现，动画GIF： http://en.wikipedia.org/wiki/Animated_GIF#Animated_GIF [ ^ ]。



有很多编辑器可以编辑它们或从现有框架编译。



第一个...首先，让我给你一种方法来看看是怎么回事在页面上实现：使用Web浏览器，打开页面并使用查看页面源（或类似内容），以递归方式下载所有脚本和样式文件。然后，看看它是如何工作的。



本手册解释了如何制作仅限CSS的动画： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations [ ^ ]。



你可以找到一些简单的样本，例如： https://daneden.me/animate/ [ ^ ]。



使用Javascript，您可以创建更高级的动画，特别是如果您使用HTML5 Canvas功能：

http ：//en.wikipedia.org/wiki/HTML5_canvas [ ^ ]，

一些令人印象深刻的样本： http://net.tutsplus.com/articles/web-roundups/21 -ridliculously-impressive-html5-canvas-experiments / [ ^ ]。



现在，剩下的步骤正在做一些工作。请继续，但请不要过分或刺激。 :-)

-SA

感谢您的回答。



我已经看过Terrible Takeways的源代码示例了。您可以找到相关的章节。



让我惊讶的是他们使用的背景图片：



http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits /img/screen-2-titles-stacked.png [ ^ ]



为什么他们不使用一系列多张图片和相反，在一张照片中缩小了所有内容？



HTML：



< h1 class =flicker abs-mid ir>糟糕的外卖< / h1>



CSS：



.habit.current .flicker {

-webkit-animation：flicker .2s steps（1）infinite;

-moz-animation ：闪烁.2s步骤（1）无限;

-ms-animation：闪烁.2s步骤（1）无限;

-o-animation：闪烁.2s s teps（1）无限;

动画：闪烁.2s步骤（1）无限;

}



.screen.takeaways h1 {

宽度：465px;

身高：333px;

保证金：-330px 0 0 -524px;

background-image：url（../ img / screen-2-titles-stacked.png）;

}



尽管如此，实现此代码对我来说并不起作用，这表明我忽略了某些东西，或者涉及到一些Javascript。



任何想法缺少什么？

Hello,

I am trying to figure out for hours now how to create a "flickering" text animation as you can see in the examples:

http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/[^]

http://www.served-mcr.com/[^]

Could someone please explain with which Javascript-Plugin this works or if there is a CSS-only (ideal) solution?

Thanks a lot in advance.

Best regards

解决方案

Please see my comment to the question. We already have too many irritating and distracting special effects on the Web pages.

On second site you reference looks better and could be implemented in such a simple as just one file, animated GIF: http://en.wikipedia.org/wiki/Animated_GIF#Animated_GIF[^].

There are many editors to edit them or compile from existing frames.

The first one… First of all, let me give you one method of looking how something is implemented on the page: Take your Web browser, open the page and use "View Page Source" (or something like that), download all scripts and style files, recursively. And then, see how it works.

This manual explains how to make CSS-only animations: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations[^].

You can find some simple samples, for example, here: https://daneden.me/animate/[^].

With Javascript, you can create much more advanced animations, especially if you use HTML5 Canvas feature:
http://en.wikipedia.org/wiki/HTML5_canvas[^],
some impressive samples: http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/[^].

Now, the remaining steps is doing some work. Please go ahead, but please, don't make it excessive or irritating. :-)

—SA

Thanks for your answer.

I already had a look at the source code of the "Terrible Takeways"-example. You can find the relevant sections attached.

What makes me wonder is the background image they used:

http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/img/screen-2-titles-stacked.png[^]

Why didn't they use a series of multiple pictures and instead cramped everything in one picture?

HTML:

<h1 class="flicker abs-mid ir">Terrible takeaways</h1>

CSS:

.habit.current .flicker {
-webkit-animation: flicker .2s steps(1) infinite;
-moz-animation: flicker .2s steps(1) infinite;
-ms-animation: flicker .2s steps(1) infinite;
-o-animation: flicker .2s steps(1) infinite;
animation: flicker .2s steps(1) infinite;
}

.screen.takeaways h1 {
width: 465px;
height: 333px;
margin: -330px 0 0 -524px;
background-image: url(../img/screen-2-titles-stacked.png);
}

Nevertheless, implementing this code is not working for me, which suggests that I am overlooking something, or there is some Javascript involved.

Any idea what is missing?

这篇关于使用CSS和/或Javascript进行闪烁动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！