css动画 从左向右扩散 |css树叶

/* 定义元素的基本样式 */
.box{
width: 100px;
height: 100px;
background-color: #f00;
position: relative;
animation: expand 1s ease-out forwards;
}
/* 定义动画 */
@keyframes expand {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 100px;
height: 100px;
opacity: 0;
transform: translateX(100%);
}
}

上面的代码中，首先定义了一个名为“box”的元素，宽高为100像素，背景颜色为红色。同时，元素的position属性设置为relative，这意味着其他元素可以在它的基础上定位。

接下来，使用@keyframes定义了一个名为“expand”的动画，这个动画从0%的状态开始，也就是元素的宽高为0，透明度为1。在100%的状态时，元素的宽高已经变成100像素，透明度为0，同时通过translateX()将元素向右移动了自身宽度的距离，也就是向右扩散。

最后，在.box的CSS样式中加入了animation属性，将先前定义的“expand”动画绑定到元素上，并以ease-out的缓动效果播放。

使用CSS动画可以让网站更加生动，增加交互性，提高用户体验。开发者可以根据需要定义各种有趣的动画效果，来让网站更加吸引人。从左向右扩散的动画只是众多动画效果中的一种，开发者可以根据自己的需求使用不同的动画效果来优化网站。