CSS background-image过渡效果实例页面

CSS代码：

.example {
    width: 200px; height: 200px;
    border: 0;
    /* 外链文件也是支持的 */
    /* background: url(icon-move-up.svg) no-repeat center / 100% 100%; */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctitle%3Emove-up%3C/title%3E%3Cpath d='M16.016 1.157l-15.015 15.015h9.009v16.016h12.012v-16.016h9.009z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / 100% 100%;
    transition: background-image 1s;
}
.example:hover,
.example:active {
    /* 外链文件也是支持的 */
    /* background-image: url(icon-move-down.svg); */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctitle%3Emove-down%3C/title%3E%3Cpath d='M16.016 31.187l15.015-15.015h-9.009v-16.016h-12.012v16.016h-9.009z'%3E%3C/path%3E%3C/svg%3E");
}

HTML代码：

<button class="example"></button>