CSS3实现徽章翻转效果

最新推荐文章于 2024-07-06 19:58:00 发布

Joyce的前端日常

最新推荐文章于 2024-07-06 19:58:00 发布

阅读量2k

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/joyce_lcy/article/details/77936305

版权

本文介绍了如何使用CSS3实现徽章的翻转动画效果。首先，详细分析了徽章从空白状态经过X轴58度后仰到0度，Y轴135度翻转至0度，以及宽度逐渐变大的过程。接着，讲解了在动画的后期阶段，通过调整透明度使得带有内容的徽章图片逐渐显现。最后，通过设置animation-fill-mode属性确保动画结束后徽章停留在页面上。

摘要由CSDN通过智能技术生成

1. 需求

利用下面两张图片素材，实现徽章由小变大，从反面翻转到正面，最终显示出徽章上的图案的动画效果。

这里写图片描述

2. 分析

(1) 一个空白的徽章呈现为如图所示：

这里写图片描述

 transform: rotateX(58deg) rotateY(-135deg);

(2) X由后仰的58度恢复到0度，Y向右翻转135度回到0度，宽度变大

transform: rotateX(0deg) rotateY(0deg);

(3) 在动画的最后一段时间，缓慢显示出有画面的徽章图片

将有徽章内容的图片绝对定位到空白徽章同样的位置，开始设置不可见opacity: 0，在徽章发生翻转时，此图片也跟着父容器一起翻转，在动画的最后一段时间，渐进将opacity设置为1，显示出来。

(4) 动画最后一帧的效果，最终停留在页面上

animation-fill-mode: forwards;

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。默认值为none。

值	描述
none	不改变默认行为
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

3. 实现

<div class="game1_cuccess_badge">
    <div class="badge-img-container">
        <img src="img/badge-blank.png" width="100%"> 
        <img class="img-real" src="img/success-badge.png" width="100%">
    </div>
</div>

/*忽略前缀，完整代码参见最后*/
.game1_cuccess_badge{
    width: 100%;
    text-align: center;
}
.img-real{
    position: absolute;
    left: 0;
    top: 0;
    animation: animationBadgeReal ease-in 1s;
    animation-fill-mode: forwards;
}
.badge-img-container{
    display: inline-block;
    width: 37%