制作图片动画实践-优快云博客

本文链接：https://blog.youkuaiyun.com/DecYuannnn/article/details/125552670

这篇博客展示了如何通过编程实现图片动画的示例效果，包括相关的代码展示，内容专注于动态图像的创建和处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例效果：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
</head>
<style>
    #box {
        position: relative;
        padding-top: 100px;
        margin-left: 150px;
    }

    #box2{
            position:absolute;
            left: 160px;
            top: 280px; 
        }

    #a {
        position: absolute;
    }

    #b {
        position: absolute;
        left: 250px;
    }

    #c {
        position: absolute;
        left: 500px;
    }

    #d {
        position: absolute;
        left: 750px;
    }

    img {
        border-radius: 10px;
        height: 150px;
        width: 200px;
    }
    img:hover{
        animation: scaleDraw 0.7s ease-in-out ;
    }

    @keyframes scaleDraw {
        /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
        10% {
            transform: scale(1);
            /*放大1.1倍*/
        }
        20% {
            transform: scale(0.7,1.3);
            /*开始为原始大小*/
        }
        /* 45% {
            transform: scale(1);
            /*放大1.1倍*/
        /* } */ 
        50% {
            transform: scale(1.3,1);
        }
        60% {
           transform: scale(0.9,1.15);
        }
        70% {
            transform: scale(1.15,1);
        }
        80% {
            transform: scale(1);
        }
    }
</style>

<body>
    <div id="box">
        <div id="a">
            <img src="图片排列/m1.jpg">
        </div>
        <div id="b">
            <img src="图片排列/m2.jpg">
        </div>
        <div id="c">
            <img src="图片排列/m3.jpg">
        </div>
        <div id="d">
            <img src="图片排列/m4.jpg">
        </div>
    </div>
    <div id="box2">
        <span style="margin: 50px;">猫和老鼠</span>
        <span style="margin: 140px;">猫和老鼠</span>
        <span style="margin: 45px;">猫和老鼠</span>
        <span style="margin: 135px;">猫和老鼠</span>
    </div>

</body>

</html>

实现效果：