1# background-position样式动画 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。 10 11 12```html 13<!-- xxx.hml --> 14<div class="container"> 15 <div class="content"></div> 16 <div class="content1"></div> 17</div> 18``` 19 20 21```css 22/* xxx.css */ 23.container { 24 height: 100%; 25 background-color:#F1F3F5; 26 display: flex; 27 flex-direction: column; 28 justify-content: center; 29 align-items: center; 30 width: 100%; 31} 32.content{ 33 width: 400px; 34 height: 400px; 35 /* 不建议图片长宽比为1:1 */ 36 background-image: url('common/images/bg-tv.jpg'); 37 background-size: 100%; 38 background-repeat: no-repeat; 39 animation: change 3s infinite; 40 border: 1px solid black; 41} 42.content1{ 43 margin-top:50px; 44 width: 400px; 45 height: 400px; 46 background-image: url('common/images/bg-tv.jpg'); 47 background-size: 50%; 48 background-repeat: no-repeat; 49 animation: change1 5s infinite; 50 border: 1px solid black; 51} 52/* 背景图片移动出组件 */ 53@keyframes change{ 54 0%{ 55 background-position:0px top; 56 } 57 25%{ 58 background-position:400px top; 59 } 60 50%{ 61 background-position:0px top; 62 } 63 75%{ 64 background-position:0px bottom; 65 } 66 100%{ 67 background-position:0px top; 68 } 69} 70/* 背景图片在组件内移动 */ 71@keyframes change1{ 72 0%{ 73 background-position:left top; 74 } 75 25%{ 76 background-position:50% 50%; 77 } 78 50%{ 79 background-position:right bottom; 80 } 81 100%{ 82 background-position:left top; 83 } 84} 85``` 86 87 88> **说明：** 89> 90> background-position仅支持背景图片的移动，不支持背景颜色（background-color）。 91 92
