css3卡片前后无限循环翻转效果

入冉心

已于 2023-10-11 09:02:54 修改

阅读量778

点赞数 2

CC 4.0 BY-SA版权

文章标签： css3 css 前端

于 2023-10-06 21:56:06 首次发布

本文链接：https://blog.csdn.net/rr20060119/article/details/133622639

博客介绍了使用CSS实现卡片无限循环翻转动画的方法。通过通配符选择器消除默认样式影响，定义容器和卡片样式，设置透视效果、过渡动画等。还分别设置卡片正背面样式，利用线性渐变设置背景，最终实现卡片从正面到背面再返回的无限循环翻转。

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

使用通配符选择器 * 将页面中所有元素的外边距和内边距设置为0，以避免默认样式的影响。
定义了一个 .container 类，用于设置容器的样式。容器宽度为150px，高度为200px，使用相对定位并设置透视效果（perspective）为1000px，以实现翻转动画效果。
.card 类定义了每个卡片的样式。设置卡片的宽度和高度为100%，使用绝对定位，保持三维变换效果（transform-style: preserve-3d），并设置过渡动画（animation）为名称为 flip-animation 的动画，持续时间为4秒，无限循环播放。
.front 和 .back 类分别表示卡片的正面和背面，并设置它们的样式。正面和背面都使用绝对定位，设置不可见的背面（backface-visibility: hidden），并使用弹性布局（Flexbox）将内容居中显示，并设置文字颜色为白色（#fff）。
正面的背景使用线性渐变（linear-gradient）设置为从红色到黄色的渐变；背面的背景使用线性渐变设置为从绿色到白色的渐变。

      * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 150px;
            height: 200px;
            position: relative;
            perspective: 1000px;
        }

        .card {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
            animation: flip-animation 4s infinite;
        }

        .front, .back {
            width: 100%;
            height: 100%;
            position: absolute;
            backface-visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }

        .front {
            transform: rotateY(0deg);
            background-image: linear-gradient(109.6deg,
                    rgba(245, 56, 56, 1) 11.2%,
                    rgba(234, 192, 117, 1) 78%);
            background-color: aquamarine;
        }

        .back {
            transform: rotateY(180deg);
            background-image: linear-gradient(117deg,
                    rgba(123, 216, 96, 1) 39.2%,
                    rgba(255, 255, 255, 1) 156.2%);
            background-color: bisque;
        }

        @keyframes flip-animation {
            0%, 100% {
                transform: rotateY(0deg);
            }
            50% {
                transform: rotateY(180deg);
            }
        }

卡片会无限循环地执行翻转动画，通过设置 .card 类的 animation 属性为 flip-animation，持续时间为4秒，并且设置为无限循环播放（infinite）。这样卡片就会不断地从正面翻转到背面，再从背面翻转回正面，形成无限循环翻转的效果。
正面和背面的内容可以通过修改 <div class="front"> 和 <div class="back"> 的文本内容来更改。
效果如下：