新年开始了,要努力,本博客开始 2024 年招商,欢迎各位想推广产品的老板投广告,目前定价 4800/年,亦可增加评测文章、教学文章配合,详情可与我联系。具体详情更新在 本站广告 2024 年招商。
好几个月之前,我遇到这样一个需求:
这个东西叫作 Emotional Scale,是一大堆描述情绪的形容词,存在从积极到消极的渐进关系,老板希望我们用颜色给予它们比较明显的区分。于是我就想到这样一种表现方式:
- 用网格化来布局每个形容词
- 给它们添加从上至下的渐变背景
- 再让 ChatGPT 给每个形容词选一个 emoji
最后一项不用多说,直接丢给 ChatGPT 就行。这里重点说下前面两个。
网格化布局用 display:grid
+ grid-template-columns: repeat(N, minmax(0, 1fr))
即可,其中 N 可以根据宽度调整成需要的列数。
接下来处理渐变。这里的难点在于,每个小格子是独立的,要维持统一的渐变比较困难。我想到两个方式:
- 画一个大的渐变背景,然后用
clip-path
抠 - 通过计算的方式给每个小格子加渐变背景
后面我决定选择第二种方式。我总共有 38 个格子,一行 4 个的话,就是 10 行;有 6 个颜色,刚好每两行是一个过渡。于是一行就应该是 0 -> 50%,如何渐变一半呢?我尝试了一下,发现可以用 -100% 和 200% 来做。
于是我就配合 Vue 开发了这个组件:
<script lang="ts" setup>
function getBgColor(index: number): string {
const colors = ['#1B4397', '#648EF7', '#5DC264', '#FFAE43', '#F15146', '#b91c1c']; // 总共 6 个颜色
const start = index / 8 >> 0; // 8个=2行,就是两行完成两个颜色的过渡
const end = start + 1;
const line2 = index % 8 >= 4;
// 借助 CSS 变量完成过渡效果
return `--tw-gradient-stops: ${colors[start]} ${line2 ? '-100%' : ''}, ${colors[end]} ${line2 ? '' : '200%'}`;
}
</script>
<template lang="pug">
.grid.grid-cols-4.gap-2
label.flex.flex-col.justify-center.items-center.bg-base-100.rounded-3xl.w-full.aspect-square.cursor-pointer.bg-gradient-to-b(
v-for="([label, face], index) in todayDoingsScale"
class="hover:bg-base-200"
:style="getBgColor(index)"
:key="index"
@click="doSelect"
)
input.hidden(
type="radio"
name="feel"
:value="label"
v-model="score"
)
</template>
最终完成的效果就如同上面截图所示。
CSS 作为前端开发的必备技能,搞起来别有一番乐趣。新特性不断被添加进来,就有越来越多的功能可以实现,有越来越多的功能可以更容易的实现。相信我们下一步的开发环境和产品体验会更好。
如果各位读者对上面的 CSS 实现有什么问题,或者有其它关于 CSS 的问题,欢迎留言提问。
发表回复