图片拉伸实现填充动画

 

图片拉伸实现填充动画

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

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;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgdyxj.html