CSS动画2----- 移动端盒子旋转显示文字

最新推荐文章于 2023-04-09 11:16:36 发布

独坐空山后

最新推荐文章于 2023-04-09 11:16:36 发布

阅读量465

点赞数

CC 4.0 BY-SA版权

分类专栏：前端动画特效文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/pig_is_duck/article/details/106549440

前端动画特效专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了一个使用CSS实现的动画案例，包括文字透明度变化、盒子缩放旋转、背景颜色渐变及圆角变换等效果。通过关键帧动画，展示了如何在不同时间点设置元素的状态，实现了流畅且富有创意的视觉体验。

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

学习链接：B站视频

演示

在这里插入图片描述

代码

<body>
    
  <main>
  </main>
    
</body>

    main {
      width: 100vw;
      height: 100vh;
      background-color: #34495e;
      transform: scale(0);  /* 设置缩放刚开始为0 */ 
      animation-name: scale, background, radius; /* 盒子添加动画名称 */
      animation-duration: 2s, 3s, 2s;  /* 设置每个动画的时间 */
      animation-fill-mode: forwards;  /* 设置动画状态在最后定格 */

      display: flex;
      align-items: center;
      justify-content: center;
    }
    main::after {   /* 设置文字伪元素 */
      content: '鸭鸭最帅';
      font-size: 2em;
      color: #ffffff;
      opacity: 0;
      animation-name: opacity;    /* 文字添加动画名称 */
      animation-duration: 2s;     /* 设置动画的时间 */
      animation-delay: 3s;        /* 设置动画延迟时间 */
      animation-fill-mode: forwards; /* 设置动画状态在最后定格 */
    }

    @keyframes opacity { /* 定义关键帧: 透明度 */
      to {
        opacity: .8;
      }
    }

    @keyframes scale {  /* 定义关键帧: 缩放，旋转 */
      25% {
        transform: scale(0.5);
      } 
      50% {
        transform: scale(1) rotate(360deg);
      }
      75% {
        transform: scale(0.5);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes background { /* 定义关键帧:颜色 */
      25% {
        background-color: #2ecc71;
      } 
      50% {
        background-color: #f1c40f;
      }
      75% {
        background-color: #8e44ad;
      }
      100% {
        background-color: #e74c3c;
      }
    }

    @keyframes radius { /* 定义关键帧: 圆角 */
      25% {
        border-radius: 50%;
      } 
      50% {
        border-radius: 0;
      }
      75% {
        border-radius: 50%;
      }
      100% {
        border-radius: 0;
      }
    }