CSS上下移动动画是一种让元素向上或向下移动的动画效果,可以为网页添加趣味性及改善页面布局逻辑。下面将介绍如何用CSS轻松实现上下移动动画。
.Box{ position: relative; top: 0; transition: top 1s ease-in-out; } .Box:hover{ top: 50px; }
如上代码所示,我们首先定义了一个class名为Box,然后将其定位为相对定位(position: relative),接着设置top属性为0,表示元素初始位置在页面顶部。在这里,我们使用transition属性来进行CSS3动画,将它的过渡效果设置为1秒,缓动函数为ease-in-out(慢进慢出)。hover伪类则表示鼠标悬停时所触发的样式,这里我们将top属性设置为50px,表示元素向下移动了50像素。至此,我们就成功地实现了一个简单的上下移动动画。
如果我们希望实现无限重复往复上下移动,可以使用CSS的@keyframes规则。
.Box{ position: relative; animation: moveupdown 2s ease-in-out infinite; } @keyframes moveupdown { 0% { top: 0; } 50% { top: 50px; } 100% { top: 0; } }
如上代码所示,我们定义了一个名为moveupdown的动画(@keyframes moveupdown),通过关键帧来控制元素的移动。在CSS中,我们可以指定在动画运行的不同时间点上元素的样式,其中0%表示动画开始的时候,而100%表示动画结束的时候。在这里,我们定义了3个关键帧,分别为0%、50%、100%。我们设置第1和3个关键帧的top值都为0,以使元素往返上下移动;第2个关键帧的top值为50px,表示元素在移动过程中是否可见。最后,我们将animation的属性值设为moveupdown,元素就会不断往返移动了。