简单的@keyframes效果

最新推荐文章于 2025-07-15 19:59:02 发布

原创最新推荐文章于 2025-07-15 19:59:02 发布 · 942 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了使用DW开发工具实现@keyframes动画效果的过程，通过设置关键代码如`animation: wobble 30s ease;`，创建了简单的动画。文章鼓励读者尝试不同百分比和细节设置，以达到理想的效果。

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

@keyframes效果
开发工具与关键技术：DW中的@keyframes规则效果
作者：冉冉
撰写时间：2019年1月18日

@keyframes是animation中的一个规则，可以实现一些动画效果的图片切换
一小段简单的HTML代码：

在这里插入图片描述
然后写一些基本的样式：

其中animation：wobble 30s ease ，3s是关键代码。
然后下面来实现动画效果：

截图中的百分比比较密，如果不想写那么多的话可以更简洁一点，如果想玩一下的话可以写更详细移动，随个人喜欢；当然截图中的图片也可以换成颜色。
怎么样？是不是觉得很简单？！赶快学起来吧！