web端-12宫格抽奖

最新推荐文章于 2024-09-30 15:42:36 发布

Ted473

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量324

点赞数 2

文章标签：前端 css

本文链接：https://blog.csdn.net/chang_xixi/article/details/142359074

版权

实现效果:

html部分:

<div class="grid-container">
 // 循环渲染12个格子
 // rewardArr = [1,2,3,4,5,6,7,8,9,10,11,12] 循环数组自行定义
 <div v-for="(item,i) in rewardArr" :key= i :id="'box'+(i+1)" class="grid-item">
  <div class="item-name">{{item}}</div>
 </div>
 // 中间抽奖按钮
 <div class="center-button">
   <img class="start-btn" src="./halloween/strart.png">
   <div class="tiems">
    You have <span>0</span> times
   </div>
 </div>
</div>

css部分:

.grid-container {
    display: grid; // 直接利用 网格布局
    justify-content: center;
    gap: 4px; // 定义了网格线之间的间隔，即行与行之间以及列与列之间的间距
    width: 375px;
    margin-top: 24px; // 自行定义
}

.grid-item {
    width: 82px;
    height: 100px;
    font-size: 24px;
    background: linear-gradient( 0, #E7D6FF 0%, #FFFFFF 100%);
    border-radius: 10px 10px 10px 10px;
}

// 定义盒子顺时针顺序的位置
// 例:'grid-column: 4; grid-row: 2',即为第二行的第四个格子

#box1  { grid-column: 1; grid-row: 1;background: linear-gradient( 180deg, #FFFFFF 0%, #FFA0F6 100%);border-radius: 22px 10px 10px 10px; }
#box2  { grid-column: 2; grid-row: 1; }
#box3  { grid-column: 3; grid-row: 1; }
#box4  { grid-column: 4; grid-row: 1;background: linear-gradient( 180deg, #FFFFFF 0%, #FFA0F6 100%);border-radius: 10px 22px 10px 10px; }
#box5  { grid-column: 4; grid-row: 2; }
#box6  { grid-column: 4; grid-row: 3; }
#box7  { grid-column: 4; grid-row: 4;background: linear-gradient( 180deg, #FFFFFF 0%, #FFA0F6 100%);border-radius: 10px 10px 22px 10px; }
#box8  { grid-column: 3; grid-row: 4; }
#box9  { grid-column: 2; grid-row: 4; }
#box10 { grid-column: 1; grid-row: 4;background: linear-gradient( 180deg, #FFFFFF 0%, #FFA0F6 100%);border-radius: 10px 10px 10px 22px; }
#box11 { grid-column: 1; grid-row: 3; }
#box12 { grid-column: 1; grid-row: 2; }

.center-button {
  grid-column: 2 / span 2; // 跨越两列
  grid-row: 2 / span 2; // 跨越两行
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #5A2B9B;
  border-radius: 10px 10px 10px 10px;
}

// 其余样式自行定义

实现原理:

主要是利用了display: grid属性的网格布局,

#box1... grid-column和grid-row控制着12个格子的布局顺序

grid-column: 2 / span 2：定义了元素所在的网格列及其跨度。
2 表示元素将从第二列的起始边线开始放置。
span 2 表示元素将跨越两列的宽度。就是元素将占据从第二列的起始边线到第四列的结束边线的位置。

grid-row: 2 / span 2：定义了元素所在的网格行及其跨度。
2 表示元素将从第二行的起始边线开始放置。
span 2 表示元素将跨越两行的高度。就是元素将占据从第二行的起始边线到第四行的结束边线的位置。