Create Movement Using CSS Animation---设计一个盒子上下左右移动,结合animation, @keyframe, position (上下左右的offset)(代码
Posted jane_panyiyun
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Create Movement Using CSS Animation---设计一个盒子上下左右移动,结合animation, @keyframe, position (上下左右的offset)(代码相关的知识,希望对你有一定的参考价值。
When elements have a specified position
, such as fixed
or relative
, the CSS offset properties right
, left
, top
, 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)(代码的主要内容,如果未能解决你的问题,请参考以下文章
Create Power BI visuals by using Python
[Vuex] Create a Vuex Store using TypeScript
Create and format Word documents using R software and Reporters package
SCCM2107集成MDT控制台无Create Boot image using MDT选项
[Python] Create a minimal website in Python using the Flask Microframework