CSS 红包侧身动画

—Qeyser

于 2025-05-26 18:03:19 发布

阅读量98

点赞数 2

分类专栏： Html CSS CSS动画文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_42581036/article/details/148236239

版权

Html 同时被 3 个专栏收录

17 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

CSS动画

1 篇文章

订阅专栏

  <image class="red-packet " style="width:150rpx;height: 150rpx;" src="/static/images/red_packet_btn1.png" mode="" />


.red-packet {
    width: 100px;
    /* 红包的宽度 */
    height: 150px;
    /* 红包的高度 */
    background-size: cover;
    background-position: center;
    animation: tiltAnimation 1s infinite alternate;
    /* 应用动画 */
}

/* 定义动画 */
@keyframes tiltAnimation {
    0% {
        transform: rotateY(0deg);
        /* 开始时红包不倾斜 */
    }

    100% {
        transform: rotateY(50deg);
        /* 结束时红包倾斜30度 */
    }
}