使用border-radius属性制作图片圆角动画

border-radius属性是常见的css属性，我们用的比较多的应该就是给元素添加圆角，但是今天给大家介绍一下使用圆角属性制作动画的效果；

我们可以在这个网址获取想要的的圆角值百分比https://9elements.github.io/fancy-border-radius/；

然后使用keyframes变化圆角值来定义动画效果。

<style type="text/css">    
.bor{background: linear-gradient(42deg,#b50807 0%,#7925af 100%);width: 280px;height: 280px;margin: 200px auto;    
border-radius: 69% 31% 42% 58% / 41% 47% 53% 59%;transition: .5s;background: url(https://www.umming.com/content/uploadfile/201911/21141573448463.jpg) no-repeat center;background-size: cover;animation: example 10s linear infinite    
}    
@keyframes example {    
0% {border-radius: 69% 31% 42% 58% / 41% 47% 53% 59% }    
50% {border-radius: 46% 54% 51% 49% / 63% 51% 49% 37%}    
100% {border-radius: 69% 31% 42% 58% / 41% 47% 53% 59%}    
}
</style>