CSS interpolate-size实现width:fit-content动画实例页面

回到相关文章 »

效果：

代码：

CSS代码：

figure {
    width: 320px;
    padding: 1em;
    transition: width .25s;
    interpolate-size: allow-keywords;
    background: deepskyblue;
}
.active + figure {
    width: fit-content;
}

HTML代码：

<button onClick="this.classList.toggle('active');">点击我</button>
<figure>
    <img src="html-book.jpeg" width="256" />
</figure>