中秋创意投稿 | 中秋故事卡集

引言

本文是一篇关于今年中秋创意性投稿的文章，从中秋的主题出发，进行创意性的开发并产出博客。这是我第一年在掘金进行的中秋打卡，希望来年的此刻也依然能坚持~

效果展示

网页链接

静态图片

创意设计

既然是围绕中秋这一主题进行创意性开发，需要明确的是：产出的内容不一定要功能多么复杂，应该主要围绕创意这一词来展开，因此我便从：内容、内容展示形式、主题色、页面元素等多个角度出发考虑，来决定最终的页面效果

内容

页面展示内容

页面的内容我最初有考虑到贺卡祝福，但是感觉选择此内容的人很多，我又想不出什么太有创意的设计，便放弃了；然后，又经过一段时间的思考，最终选择内容就是中秋故事分享吧~

然后选了三折故事：嫦娥奔月、后羿射日、玉兔捣药

页面展示形式

页面内容选择好了，但是要如何呈现呢？

故事卡片

还是在经过一番思考之后，最终选择了以卡片的形式，故事卡片来呈现内容，然后卡片内部标题、内容的设计最终决定仅通过颜色、字体即可。故事卡片是页面的主体部分
主题卡片

页面围绕3个故事展开，即3个主题，在展示内容之前，想着先突出主题，因此加上了主题卡片部分，并给它设计一些样式，营造一种立体的效果
标题内容选择好了，也需要给其一个标题来彰显内容，因为与故事有关，就随意取了中秋传说一名。主标题也是要有节日氛围的，因此给它加上一个渐变，让它不至于单调

主题色

内容大致上都选择并敲定好了，接下来便进一步选择主题色。查阅了一番，与中秋相配的3种颜色：金黄、深蓝、深红，更能烘托出节日氛围

标题标题可以说，虽然它在页面占比不多，但是还是很重要的，好的标题更能突出内容，所以在标题的颜色设计上，我是通过将金黄、深蓝、深红这3种颜色结合起来实现渐变的效果，并通过裁剪只作用在文字，并加上动画效果，实现文字动态渐变的效果
背景背景，我采用和标题相似的方式实现，金黄、深蓝、深红渐变色背景
主题卡片主题卡片，内容只是放了3个故事名称，在设计上我便采取的是文字和背景各分配一个主题颜色，当然也是有讲究的，我是根据故事背景来选择的，例如：嫦娥奔月这个故事，因为有月亮、天空，一个金黄，一个深蓝，刚好~
故事卡片故事卡片包括标题、内容和背景，背景是深蓝，好比天空；标题是深红，更加突出；内容便是金黄

元素

本次页面包含的元素主要有：月亮、星星、灯笼，加上这3个元素便更能突显出节日的氛围，当然，还能加上更多与中秋相关的其他元素，但时间、能力有限。元素不在多，有氛围即可~~

月亮

月亮可是中秋的核心元素，必不可少，所以在页面的左上角加上了月亮这个元素，并且让它具备发光的效果
星星

星星与月亮同在，它的数量肯定是很多的，因此考虑将其作为整个页面的背景的一部分，再加上一个若隐若现的动态效果，使得星星的形象更贴切
灯笼

灯笼这个元素，个人感觉它跟中秋还是很贴的，虽然我在中秋并没有买过灯笼。我将它放置在每张故事卡片的右上角，并给它加上一个动态的效果，个人感觉节日氛围更浓了

背景音乐

给页面加上一个背景音乐则是出于观看体验考虑，让用户在观看途中不至于单调，伴随着音乐的旋律浏览页面，更沉浸式的体验

技术实现

本页面主要的技术实现都是围绕着css展开的，因此基本都是说明一下如何使用css来实现某一效果的

渐变

css是用的sass来实现的，此处的$deep-blue、$golden-yellow、$deep-red都是定义的颜色变量

scss 复制代码

.header
    background-image: linear-gradient(to right, $deep-blue, $golden-yellow, $deep-red)

    /* 渐变作用于文字 */
    color: transparent
    display: inline-block
    -webkit-background-clip: text
    animation: gradientAnimation 1s linear infinite

/* 添加文字动态渐变效果 */
@keyframes gradientAnimation
    0%, 100%
        opacity: 1
    50%
        opacity: 0.8

月亮

采用em方式来实现页面的自适应布局，会根据页面的宽度来调整字体大小

scss 复制代码

.moon 
    width: 4em
    height: 4em
    background-color: #f3d000
    border-radius: 50%
    position: absolute
    top: 0.6em
    left: 0.6em
    animation: flashing 5s linear infinite

@keyframes flashing
  0%, 100%
    box-shadow: 0 0 0.6em 0.3em rgba(255, 255, 255, 1)
  50%
    box-shadow: 0 0 0.6em 0.3em rgba(255, 255, 255, 0.4)

星星

所有的星星都存放在星星容器里，而容器覆盖整个页面

css 复制代码

/* 星星容器 */
.stars 
  position: absolute
  width: 100%
  height: 100%
  overflow: hidden

/* 星星 */
.star 
  width: 0.2em
  height: 0.2em
  background-color: $white
  border-radius: 50%
  position: absolute
  animation: twinkle 5s linear infinite
  
/* 闪烁动画 */
@keyframes twinkle 
  0%
    opacity: 0
    transform: translate(0, 0)
  
  50% 
    opacity: 1
    transform: translate(-0.4em, 0.2em)
  
  100% 
    opacity: 0
    transform: translate(0.7em, -0.4em)

星星因为数量很多，所以需要通过js来实现，然后将这些星星加入到类名为starts的容器里

js 复制代码

const generateStarsData = (count) => {
    const starsData = [];
    for (let i = 1; i <= count; i++) {
      const left = `${Math.random() * 100}%`;
      const top = `${Math.random() * 100}%`;
      starsData.push({ id: i, left, top });
    }
    return starsData;
};

灯笼

灯笼是放在故事卡里的，相对于故事卡进行相对布局

css 复制代码

/* 灯笼容器 */
.lantern-container
  position: absolute
  display: flex
  flex-direction: column
  align-items: center
  z-index: 999
  top: -80%
  right: -0%
  animation: lantern-float 2s ease-in-out infinite

/* 灯笼把手 */
.handle
  width: 0.2em
  height: 8.5em
  background-color: $lantern-handle-yellow 
  transform: rotate(74deg) translate(3.75em, -3.375em)
  z-index: 999
  &::before
    content: ""
    position: absolute
    width: 0.6em
    height: 0.6em
    border-radius: 50%
    background-color: $lantern-handle-yellow
    top: 100%
    transform: translate(-0.2em, -0.1em)

/* 灯笼串 */
.lantern-string
  position: relative
  display: flex
  flex-direction: column
  align-items: center
  opacity: 0.9

/* 单个圆灯笼 */
.lantern
  width: 2em
  height: 2em
  background-color: $lantern-red
  border-radius: 50%
  margin: 0.375em 0
  transform: perspective(7.5em) rotateX(30deg)
  transform-origin: center bottom
  animation: lantern-flashing 1s ease-in-out infinite
  &::before
    content: ""
    display: inline-block
    width: 0.15em
    height: 2em
    transform: translateY(-100%)
    background-color: $lantern-red

/* 添加风吹飘动的动画效果 */
@keyframes lantern-float
  0%, 100%
    transform: translateX(0) 

  50%
    transform: translateX(-0.75em) 

@keyframes lantern-flashing
  0%, 100%
    box-shadow: 0 0 3.75em 0.375em rgba(230, 57, 70, 0.4)
  50%
    box-shadow: 0 0 3.75em 0.375em rgba(230, 57, 70, 0.8)

各颜色变量的值

scss 复制代码

$deep-blue: #00205B
$golden-yellow: #F3D000
$deep-red: #A10808

$white: #fff

$lantern-red: #E63946
$lantern-handle-yellow: #FFD700

背景音乐

背景音乐的图片是从iconfont上找的icon图片，下载的格式我现在了svg格式。然后通过svg提供的linearGradient标签来实现渐变效果。然后在播放和暂停时分别通过动画属性来不同效果

svg 复制代码

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1695463523546" class="icon" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg" p-id="1576" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="200" height="200">
    <defs>
        <linearGradient id="myLinearGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color: #00205B; stop-opacity: 1" />
            <stop offset="50%" style="stop-color: #A10808; stop-opacity: 1" />
            <stop offset="100%" style="stop-color: #F3D000; stop-opacity: 1" />
        </linearGradient>
    </defs>
    <path
        d="M702.271724 36.807218c-262.394547-105.060192-560.331687 22.458056-665.42387 284.884594-105.124175 262.458531 22.458056 560.427662 284.884594 665.487854 262.426539 105.092183 560.363679-22.458056 665.455862-284.884595 105.124175-262.458531-22.490047-560.363679-284.916586-665.487853zM345.534148 927.803382C116.282828 835.987685 4.440431 574.808815 96.224137 345.525504 188.039835 116.274184 449.250696 4.399795 678.534007 96.247484c229.25132 91.783706 341.093717 352.994567 249.310011 582.245887-91.847689 229.283312-353.026558 341.093717-582.30987 249.310011z"
        fill="url(#myLinearGradient)" p-id="1577"></path>
    <path
        d="M535.851774 452.601162a64.015056 64.015056 0 0 0-47.635392 118.784559 64.015056 64.015056 0 0 0 47.635392-118.784559z m-35.734542 89.128409a32.087507 32.087507 0 0 1-17.819283-41.620983 32.087507 32.087507 0 0 1 41.620983-17.819284 32.055515 32.055515 0 0 1-23.8017 59.440267z"
        fill="url(#myLinearGradient)" p-id="1578"></path>
    <path
        d="M583.359199 333.848594a191.949193 191.949193 0 1 0-142.682234 356.38567 191.949193 191.949193 0 0 0 142.682234-356.38567z m-118.880534 296.945403a128.126087 128.126087 0 0 1-71.245142-166.355968 128.126087 128.126087 0 0 1 166.323976-71.245142 128.19007 128.19007 0 0 1 71.309125 166.387959 128.126087 128.126087 0 0 1-166.387959 71.213151z"
        fill="url(#myLinearGradient)" p-id="1579"></path>
    <path
        d="M749.651183 607.152254a15.995766 15.995766 0 0 0-29.720133-11.868858v-0.031992a223.300895 223.300895 0 0 1-119.776297 122.655535 15.995766 15.995766 0 0 0 12.604664 29.400218c0.319915-0.127966 0.447881-0.383898 0.671822-0.479873a255.228444 255.228444 0 0 0 136.155961-139.67503h0.063983zM859.478114 633.897175a15.995766 15.995766 0 0 0-20.794496 8.893646 350.787151 350.787151 0 0 1-188.206184 192.684999 15.995766 15.995766 0 0 0 12.604663 29.400218c0.383898-0.191949 0.671822-0.543856 1.055721-0.703814a382.682709 382.682709 0 0 0 204.265933-209.480553 16.027758 16.027758 0 0 0-8.925637-20.794496z"
        fill="url(#myLinearGradient)" p-id="1580"></path>
    <path
        d="M800.069838 610.127467a15.995766 15.995766 0 0 0-20.794496 8.893646 286.580146 286.580146 0 0 1-153.943253 157.654271h0.063983a15.995766 15.995766 0 0 0 12.540681 29.432209c0.319915-0.159958 0.511865-0.447881 0.863771-0.63983a318.859602 318.859602 0 0 0 170.194952-174.5458 16.027758 16.027758 0 0 0-8.925638-20.794496zM432.327175 285.125491a15.995766 15.995766 0 0 0-21.018437-8.381782c-0.287924 0.095975-0.447881 0.351907-0.671822 0.447882a255.228444 255.228444 0 0 0-136.155961 139.67503h-0.031991a15.995766 15.995766 0 1 0 29.688141 11.90085h0.031992A223.140937 223.140937 0 0 1 423.913402 306.175919a16.027758 16.027758 0 0 0 8.413773-21.050428zM381.940512 167.492627a16.027758 16.027758 0 0 0-21.018437-8.413773c-0.383898 0.159958-0.671822 0.511865-0.991737 0.671822a382.682709 382.682709 0 0 0-204.265934 209.480553 15.995766 15.995766 0 1 0 29.688142 11.932842 350.947109 350.947109 0 0 1 188.206184-192.653008 16.027758 16.027758 0 0 0 8.381782-21.018436z"
        fill="url(#myLinearGradient)" p-id="1581"></path>
    <path
        d="M398.736066 247.279508a15.995766 15.995766 0 1 0-12.604663-29.368226c-0.319915 0.127966-0.511865 0.447881-0.83178 0.575847a318.955576 318.955576 0 0 0-170.194952 174.609783 15.995766 15.995766 0 0 0 29.656151 11.932842 286.804087 286.804087 0 0 1 153.943253-157.654271v-0.095975z"
        fill="url(#myLinearGradient)" p-id="1582"></path>
</svg>

小结

本文是一篇中秋创意投稿文，最终的目的还是祝各位掘友节日快乐_^^_