用css3实现一个会飞的小火箭案例

最新推荐文章于 2024-04-25 10:55:39 发布

原创

最新推荐文章于 2024-04-25 10:55:39 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #transform #线性渐变 #径向渐变

本文通过一个实例展示了如何使用CSS3的transform属性制作一个会飞的小火箭动画，包括缩放、平移和旋转效果。同时，讲解了线性渐变和径向渐变的应用，强调了代码顺序对实现效果的影响，并提供了详细的HTML代码和注意事项。

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

1、css3中我们常用到的一个属性是transform，也就是我们常常所用的缩放，平移，旋转等2D动画，接下来就用这几个变换个给大家做一个小案例，效果图如下：

2、html代码：

<body>
    <img src="../img/rocket.png" alt="">
</body>

3、css代码：

<style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        body {
            overflow: hidden;
            background: radial-gradient(150px at top right, red, orange, skyblue);
        }

        img {
            position: absolute;
            left: 20px;
            bottom: -200px;
        } 

        body:hover img{
            transition: all 3s;
            transform: translate(1400px, -700px)  rotate(45deg) scale(0.2);
        }
    </style>

4、注意点：

4.1