在网站设计中,动画效果能够为网站增添视觉美感,吸引用户的注意力。今天,我们来讲一下如何用CSS实现一个上下跳动的动画效果。 /*设置动画效果*/ @keyframes bounce{ 0%{trans
在网站设计中,动画效果能够为网站增添视觉美感,吸引用户的注意力。今天,我们来讲一下如何用CSS实现一个上下跳动的动画效果。
/*设置动画效果*/ @keyframes bounce{ 0%{transform: translateY(0);} 50%{transform: translateY(-10px);} 100%{transform: translateY(0);} } /*应用动画效果*/ .bounce{ animation: bounce 1s infinite; }
代码中的关键在于两段CSS代码。首先,@keyframes
规则会定义一个在动画过程中逐步改变样式的序列。这里我们定义了一个由三个关键帧组成的动画:
0%{transform: translateY(0);} 50%{transform: translateY(-10px);} 100%{transform: translateY(0);}
这里我们使用transform
属性中的translateY()
方法来实现上下移动的效果。
接下来,我们将这个动画应用到HTML元素上,这里我们制作了一个跳动的球:
<div class="bounce"></div>
这样就完成了一个简单的上下跳动动画效果。
粉丝
0
关注
0
收藏
0