css3实现大图慢慢变小 |css颜色渐变角度

/* 定义尺寸和位置 */
#my-image {
width: 500px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* 定义动画 */
#my-image:hover {
-webkit-animation: shrink 1s ease forwards;
animation: shrink 1s ease forwards;
}
/* 定义关键帧 */
@-webkit-keyframes shrink {
from { width: 500px; }
to { width: 100px; }
}
@keyframes shrink {
from { width: 500px; }
to { width: 100px; }
}

首先，大家需要定义图片的尺寸和位置。在这个例子中，大家设置图片宽度为500像素，并且将其水平居中。大家使用了相对定位和translateX属性来实现这个效果。

接下来，大家为图片定义了一个动画。当鼠标悬停在图片上时，动画触发。这个动画持续1秒，使用了缓和函数（ease），并且在完成后停留在最终状态（forwards）。

最后，大家定义了两个关键帧（from和to）。在这个例子中，大家通过更改宽度从500像素到100像素来实现了动画效果。大家在webkit和标准的animation属性中都定义了这些关键帧，以确保兼容性。

现在，大家已经成功地实现了大图慢慢变小的效果。你可以自己尝试修改代码，添加自己的风格和想法，让网站更加独特和引人注目。