我想在CSS3中实现一些动画,其效果类似于Flash中的编码。 我一直在寻找一些看起来像电影开放积分的效果,当电影在后台播放时,积分不断显示在屏幕的各个位置。唯一的事情,而不是在这里使用电影,我想使用图像。 寻找类似这样的:Madmanimation使用CSS3的Flash动画效果
回答
A really simple example我刚刚做到了。
HTML:
<h1>That's all!</h1>
<div class='bg'><h3>Pencil Nebula</h3></div>
<div class='bg'><h3>N44 in the Large Magellanic Cloud</h3></div>
<div class='bg'><h3>Messier 83: Central Region</h3></div>
<div class='bg'><h3>Dark Matter</h3></div>
CSS:
h1 {
margin-top: 7em;
color: transparent;
text-align: center;
animation: endani 1s 17s forwards;
}
.bg, h3 { position: absolute; }
.bg {
top: 0; right: 0; bottom: 0; left: 0;
background-position: 50% 50%;
background-size: cover;
opacity: 0;
}
.bg:first-of-type {
background-image:
url(http://i.space.com/images/i/21536/wW4/pencil-nebula-wide-1920.jpg);
animation: bgani 5s;
}
.bg:nth-of-type(2) {
background-image:
url(http://i.space.com/images/i/20755/wW4/N44-Large-Magellanic-Cloud.jpg);
animation: bgani 5s 4s;
}
.bg:nth-of-type(3) {
background-image:
url(http://i.space.com/images/i/20683/wW4/eso-messier-83.jpg);
animation: bgani 5s 8s;
}
.bg:nth-of-type(4) {
background-image:
url(http://i.space.com/images/i/15679/wW4/hubble-cluster-abell-520.jpg);
animation: bgani 5s 12s;
}
h3 {
padding: .2em .8em;
background: rgba(0,0,0,.65);
color: white;
}
.bg:first-of-type h3 { top: 25%; left: 15%; }
.bg:nth-of-type(2) h3 { bottom: 25%; right: 15%; }
.bg:nth-of-type(3) h3 { top: 25%; right: 15%; }
.bg:nth-of-type(4) h3 { bottom: 25%; left: 15%; }
@keyframes bgani {
0% { opacity: 0; } 20% { opacity: 1; }
95% { opacity: 1; } 100% { opacity: 0 }
}
@keyframes endani { to { color: crimson; text-shadow: 0 0 2px white; } }
这其中使用了四个元素已经不透明度动画(你想要的元素消失(在其他的顶部显示一个)通过将opacity
从0更改为1并通过将opacity
从1更改为0来淡出要隐藏的那个),但还有很多其他选项,例如动画scale
变换(您将比例缩放为0)消失,并且从0到1您想要出现的元素)或动画top
/right
/bottom
/left
值以在屏幕上和屏幕外移动元素。
此外,你可以只有一个元素具有多个背景,然后动画他们的background-size
或background-position
(严格来说,切换图像,你必须同步变化的图像与变化的图像...或保持不同步为更加混乱的效果)。
您需要使用关键帧和转换来查看CSS3动画。 Start here
我正在寻找一些教程来帮助我使用CSS3动画图像,使他们看起来像一部电影。当图像正在转换时也显示一些文本。 –
关键帧动画可以做到这一切。 – Ana
- 1. Jquery使用动画效果动画效果的Flash动画文本
- 2. CSS3多重动画效果
- 3. CSS3动画旋转螺旋效果?
- 4. 使用CSS或CSS3动画的线性擦除文本效果
- 5. 使用css3关键帧动画的弹跳效果
- 6. 使用CSS3动画
- 7. 使用CSS3动画滚动
- 8. 使用jQuery复制Flash滑动效果
- 9. 如何为绘图效果设置动画效果? (最好只用css3)
- 10. 使用缓动效果控制div的左/右动画效果
- 11. Angularjs使用CSS3动画
- 12. 动画使用CSS3只
- 13. 使用css3展开动画。
- 14. 使用Javascript或CSS3动画?
- 15. 使用CSS3优化动画
- 16. 动画效果
- 17. CSS3缩放和移动动画效果img
- 18. jQuery的动画动画效果后生效,之后动画效果
- 19. 为angular2动画效果应用动画效果
- 20. css3或jQuery的不透明度动画效果
- 21. css3糟糕的动画效果(仅限Chrome)
- 22. 使用Windows.UI.Composition的其他效果内的动画效果属性
- 23. 使用css3动画的浮动按钮
- 24. 使用CSS禁用动画效果
- 25. 使用css3的选取框效果
- 26. 强制jQuery使用css3的效果
- 27. 动画效果的UITableViewCell的块动画
- 28. 使用Javascript动画SVG的动画效果
- 29. 果冻输入动画的css3技巧
- 30. 使用VBA阅读PowerPoint动画效果
按照上面给出的网站的代码尝试,想要学习如何以我自己的风格在图像中对事物进行动画处理。 –
也许我应该更清楚一点:向我们展示你的尝试。 – Shmiddty
这里你去:http://www.w3.org/TR/css3-animations/ –