图片加载动画效果

最新推荐文章于 2025-06-25 09:01:46 发布

原创

最新推荐文章于 2025-06-25 09:01:46 发布 · 3.3k 阅读

4 ·

CC 4.0 BY-SA版权

本文探讨了如何使用CSS3动画制作图片加载效果，通过简单的HTML和CSS代码实现动态的图片排版，增强了视觉吸引力。文章介绍了涉及到的CSS3知识点，如边框属性、阴影、定位、动画函数以及旋转、扭曲和缩放等变形属性，同时提供了具体的代码示例。

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

图片选中的两种方法

开发工具与关键技术：DW CSS3旋转动画 
作者：周欢
撰写时间：2019/3/3

纯图片排版美观还是动态的图片排版美观？要是是我我会选择动态的图片排版，显得有活力。
其实在还没有接触CSS3动画之前我感觉CSS3动画很难，但是它有很有趣。在接触CSS3动画之后就觉得它好像也没那么难，而且是越发越有趣。使用CSS3动画可以做出有意思的动画效果图，看一个小页面动起来的感觉很不错，就比如自己养的小猫咪一样偶尔还能逗一逗。
我近期无聊的时候做了一个图片动画加载效果，一起瞧瞧

在这里插入图片描述
这个是图片动画加载的源代码，是不是很简单，就使用到了一个div和img标签

在这里插入图片描述
这是图片动画加载的CSS样式，对包裹img标签的div进行了一个设置，然后对img标签加了点边框（把它想象为相框），将img标签的大小和包裹住img标签的div大小设置为一样就可以达img图片自适应盒子大小了。

涉及的知识点:
border盒子的边框属性
box-shadow 盒子的阴影属性（水平方向阴影，垂直方向阴影，模糊距离，颜色）
position定位（绝对定位absolute、相对定位relative、固定定位fixed）
transform-origin 改变圆点
transition动画函数的调用（所调用的函数，动画执行时间，动画速度曲线）