css实现图片在页面中的动画特效

vGuYi

已于 2022-05-12 21:39:32 修改

阅读量2.8k

点赞数 2

文章标签：动画 css css3

于 2022-05-12 21:10:02 首次发布

本文链接：https://blog.csdn.net/vGuYi/article/details/124739940

版权

本文介绍了如何使用CSS实现图片及文字的动画特效，包括云朵、热气球和长颈鹿等元素。通过设置动画名字、时长、延迟、循环次数以及动画方向，如`infinte`和`alternate`，并利用`transform: scale()`调整元素大小，实现了元素的动态展示。同时，文章提到了使用`position: absolute`结合`transform: translate()`进行元素居中布局的方法。

摘要由CSDN通过智能技术生成

使图中的云朵,热气球,长颈鹿和中间文字实现动画特效

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行

transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

transform: scale(缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小

html部分

<body>
    <div class="box">
        <span>
            <img src="./images/yun1.png" alt="">
        </span>
        <span>
            <img src="./images/yun2.png" alt="">
        </span>
        <span>