CSS 2D动画效果

最新推荐文章于 2022-10-23 23:41:31 发布

Bear

最新推荐文章于 2022-10-23 23:41:31 发布

阅读量855

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML与CSS 文章标签： css 2D

本文链接：https://blog.youkuaiyun.com/bear_huangzhen/article/details/101025460

本文介绍了三个CSS 2D动画示例：盾牌动画、楚乔传旋转动画和音乐盒子，展示了如何使用CSS创建丰富的2D动态效果。

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

示例1（盾牌动画）：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盾牌动画</title>
    <link rel="shortcut icon" href="bkq.ico"  type="image/x-icon"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #ff3040;
        }
        div {
            width: 440px;
            margin: 100px auto;
        }
        div img {
            transition: all 1s;
        }
        div img:nth-child(1) {
            transform: translate(200px,-100px) rotate(60deg);
        }
        div img:nth-child(2) {
            transform: translate(-300px,-150px) rotate(90deg);
        }
        div img:nth-child(3) {
              transform: translate(-100px,180px