码迷,mamicode.com
首页 > 移动开发 > 详细

Create Movement Using CSS Animation---设计一个盒子上下左右移动,结合animation, @keyframe, position (上下左右的offset)

时间:2019-10-25 16:46:52      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:amp   height   上下   pix   example   for   specified   tar   when   

When elements have a specified position, such as fixed or relative, the CSS offset properties rightlefttop, and bottom can be used in animation rules to create movement.

As shown in the example below, you can push the item downwards then upwards by setting the top property of the 50% keyframe to 50px, but having it set to 0px for the first (0%) and the last (100%) keyframe.

 1 @keyframes rainbow {
 2   0% {
 3     background-color: blue;
 4     top: 0px;
 5   }
 6   50% {
 7     background-color: green;
 8     top: 50px;
 9   }
10   100% {
11     background-color: yellow;
12     top: 0px;
13   }
14 }

 

练习题目:

Add a horizontal motion to the div animation.

Using the left offset property, add to the @keyframes rule so rainbow starts at 0 pixels at 0%, moves to 25 pixels at 50%, and ends at -25 pixels at 100%.

Don‘t replace the top property in the editor - the animation should have both vertical and horizontal motion.

原本代码是上下移动,加上左右移动

 

练习代码:

 1 <style>
 2   div {
 3     height: 40px;
 4     width: 70%;
 5     background: black;
 6     margin: 50px auto;
 7     border-radius: 5px;
 8     position: relative;
 9   }
10 
11   #rect {
12     animation-name: rainbow;
13     animation-duration: 4s;
14   }
15 
16   @keyframes rainbow {
17     0% {
18       background-color: blue;
19       top: 0px;
20       left: 0px;
21     }
22     50% {
23       background-color: green;
24       top: 50px;
25       left: 25px;
26     }
27     100% {
28       background-color: yellow;
29       top: 0px;
30       left: -25px;
31     }
32   }
33 </style>
34 
35 <div id="rect"></div>

 

效果:

靠想象吧,动图我不会弄上来

一个上下左右移动的框子,带点颜色

Create Movement Using CSS Animation---设计一个盒子上下左右移动,结合animation, @keyframe, position (上下左右的offset)

标签:amp   height   上下   pix   example   for   specified   tar   when   

原文地址:https://www.cnblogs.com/jane-panyiyun/p/11738561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!