亲手打造马嘉祺同款‘紫海’，零基础也能做的简易网页应援教程

第一步：用CodePen开启你的创作之旅

不需要下载任何软件！直接打开浏览器访问CodePen，点击右上角的“Create”按钮，选择“New Pen”。这里会自动为你创建一个空白项目，左侧是HTML编辑区，中间是CSS，右侧实时预览效果。

• HTML区域：写页面结构
• CSS区域：设计样式
• 预览窗口：实时查看效果

“零基础？别担心，CodePen让代码学习变得像搭积木一样简单。”

第二步：搭建紫海的骨架

在HTML区域输入以下代码，创建波浪层：

<div class="purple-ocean">  <div class="wave"></div>  <div class="wave"></div>  <div class="wave"></div></div>

三个波浪层叠加，能制造出更真实的海浪起伏效果。

第三步：给波浪穿上紫色外衣

在CSS区域粘贴以下代码，设置波浪的样式：

.purple-ocean {  width: 100%;  height: 300px;  position: relative;  overflow: hidden;}.wave {  position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 100%;  background: linear-gradient(to bottom, #8a2be2, #4b0082);  border-radius: 50% 50% 0 0;}

通过渐变色和圆角，让波浪看起来更自然。试着调整height和border-radius参数，观察效果变化。

第四步：让海浪动起来

添加动画让波浪流动：

.wave {  animation: wave 6s infinite linear;}@keyframes wave {  0% { transform: translateX(0); }  100% { transform: translateX(-100%); }}

调整6s可以改变波浪速度，数值越大越慢。试试改成10s看看效果！

第五步：细节调整，打造专属效果

现在试试这些小技巧：

• 修改background中的颜色值，比如用#9c27b0和#673ab7
• 增加.wave:nth-child(2)的animation-delay，让波浪错开
• 调整border-radius为60% 40% 0 0，改变波浪形状

多尝试几个参数组合，你的紫海会越来越有个性！

第六步：保存你的作品

点击CodePen右上角的“Save”按钮，生成专属链接。你可以把这个链接分享到微博、朋友圈，或者嵌入到你的个人博客中。下次马嘉祺的演唱会，你也可以用这个小作品为自己应援啦！

“代码让热爱变得具体，每一行都是对偶像的用心。”