css开红包金币旋转

大家好，今天我来给大家介绍如何使用CSS制作一个开红包金币旋转的效果。

    .red-envelope {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #f00;
            animation: rotate 2s linear infinite;
    }
        .coin {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ff0;
            animation: rotate 2s linear infinite reverse;
    }
        @keyframes rotate {
        from {
                transform: rotate(0);
        }
        to {
                transform: rotate(360deg);
        }
    }
    

首先，我们创建一个类名为red-envelope的元素作为红包的容器，设置它的宽高和圆角，背景色为红色。接着，我们给这个容器添加一个animation动画，使其在2秒内以线性速度无限旋转。

接下来，我们再在红包容器中创建一个类名为coin的元素，表示金币。将这个元素定位在红包容器的中心，设置它的宽高和圆角，背景色为黄色。同样的，我们给这个元素添加一个类似的动画，不过要将方向改为反向。

最后，我们定义一个名为rotate的关键帧，将红包容器和金币元素的旋转效果一致。从0度开始旋转，到360度停止旋转，实现一个完整的旋转循环。

以上就是制作开红包金币旋转效果的CSS代码，感谢大家的阅读。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！