图片拉伸实现填充动画

 

如上图所示展示的是图片高度不同的拉伸效果，可用于控件开发中填充动画。下面详细介绍如何实现当前效果，参考地址：

https://blog.csdn.net/weixin_34086545/article/details/112571405

2.原理

 

将当前图片分为九宫格区域，其中左上、右上、左下、右下为固定区域，将其余五个区域进行高度或宽度的拉伸达到拉伸而不变形的效果。

要实现九宫格方法还需要借助CSS中关于border的样式属性：

2.1 border-image-source

说明：引用背景图片

使用：border-image-source: url(./circle.jpg)

2.2 border-image-width

说明：代表上，右，底部，左，两侧向内距离,四个距离可以是相同的值，也可以分别进行设置，设置宽度的顺序为上右下左。border-image-width需要配合border-width的宽度设置达成九宫格，如下所示白色半透明区域通过border-width的宽度设置，也是这一部分通过指定容器的宽和高来达到拉伸的效果。

使用：border-image-width: 100px;

2.3 border-image-slice

说明：将引用的背景图片进行切割，顶部，右，底部，左边缘的图像向内偏移，偏移区域显示引入图片，其中四角根据border-image-width设置的大小显示对应的图片尺寸，四周除四角外的四个区域可以根据设置做拉伸处理，中间区域空白显示，通过fill进行填充。

使用：border-image-slice: 100 fill;

2.4 border-image-repeat

说明：该属性规定如何延展和铺排边框图像的边缘和中间部分。

使用：border-image-repeat: stretch;

 

3.附源码样式

      width: 300px;

      height: 300px;

      border: 10px solid transparent;

      color: transparent;

      border-image-source: url(./circle.jpg);

      border-image-width: 100px;

      border-width: 50px;

      border-image-slice: 100 fill;

      border-image-repeat: stretch;