网页前端实现简单的动画效果

最新推荐文章于 2025-06-14 10:43:39 发布

在你隔壁的香飘飘

最新推荐文章于 2025-06-14 10:43:39 发布

阅读量988

点赞数

CC 4.0 BY-SA版权

分类专栏： html基础入门简单动画基础文章标签： html css

本文链接：https://blog.youkuaiyun.com/ZYuAYuLuuu/article/details/117704263

本文通过实例展示了如何利用HTML和CSS中的@keyframes规则，实现一个粉色圆形变为黄色方形，再变为橙色圆形的往返动画效果。动画在4秒内完成，包括颜色变化和形状转换，背景为绿色，并在屏幕中央发生转换。

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

使用 @keyframes实现简单的动画效果。

粉色的圆形在绿色的背景下水平向右移动，边移动便渐变，移动到屏幕中央时变换成黄色方形，再向右移动到屏幕边缘时，变为橙色圆形。

然后同样变幻着往反方向，永不停止。往返时间为4秒。效果截图如下：

本次练习主要考察动画效果的申明和使用，代码附下，欢迎大家评论指正！

<!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>
    #bo1 {
        width: 1247px;
        height: 600px;
        background-color: rgb(0, 240, 220);
    }