[分享]css3控制图片从小到大

CSS3是一种能够让我们的网页看起来更为美轮美奂的技术。其中的一个特性就是可以用它来控制图片从小到大的过程。本文将会为大家详细介绍该功能的实现。/ 首先，我们需要设置图片元素的初始大小 / img{ ...

CSS3是一种能够让我们的网页看起来更为美轮美奂的技术。其中的一个特性就是可以用它来控制图片从小到大的过程。本文将会为大家详细介绍该功能的实现。

/* 首先，我们需要设置图片元素的初始大小 */
img{
    width: 100px;
    height: 100px;
}

/* 接下来，使用CSS3动画让图片从小到大 */
img:hover{
    animation: zoom-in 1s ease forwards;
}

/* 定义动画 */
@keyframes zoom-in{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.2);
    }
} 

在上面的代码中，我们首先设置了图片元素的初始大小为100像素。当鼠标悬停在该图片上时，我们就应用了CSS3动画效果：使图片慢慢地从初始大小变为1.2倍的大小。

使用CSS3动画功能是相当简单的，只需要定义好关键帧和时间间隔即可。codeinwp网站上有许多艺术家利用CSS3动画制作出了美丽的图片，你也可以通过尝试来发挥自己的创造力。