css3闪烁跳跃 |css3文档手册 chm

.blink {
animation: blink 1s ease infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
.jump {
animation: jump 1s ease infinite;
}
@keyframes jump {
0%, 100% {
transform: translateY(0);
}
25%, 75% {
transform: translateY(-10px);
}
50% {
transform: translateY(-20px);
}
}

为了使用CSS3闪烁跳跃，在CSS中定义两个动画：一个是blink（闪烁），另一个是jump（跳跃）。闪烁动画使用opacity来控制元素的透明度，在50%的时候变为0，形成闪烁的效果。跳跃动画使用transform属性的translateY方法使元素上下跳跃。在0%和100%的时候，元素的位置不变；在25%和75%的时候，元素向上移动10px；在50%的时候，元素向上移动20px，形成跳跃的效果。

为了开始使用这些动画，大家只需要给元素一个类名就可以了。例如，给一个文字添加闪烁动画的类名为“blink”，添加跳跃动画的类名为“jump”。

这段文字将会闪烁css共享厨房，信息表css样式，固定漂浮的办法css，css怎么设置文字对齐，li的背景图css，访问别人的wamp没有css，css3文档手册 chm

在以上例子中，大家使用了span标签和img标签，分别给它们添加了blink和jump类名，这样它们就会动起来了。通过这些代码和类名，大家就可以轻松地给页面元素增加生动性，使网页更富有动感和趣味性。