✨「零切图の纯css」内容宣传展示类页面布局

前言

无意间看到vite官网页面视觉非常不错,就徒手使用vue+scss临摹了一个。AI编程虽然越来越方便了,偶尔的手敲代码也是不能丢的！如果本文能帮助到您，请点赞支持！！

用到的相关知识点

1.定义关键帧动画

动画效果说明：该动画实现了一个"弹性放大"效果，元素会从完全透明不可见（scale(0)）开始，先快速放大到比目标尺寸稍大（scale(1.1)），最后回弹到正常尺寸（scale(1)），常用于界面元素的弹性出现效果

/* 定义名为'scaleUp'的关键帧动画 */
@keyframes scaleUp { 
    0% { 
      transform: scale(0); 
      opacity: 0;  
    }  
    50% { 
      transform: scale(1.1); 
      opacity: 1; 
    }  
    100% { 
      transform: scale(1); 
      opacity: 1; 
    }
}

2.@for循环控制指令

1. 为16个.item-icon-box元素创建了一个连续的动画效果，每个元素依次延迟0.1秒播放scaleUp动画
2. 为第3、8、9、10、11这5个特定位置的元素添加了独特的背景和阴影效果
3. 其他元素（1-2,4-7,12-16）只应用基础动画效果，没有特殊样式

// 定义变量 
$total-items: 16; // 总共有16个元素需要处理 
$delay-step: 0.1s; // 每个元素动画之间的延迟时间间隔为0.1秒 
 
// 使用@for循环遍历1到16的元素 
@for $i from 1 through $total-items {
  // 选择第n个.item-icon-box元素（n从1到16）
  .item-icon-box:nth-child(#{$i}) { 
    // 应用动画效果：
    // - 使用之前定义的scaleUp动画 
    // - 动画持续时间0.5秒 
    // - 线性运动曲线 
    // - 动画延迟时间按顺序递增（第1个0.1s，第2个0.2s...第16个1.6s） 
    // - forwards表示动画完成后保持最后一帧状态 
    animation: scaleUp 0.5s linear #{$i * $delay-step} forwards;
    
    // 特殊样式规则（为特定位置的元素添加独特样式）
    
    // 当循环到第3个元素时 
    @if $i == 3 {  
      // 设置橙色渐变背景（底部30%透明，上方70%带10%橙色透明度）
      background: linear-gradient(to bottom, transparent 30%, rgba(#ff5722,0.1 ));
      // 添加橙色阴影效果 
      box-shadow: #ff5722 0 10px 20px -10px;
    }
    
    // 当循环到第8个元素时 
    @if $i == 8 {  
      // 设置蓝色渐变背景 
      background: linear-gradient(to bottom, transparent 30%, rgba(#2d6cea,0.1 ));
      // 添加蓝色阴影 
      box-shadow: #2d6cea 0 10px 20px -10px;
    }
    
    // 当循环到第9个元素时 
    @if $i == 9 {  
      // 设置黄色渐变背景 
      background: linear-gradient(to bottom, transparent 30%, rgba(#f9e625,0.1 ));
      // 添加黄色阴影 
      box-shadow: #f9e625 0 10px 20px -10px;
    }
    
    // 当循环到第10个元素时 
    @if $i == 10 {  
      // 设置浅蓝色渐变背景 
      background: linear-gradient(to bottom, transparent 30%, rgba(#3e97d5,0.1 ));
      // 添加浅蓝色阴影 
      box-shadow: #3e97d5 0 10px 20px -10px;
    }
    
    // 当循环到第11个元素时 
    @if $i == 11 {  
      // 设置紫色渐变背景 
      background: linear-gradient(to bottom, transparent 30%, rgba(#735af2,0.1 ));
      // 添加紫色阴影 
      box-shadow: #735af2 0 10px 20px -10px;
    }
  }
} 

3.CSS Animation说明

animation: scaleUp 0.5s linear xx forwards; // 使用过渡动画

完整语法解析

animation: [name] [duration] [timing-function] [delay] [fill-mode];

• name: 动画名称
• duration: 持续时间
• timing-function: 速度曲线
• delay: 延迟时间
• fill-mode: 填充模式(forwards 保持动画最后一帧的状态)

在线Demo

下方可在线查看Demo完整代码