多"财"多"亿"迎中秋<前端技术制作中秋贺卡>

扑拉鹅子
498 阅读5分钟

# 中秋创意投稿大赛

先别说别的掘友们：小弟祝大家年年圆满如意，月月事事顺心，日日喜悦无忧，时时高兴欢喜，刻刻充满朝气，月圆人圆花好，事顺业顺家兴！中秋节快乐！

中秋节是一个家庭团聚和亲情表达的节日，传统上人们会赠送月饼、欣赏明亮的圆月，并点亮灯笼以庆祝这一节日。在这篇文章中，我们将使用前端技术来制作一个中秋互动贺卡，以表达我们的祝福和庆祝这个特殊的节日。

准备工作（前端大佬仅接受俺的祝福即可，纯小白文章）

在开始之前，我们需要准备一些素材和工具（大佬跳过）：

  1. 文本编辑器：可以选择自己喜欢的文本编辑器，如Visual Studio Code、Sublime Text等。
  2. 基本的HTML、CSS和JavaScript知识：我们将使用这些技术来创建互动贺卡。
  3. 图像素材：可以在互联网上寻找一些与中秋节相关的图片，如月亮、灯笼、兔子等。确保这些图像是免费使用的或者您拥有版权。
  4. 音频素材（可选）：如果想要添加音效，可以准备一些中秋节相关的音频文件。

设计互动贺卡 PS：开动脑筋了得

HTML结构

首先，我们需要创建HTML文件来构建贺卡的基本结构。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>中秋互动贺卡</title>
</head>
<body>
    <div class="card">
        <!-- 贺卡内容将在此处添加 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

接下来，我们将使用CSS来为贺卡添加样式。可以根据自己的喜好来设计界面，例如设置背景、字体、颜色等。 开动脑筋吧！！！

JavaScript交互

最令人兴奋的部分是通过JavaScript来添加交互性和动画效果。以下是一个简单的示例，当用户点击贺卡时会出现动画效果：

const card = document.querySelector('.card');

card.addEventListener('click', () => {
    card.classList.toggle('open');
});

添加图像和音效

可以在贺卡中添加图像和音效来增强互动性和视听体验。使用HTML的<img>元素来插入图像，使用<audio>元素来添加音效。

最终效果

经过以上步骤，将创建一个中秋互动贺卡，我们可以点击来触发动画效果，同时还可以添加图像和音效以增加节日氛围。

下面是俺滴成品:后端初碰前端,前端大佬勿笑

成品图:

image.png

运行效果:

附源码:

<div class="background">

  <!--  Where the moon is -->
  <div class="moon">
   <div class="circle cirlce-one"></div>
   <div class="circle cirlce-two"></div>
   <div class="circle cirlce-three"></div>
   <div class="circle cirlce-four"></div>
  
   <div class="circle-inverse cirlce-five"></div>
   <div class="circle-inverse cirlce-six"></div>
   <div class="circle-inverse cirlce-seven"></div>
  </div>

  <!--  Where the stars align -->
  <div class="star star-1"></div>
  <div class="star star-2"></div>
  <div class="star star-3"></div>
  <div class="star star-4"></div>
  <div class="star star-5"></div>

 
 <div class="cloud-container cloud-1">
  <div class="cloud-border"></div>
  <div class="cloud"></div>
 </div>
 
 <div class="cloud-container cloud-2">
  <div class="cloud-border"></div>
  <div class="cloud"></div>
 </div>
 
 <div class="text-container">
  <div class="text">
   掘友们 Happy Mid Autumn Festival
   <div>
 </div>
</div>

/*----- General Settings ------*/
* {
 padding: 0;
 margin: 0;position: relative;
 box-sizing: border-box;
}

::-webkit-scrollbar {
 display: none;
}


/*----- Background Settings ------*/
.background {
  width: 100%;
  height: 100vhq;
  min-height: 790px;
  background: #7C579E;
  background: linear-gradient(#B0458E, #6960A4);
}

/*----- Moon Settings ------*/
/*--- Moon ---*/
.moon {
  position: absolute;
  top: 15%;
  left: 55%;
  width: 250px;
  height: 250px;
  background: #F8D55E;
  border-radius: 50%;
  border: 7px solid #F6DF99;
  box-shadow: inset -45px -25px rgba(0,0,0,.1);
}
.moon:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 245px;
  height: 245px;
  border-radius: 50%;
  box-shadow: 0 0 30px 30px rgba(255,255,255,0.1), 0 0 15px 15px rgba(255,255,255,0.3), 0 0 10px 10px rgba(255,255,255,0.5);
}

/*--- Circle inside ---*/
.circle {
  position: absolute;
  background: #EFC853;
  border-radius: 50%;
  border: 3px solid #C5A34A;
  box-shadow: inset -1px 2px rgba(0,0,0,.2);
}

.cirlce-one {
  width: 35px;
  height: 35px;
  top: 22%;
  left: 15%;
}
.cirlce-two {
  width: 22px;
  height: 22px;
  top: 15%;
  left: 27%;
}
.cirlce-three {
  width: 30px;
  height: 30px;
  top: 15%;
  left: 38%;
}
.cirlce-four {
  width: 15px;
  height: 15px;
  top: 10%;
  left: 50%;
}

.circle-inverse {
  position: absolute;
  background: #F8D55E;
  border-radius: 50%;
  border: 3px solid #E1BA56;
  box-shadow: inset -2px -4px rgba(0,0,0,.2);
}

.cirlce-five {
  width: 35px;
  height: 35px;
  bottom: 14%;
  right: 15%;
}

.cirlce-six {
  width: 20px;
  height: 20px;
  bottom: 8%;
  right: 25%;
}

.cirlce-seven {
  width: 15px;
  height: 15px;
  bottom: 27%;
  right: 20%;
}

/*----- Star Settings ------*/
.star {
  position: absolute;
  border-radius: 50%;
  background: #F6DF99;
  animation: blink 2s ease-in infinite;
}


.star-1 {
  top: 7%;
  left: 10%;
  width: 15px;
  height: 15px;
}

.star-2 {
  top: 30%;
  left: 37%; 
  width: 7px;
  height: 7px;
}

.star-3 {
  top: 55%;
  right: 10%;
  width: 15px;
  height: 15px;
}

/*----- Cloud Settings ------*/
/*--- Positioning the cloud ---*/
.cloud-container {
  position: absolute;
  width: 100%;
  animation: move 5s linear infinite forwards;
}

.cloud-1 {
  top: 17%;
  left: 30%;
  animation: move 10s linear infinite reverse;
}

.cloud-2 {
  top: 60%;
  left: 80%;
  animation: move 13s linear infinite alternate;
}

/*--- The cloud ---*/
.cloud {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #383983;
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}
.cloud:after, .cloud:before {
  position: absolute;
  background: #383983;
  content: '';
}
.cloud:before {
  border-radius: 50%;
  height: 50px;
  width: 50px;
 	right: 90px;
 	top: 30px;
}
.cloud:after {
  border-radius: 100px;	
  height: 80px;
  width: 230px;
  top: 60px;
  right: -42px;
}

/*--- The cloud border ---*/
.cloud-border {
  position: absolute;
  background: #6960A4;
  border-radius: 50%;
  width: 120px;
  height: 120px; 
}
.cloud-border:after, .cloud-border:before {
  content: '';
  position: absolute;
  background: #6960A4;
}
.cloud-border:before {
  border-radius: 50%;
  height: 70px;
  width: 70px;
  right: 90px;
  top: 30px;
}
.cloud-border:after {
 	border-radius: 100px;	
  height: 100px;
  width: 250px;
  top: 60px;
  right: -42px;
}


/*----- Text Settings ------*/
.text-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 5rem;
  color: white;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 2px 2px #B34F9C;
  font-family: 'Passion One', cursive;
}

.text {
 font-size: 3rem;
}


/*----- Animation Settings ------*/
@keyframes blink {
  0% { box-shadow: none }
  100% { box-shadow: 0 0 7px 7px rgba(255,255,255,0.7); }
}

@keyframes move {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

结语

通过前端技术，我们可以轻松制作出令人愉快的中秋互动贺卡，与亲朋好友分享节日的快乐。希望这篇文章能启发您在中秋节和其他节日中创造自己的互动项目，用技术传递节日的温馨和祝福。再次祝中秋快乐掘友们！

avatar
文章
阅读
粉丝