• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# background-position样式动画
2
3
4
5通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。
6
7
8```html
9<!-- xxx.hml -->
10<div class="container">
11  <div class="content"></div>
12  <div class="content1"></div>
13</div>
14```
15
16
17```css
18/* xxx.css */
19.container {
20  height: 100%;
21  background-color:#F1F3F5;
22  display: flex;
23  flex-direction: column;
24  justify-content: center;
25  align-items: center;
26  width: 100%;
27}
28.content{
29  width: 400px;
30  height: 400px;
31  /* 不建议图片长宽比为1:1 */
32  background-image: url('common/images/bg-tv.jpg');
33  background-size: 100%;
34  background-repeat: no-repeat;
35  animation: change 3s infinite;
36  border: 1px solid black;
37}
38.content1{
39  margin-top:50px;
40  width: 400px;
41  height: 400px;
42  background-image: url('common/images/bg-tv.jpg');
43  background-size: 50%;
44  background-repeat: no-repeat;
45  animation: change1 5s infinite;
46  border: 1px solid black;
47}
48/* 背景图片移动出组件 */
49@keyframes change{
50  0%{
51    background-position:0px top;
52  }
53  25%{
54    background-position:400px top;
55  }
56  50%{
57    background-position:0px top;
58  }
59  75%{
60    background-position:0px bottom;
61  }
62  100%{
63    background-position:0px top;
64  }
65}
66/* 背景图片在组件内移动 */
67@keyframes change1{
68  0%{
69    background-position:left top;
70  }
71  25%{
72    background-position:50% 50%;
73  }
74  50%{
75    background-position:right bottom;
76  }
77  100%{
78    background-position:left top;;
79  }
80}
81```
82
83
84> **说明：**
85> background-position仅支持背景图片的移动，不支持背景颜色（background-color）。
86
87![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)
88
89
90## 相关实例
91
92针对background-position样式动画开发，有以下相关实例可供参考：
93
94- [`JsComponentCollection`：JS组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/code/UI/JsComponentClollection/JsComponentCollection)