Siyuan Yin
Siyuan Yin
hiahiahia

๐ŸŽจ ๅก็‰‡ๅฐ้ขๆธๅ˜้…็ฝฎๆŒ‡ๅ—

๐ŸŽจ ๅก็‰‡ๅฐ้ขๆธๅ˜้…็ฝฎๆŒ‡ๅ—

ๅฝ“ๅ‰้…็ฝฎ

ไฝ ็š„ๅšๅฎขๅก็‰‡ๅฐ้ข็Žฐๅœจไฝฟ็”จไธค็งๆธๅ˜้ขœ่‰ฒ่ฝฎๆตๆ˜พ็คบ๏ผš

๐Ÿ”„ ่ฝฎๆตๆ–นๆกˆ

ๅก็‰‡ไฝ็ฝฎ ๆธๅ˜้…่‰ฒ ้ขœ่‰ฒ็ป„ๅˆ
ๅฅ‡ๆ•ฐๅก็‰‡๏ผˆ1ใ€3ใ€5โ€ฆ๏ผ‰ ๐ŸŒŠ โ†’ ๐Ÿซ ่ฅฟ็“œ็บข โ†’ ่“่Ž“่“
ๅถๆ•ฐๅก็‰‡๏ผˆ2ใ€4ใ€6โ€ฆ๏ผ‰ ๐Ÿฅ โ†’ ๐Ÿซ ็Œ•็Œดๆกƒ็ปฟ โ†’ ่“่Ž“่“

๐Ÿ“Š ้ขœ่‰ฒไปฃ็ 

๐ŸŒŠ ่ฅฟ็“œ็บข๏ผš     #ff1744
๐Ÿฅ ็Œ•็Œดๆกƒ็ปฟ๏ผš   #7cb342
๐Ÿซ ่“่Ž“่“๏ผš     #42a5f5

๐Ÿ’ป ไปฃ็ ๅฎž็Žฐ

1. CSS ๅ˜้‡๏ผˆ_variables.scss๏ผ‰

--gradient-card-1: linear-gradient(135deg, #ff1744 0%, #42a5f5 100%);     /* ่ฅฟ็“œ็บข โ†’ ่“่Ž“่“ */
--gradient-card-2: linear-gradient(135deg, #7cb342 0%, #42a5f5 100%);     /* ็Œ•็Œดๆกƒ็ปฟ โ†’ ่“่Ž“่“ */

2. ้€‰ๆ‹ฉๅ™จ่ง„ๅˆ™๏ผˆ_post-card.scss๏ผ‰

/* ๅฅ‡ๆ•ฐๅก็‰‡ - ่ฅฟ็“œ็บข โ†’ ่“่Ž“่“ */
.post-card:nth-child(odd) .card-cover {
  background: var(--gradient-card-1);
}

/* ๅถๆ•ฐๅก็‰‡ - ็Œ•็Œดๆกƒ็ปฟ โ†’ ่“่Ž“่“ */
.post-card:nth-child(even) .card-cover {
  background: var(--gradient-card-2);
}

3. ๅ ๅŠ ๅฑ‚ไนŸ็›ธๅบ”่ฐƒๆ•ด

  • ๅฅ‡ๆ•ฐๅก็‰‡๏ผš่ฅฟ็“œ็บข (rgba(255, 23, 68, 0.3)) + ่“่Ž“่“ๅ ๅŠ 
  • ๅถๆ•ฐๅก็‰‡๏ผš็Œ•็Œดๆกƒ็ปฟ (rgba(124, 179, 66, 0.3)) + ่“่Ž“่“ๅ ๅŠ 

๐ŸŽฏ ่ง†่ง‰ๆ•ˆๆžœ

ๅœจๅšๅฎข้กต้ขไธญ็œ‹ๅˆฐ็š„ๆ•ˆๆžœ๏ผš

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  ๅก็‰‡ 1๏ผˆๅฅ‡ๆ•ฐ๏ผ‰         โ”‚  ๅก็‰‡ 2๏ผˆๅถๆ•ฐ๏ผ‰         โ”‚
โ”‚  ๐ŸŒŠโ†’๐Ÿซ ่ฅฟ็“œโ†’่“่Ž“       โ”‚  ๐Ÿฅโ†’๐Ÿซ ็Œ•็Œดโ†’่“่Ž“       โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚  ๅก็‰‡ 3๏ผˆๅฅ‡ๆ•ฐ๏ผ‰         โ”‚  ๅก็‰‡ 4๏ผˆๅถๆ•ฐ๏ผ‰         โ”‚
โ”‚  ๐ŸŒŠโ†’๐Ÿซ ่ฅฟ็“œโ†’่“่Ž“       โ”‚  ๐Ÿฅโ†’๐Ÿซ ็Œ•็Œดโ†’่“่Ž“       โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

ๅก็‰‡ไผšๅ‘ˆ็Žฐไบคๆ›ฟ็š„ๆธๅ˜้ขœ่‰ฒ๏ผŒๅˆ›ๅปบ่ง†่ง‰ไธŠ็š„่Š‚ๅฅๆ„Ÿๅ’Œๅฑ‚ๆฌกๆ„Ÿใ€‚

๐Ÿ”ง ๅฆ‚ไฝ•ไฟฎๆ”น

ไฟฎๆ”นๅฅ‡ๆ•ฐๅก็‰‡็š„้ขœ่‰ฒ

็ผ–่พ‘ _variables.scss ไธญ็š„ --gradient-card-1๏ผš

--gradient-card-1: linear-gradient(135deg, ไฝ ็š„้ขœ่‰ฒ1 0%, ไฝ ็š„้ขœ่‰ฒ2 100%);

ไฟฎๆ”นๅถๆ•ฐๅก็‰‡็š„้ขœ่‰ฒ

็ผ–่พ‘ _variables.scss ไธญ็š„ --gradient-card-2๏ผš

--gradient-card-2: linear-gradient(135deg, ไฝ ็š„้ขœ่‰ฒ1 0%, ไฝ ็š„้ขœ่‰ฒ2 100%);

ไฟฎๆ”นๅ…จ้ƒจ้ขœ่‰ฒ

ๅช้œ€ไฟฎๆ”นไธคไธชๅ˜้‡๏ผŒๆ•ดไธช้กต้ข็š„ๅก็‰‡ไผš่‡ชๅŠจๆ›ดๆ–ฐใ€‚

๐Ÿ’ก ๅ…ถไป–้…่‰ฒๆ–นๆกˆๅปบ่ฎฎ

ๅฆ‚ๆžœไฝ ๆƒณๆ”นๅ˜้…่‰ฒ๏ผŒ่ฟ™้‡Œๆœ‰ไธ€ไบ›ๅปบ่ฎฎ็š„็ป„ๅˆ๏ผš

ๆ–นๆกˆ 1๏ผšๆš–่‰ฒ็ณป

--gradient-card-1: linear-gradient(135deg, #ffd700 0%, #ff9500 100%);  /* ่Š’ๆžœ โ†’ ๆฉ™ๅญ */
--gradient-card-2: linear-gradient(135deg, #ffb347 0%, #ff6b9d 100%);  /* ๆกƒๅญ โ†’ ่‰่Ž“ */

ๆ–นๆกˆ 2๏ผšๅ†ท่‰ฒ็ณป

--gradient-card-1: linear-gradient(135deg, #42a5f5 0%, #7cb342 100%);  /* ่“่Ž“ โ†’ ็Œ•็Œด */
--gradient-card-2: linear-gradient(135deg, #9c27b0 0%, #42a5f5 100%);  /* ่‘ก่„ โ†’ ่“่Ž“ */

ๆ–นๆกˆ 3๏ผš้ฒœ่‰ณ็ณป

--gradient-card-1: linear-gradient(135deg, #ff1744 0%, #9c27b0 100%);  /* ่ฅฟ็“œ โ†’ ่‘ก่„ */
--gradient-card-2: linear-gradient(135deg, #7cb342 0%, #e63946 100%);  /* ็Œ•็Œด โ†’ ๆจฑๆกƒ */

ๆ–นๆกˆ 4๏ผšๆ—ฅ่ฝ็ณป

--gradient-card-1: linear-gradient(135deg, #ffd700 0%, #ff6b9d 100%);  /* ่Š’ๆžœ โ†’ ่‰่Ž“ */
--gradient-card-2: linear-gradient(135deg, #ffb347 0%, #ff9500 100%);  /* ๆกƒๅญ โ†’ ๆฉ™ๅญ */

๐Ÿ“ธ ไฝฟ็”จ่‡ชๅฎšไน‰ๅฐ้ขๅ›พ

ๅณไฝฟๅก็‰‡ๆœ‰ไธค็งๆธๅ˜๏ผŒๅฝ“ไฝ ไธบๆ–‡็ซ ๆทปๅŠ ไบ† cover_image ๆ—ถ๏ผš

---
layout: post
title: "ๆ–‡็ซ ๆ ‡้ข˜"
cover_image: /img/covers/my-image.jpg
---
  • ๅฐ้ขๅ›พไผšๆ˜พ็คบๅœจๆธๅ˜ไธŠๆ–น
  • ๆธๅ˜ไผšไฝœไธบๅŠ้€ๆ˜Žๅ ๅŠ ๅฑ‚ๅขžๅผบ่ง†่ง‰ๆ•ˆๆžœ
  • ๅฅ‡ๆ•ฐๅ’Œๅถๆ•ฐๅก็‰‡็š„ๅ ๅŠ ่‰ฒไผšๆœ‰ๆ‰€ไธๅŒ

๐ŸŽจ ้ขœ่‰ฒๅ‚่€ƒ

ๅฎŒๆ•ด็š„ๆฐดๆžœ่‰ฒ็ณป็ปŸ๏ผš

ๆฐดๆžœ ้ขœ่‰ฒไปฃ็  RGB ็”จ้€”
๐Ÿฅญ ่Š’ๆžœ #ffd700 rgb(255, 215, 0) ๆš–่‰ฒไธป่ฐƒ
๐Ÿ‘ ๆกƒๅญ #ffb347 rgb(255, 179, 71) ๆŸ”ๅ’Œ่ฟ‡ๆธก
๐ŸŠ ๆฉ™ๅญ #ff9500 rgb(255, 149, 0) ไบฎ็œผๅผบ่ฐƒ
๐Ÿ“ ่‰่Ž“ #ff6b9d rgb(255, 107, 157) ็ƒญๆƒ…ๆดปๅŠ›
๐Ÿ’ ๆจฑๆกƒ #e63946 rgb(230, 57, 70) ๆทฑ็บขๆฒ‰็จณ
๐ŸŒŠ ่ฅฟ็“œ #ff1744 rgb(255, 23, 68) ๅคง่ƒ†็ชๅ‡บ
๐Ÿฅ ็Œ•็Œด #7cb342 rgb(124, 179, 66) ็”Ÿๆœบๅนณ่กก
๐Ÿซ ่“่Ž“ #42a5f5 rgb(66, 165, 245) ๆธ…็ˆฝ็Žฐไปฃ

๐Ÿš€ ๅฟซ้€Ÿๅˆ‡ๆข้…่‰ฒ

ไธ€้”ฎๅˆ‡ๆขๅˆฐๅ…จ้ƒจ่ฅฟ็“œ็บขโ†’่“่Ž“่“

--gradient-card-1: linear-gradient(135deg, #ff1744 0%, #42a5f5 100%);
--gradient-card-2: linear-gradient(135deg, #ff1744 0%, #42a5f5 100%);

ไธ€้”ฎๅˆ‡ๆขๅˆฐๅ…จ้ƒจ็Œ•็Œดๆกƒ็ปฟโ†’่“่Ž“่“

--gradient-card-1: linear-gradient(135deg, #7cb342 0%, #42a5f5 100%);
--gradient-card-2: linear-gradient(135deg, #7cb342 0%, #42a5f5 100%);

ไธ€้”ฎๅˆ‡ๆขๅˆฐๆ—ฅ่ฝๆธๅ˜

--gradient-card-1: linear-gradient(135deg, #ffd700 0%, #ff9500 50%, #ff6b9d 100%);
--gradient-card-2: linear-gradient(135deg, #ffd700 0%, #ff9500 50%, #ff6b9d 100%);

๐Ÿ’ป ๆŠ€ๆœฏ็ป†่Š‚

nth-child ้€‰ๆ‹ฉๅ™จ

ไปฃ็ ไฝฟ็”จ :nth-child() ้€‰ๆ‹ฉๅ™จๆฅๅŒบๅˆ†ๅฅ‡ๅถๅก็‰‡๏ผš

/* ๅฅ‡ๆ•ฐ๏ผˆ1, 3, 5...๏ผ‰ */
.post-card:nth-child(odd) .card-cover { ... }

/* ๅถๆ•ฐ๏ผˆ2, 4, 6...๏ผ‰ */
.post-card:nth-child(even) .card-cover { ... }

่ฟ™ๆ˜ฏไธ€ไธช็บฏ CSS ๆ–นๆกˆ๏ผŒๆ— ้œ€ JavaScript๏ผŒๆ€ง่ƒฝไผ˜็ง€ใ€‚

ๆต่งˆๅ™จๅ…ผๅฎนๆ€ง

โœ… ๆ‰€ๆœ‰็Žฐไปฃๆต่งˆๅ™จ้ƒฝๆ”ฏๆŒ :nth-child() โœ… IE 9+ โœ… ็งปๅŠจๆต่งˆๅ™จ

โœจ ็Žฐๅœจ็š„ๆ•ˆๆžœ

๐ŸŽ‰ ไฝ ็š„ๅšๅฎขๅก็‰‡็Žฐๅœจๅฑ•็คบไบ†๏ผš

  • ไธค็ง็›ธไบ’ๆญ้…็š„ๆธๅ˜้ขœ่‰ฒ
  • ไบคๆ›ฟ็š„่ง†่ง‰่Š‚ๅฅ
  • ้ซ˜็บง็š„่ง†่ง‰่ฎพ่ฎกๆ„Ÿ
  • ๅฎŒๅ…จ็š„ CSS ๅฎž็Žฐ๏ผˆๆ—  JavaScript๏ผ‰

ๅปบ่ฎฎ๏ผšๅœจๆต่งˆๅ™จไธญๆŸฅ็œ‹ๅšๅฎข้กต้ข๏ผŒไบซๅ—ๆ–ฐ็š„ไบคๆ›ฟๆธๅ˜ๆ•ˆๆžœ๏ผ๐ŸŒˆ