CSS 2D动画效果

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

原创

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

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #2D

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

示例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