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

学习链接:B站视频

演示

CSS动画2----- 移动端盒子旋转显示文字_第1张图片

代码

<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;
      }
    }

你可能感兴趣的:(前端动画特效)