用前端三件套绘画出《春日灯塔》

糖糖TANG
10 阅读9分钟

屏幕截图 2026-03-24 132507.png

一、创作目的

利用所学的前端知识，画出心中所想，锻炼知识点运用能力。

二、创作思路

用基本图形拼成想要的形状，比如灯塔由矩形和椭圆形构建而来，再用CSS调节样式，使用定位将图片按理想位置摆放拼成一幅画，在这基础上用JS完成动画制作，渐变色和滤镜技术使得作品更加生动。

三、技术

3.1使用的语言和技术

  1. HTML - 用于构建页面的基本结构
  2. CSS - 用于样式设计和动画效果
  3. JavaScript - 用于动态生成飘落的樱花元素

3.2技术亮点

CSS技术

  • 线性渐变背景 ：使用 linear-gradient 创建从深蓝到浅蓝、绿色再到粉色的渐变效果
  • CSS动画 ：通过 @keyframes 实现樱花飘落的动画效果
  • CSS伪元素 ：利用 ::before 和 ::after 创建樱花花瓣
  • CSS变换 ：使用 transform 进行旋转、平移等操作，实现树枝和花朵的定位
  • Flexbox布局 ：用于底部樱花的自动换行排列
  • 滤镜效果 ：使用 filter 为樱花添加发光效果，增强视觉效果
  • 分层设计 ：通过 z-index 管理不同元素的层级关系
  • 阴影效果 ：为容器添加 box-shadow 增加深度感

设计亮点

  • 对称设计 ：左右两侧对称的树枝和花朵布局
  • 立体效果 ：通过阴影和渐变营造出立体感
  • 动态效果 ：飘落的樱花动画增加了页面的生动性
  • 自然元素 ：樱花、树枝等自然元素的逼真表现
  • 色彩搭配 ：蓝绿色调与粉色樱花的和谐搭配

代码组织

  • 分类注释 ：将CSS代码按功能分类并添加详细注释
  • 模块化设计 ：将不同功能的样式分离为不同的CSS类
  • 响应式布局 ：底部樱花的自动换行排列

交互体验

  • 平滑动画 ：樱花飘落的动画流畅自然
  • 视觉层次 ：通过z-index和定位创造出丰富的视觉层次
  • 细节处理 ：樱花花瓣的形状、颜色和发光效果的精心设计

技术创新

  • 纯CSS樱花 ：使用CSS伪元素和变换创建五瓣樱花，无需图片
  • 动态生成 ：使用JavaScript动态生成随机位置的飘落樱花
  • 性能优化 ：合理使用CSS动画和变换，确保页面流畅运行

四、代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SMU春日灯塔</title>
  <style>
    /* 基础样式 */
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    /* 容器样式 */
    .box {
      width: 600px;
      height: 600px;
      background: linear-gradient(to bottom, rgb(61, 145, 218) 0%, skyblue 60%, lightgreen 75%, pink 100%);
      border-radius: 10%;
      margin: 100px auto;
      border: 10px solid #a76a2c;
      position: relative;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }

    .box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.1);
      pointer-events: none;
      z-index: 1;
    }

    /* 灯塔结构样式 */
    .zhen {
      width: 1px;
      height: 30px;
      background-color: #efd5bc;
      border-radius: 5%;
      margin-top: 10px;
      margin-left: 50%;
    }

    .xiaoyuan {
      width: 100px;
      height: 8px;
      background-color: #f4cfeb;
      border-radius: 40%;
      margin: 0px auto;
    }

    .window {
      width: 80px;
      height: 30px;
      background-color: rgba(215, 245, 250, 0.7);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.5);
      margin: -2px auto;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .window-line {
      background-color: #fff;
    }

    .window-line.horizontal {
      position: absolute;
      width: 80px;
      height: 1px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .window-line.vertical {
      width: 1px;
      height: 30px;
    }

    .upyuan {
      width: 120px;
      height: 7px;
      background-color: #81695ce4;
      border-radius: 40%;
      margin: -2px auto;
    }

    .downyuan {
      width: 120px;
      height: 7px;
      background-color: #fff;
      border-radius: 40%;
      margin: -2px auto;
    }

    .langan {
      width: 110px;
      height: 15px;
      background-color: #81695ce4;
      margin: -2.5px auto;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 5px;
      border-top: 1px solid rgba(71, 34, 34, 0.6);
    }

    .langan-line {
      width: 1px;
      height: 10px;
      background-color: rgba(71, 34, 34, 0.6);
    }

    .qiang {
      width: 80px;
      height: 30px;
      background-color: #fff;
      margin: -2px auto;
    }

    .zhu {
      width: 80px;
      height: 320px;
      background-color: #fff;
      text-align: center;
      margin: 0px auto;
    }

    .zhu i {
      display: block;
      margin-bottom: 5px;
      font-size: 25px;
      font-weight: bold;
      color: #3149e5;
      font-style: normal;
    }

    ul .last {
      background-color: #e5bebed2;
    }

    ul {
      position: relative;
      top: 100px;
    }

    /* 树枝样式 */
    .main-branch {
      position: absolute;
      width: 2px;
      height: 200px;
      background-color: brown;
      top: 10px;
      left: 10px;
      transform: rotate(-30deg);
      transform-origin: top left;
      z-index: 0;
    }

    .top-right-branch {
      position: absolute;
      width: 2px;
      height: 200px;
      background-color: brown;
      top: 0;
      right: 20px;
      transform: rotate(45deg);
      transform-origin: top right;
      z-index: 0;
    }

    /* 左侧线条和分支样式 */
    .left-lines {
      position: absolute;
      left: 20px;
      top: 0px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .left-line {
      width: 100px;
      height: 2px;
      background-color: #a76a2c;
      transform-origin: left center;
      position: absolute;
      left: 0;
    }

    .left-line.line1 {
      transform: rotate(25deg);
      top: 10px;
      left: -6px;
    }

    .left-line.line2 {
      transform: rotate(79deg);
      top: 40px;
      left: 10px;
    }

    .left-line.line3 {
      transform: rotate(28deg);
      top: 100px;
      left: 43px;
    }

    .left-line.line4 {
      transform: rotate(92deg);
      top: 130px;
      left: 60px;
    }

    .left-line.line5 {
      transform: rotate(95deg);
      top: 90px;
    }

    /* 右侧线条和分支样式 */
    .right-lines {
      position: absolute;
      right: 20px;
      top: 0px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .right-line {
      width: 100px;
      height: 2px;
      background-color: #a76a2c;
      transform-origin: right center;
      position: relative;
    }

    .right-line.line1 {
      transform: rotate(155deg);
      top: 20px;
      right: 90px;
    }

    .right-line.line2 {
      transform: rotate(101deg);
      top: 80px;
      right: 75px;
    }

    .right-line.line3 {
      transform: rotate(156deg);
      top: 4px;
      right: 180px;
    }

    .right-line.line4 {
      transform: rotate(82deg);
      top: 40px;
      right: 100px;
    }

    /* 分支样式 */
    .branch {
      position: absolute;
      width: 40px;
      height: 2px;
      background-color: brown;
    }

    .line1 .branch1 {
      top: -2px;
      left: 30px;
      transform: rotate(30deg);
    }

    .line1 .branch2 {
      top: 2px;
      left: 50px;
      transform: rotate(-30deg);
    }

    .line1 .branch3 {
      top: -2px;
      left: 70px;
      transform: rotate(45deg);
    }

    .line2 .branch1 {
      top: -2px;
      left: 30px;
      transform: rotate(30deg);
    }

    .line2 .branch2 {
      top: 2px;
      left: 50px;
      transform: rotate(-30deg);
    }

    .line2 .branch3 {
      top: -2px;
      left: 70px;
      transform: rotate(45deg);
    }

    .line3 .branch1 {
      top: -2px;
      left: 30px;
      transform: rotate(30deg);
    }

    .line3 .branch2 {
      top: 2px;
      left: 50px;
      transform: rotate(-30deg);
    }

    .line3 .branch3 {
      top: -2px;
      left: 70px;
      transform: rotate(45deg);
    }

    .line4 .branch1 {
      top: -2px;
      left: 30px;
      transform: rotate(30deg);
    }

    .line4 .branch2 {
      top: 2px;
      left: 50px;
      transform: rotate(-30deg);
    }

    .line4 .branch3 {
      top: -2px;
      left: 70px;
      transform: rotate(45deg);
    }

    .line5 .branch1 {
      top: -2px;
      left: 30px;
      transform: rotate(30deg);
    }

    .line5 .branch2 {
      top: 2px;
      left: 50px;
      transform: rotate(-30deg);
    }

    .line5 .branch3 {
      top: -2px;
      left: 70px;
      transform: rotate(45deg);
    }

    .right-line .branch1 {
      top: -2px;
      right: 30px;
      transform: rotate(-30deg);
    }

    .right-line .branch2 {
      top: 2px;
      right: 50px;
      transform: rotate(30deg);
    }

    .right-line .branch3 {
      top: -2px;
      right: 70px;
      transform: rotate(-45deg);
    }

    /* 树枝上的樱花样式 */
    .branch-sakura {
      position: absolute;
      width: 20px;
      height: 20px;
    }

    .branch-sakura .petal {
      position: absolute;
      width: 8px;
      height: 12px;
      background-color: pink;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }

    .branch-sakura .petal:nth-child(1) {
      top: 4px;
      left: 6px;
      transform: rotate(0deg);
    }

    .branch-sakura .petal:nth-child(2) {
      top: 0;
      left: 10px;
      transform: rotate(72deg);
    }

    .branch-sakura .petal:nth-child(3) {
      top: 3px;
      left: 0;
      transform: rotate(-72deg);
    }

    .branch-sakura .petal:nth-child(4) {
      top: 10px;
      left: 2px;
      transform: rotate(-144deg);
    }

    .branch-sakura .petal:nth-child(5) {
      top: 8px;
      left: 10px;
      transform: rotate(144deg);
    }

    .branch1 .branch-sakura:nth-child(1) {
      left: 5px;
      top: -10px;
    }

    .branch1 .branch-sakura:nth-child(2) {
      left: 15px;
      top: -10px;
    }

    .branch1 .branch-sakura:nth-child(3) {
      left: 25px;
      top: -10px;
    }

    .branch2 .branch-sakura:nth-child(1) {
      left: 5px;
      top: -10px;
    }

    .branch2 .branch-sakura:nth-child(2) {
      left: 15px;
      top: -10px;
    }

    .branch2 .branch-sakura:nth-child(3) {
      left: 25px;
      top: -10px;
    }

    .branch3 .branch-sakura:nth-child(1) {
      left: 5px;
      top: -10px;
    }

    .branch3 .branch-sakura:nth-child(2) {
      left: 15px;
      top: -10px;
    }

    .branch3 .branch-sakura:nth-child(3) {
      left: 25px;
      top: -10px;
    }

    /* 樱花样式 */
    .sakura {
      position: absolute;
      width: 15px;
      height: 15px;
      z-index: 10;
      filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.8));
    }

    .sakura .petal {
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: #ffb6c1;
      border-radius: 100% 0 100% 0;
    }

    .sakura .petal:nth-child(1) {
      top: 0;
      left: 50%;
      transform: translateX(-50%) rotate(0deg);
    }

    .sakura .petal:nth-child(2) {
      top: 2px;
      left: 1px;
      transform: rotate(72deg);
    }

    .sakura .petal:nth-child(3) {
      bottom: 1px;
      left: 1px;
      transform: rotate(144deg);
    }

    .sakura .petal:nth-child(4) {
      bottom: 1px;
      right: 1px;
      transform: rotate(216deg);
    }

    .sakura .petal:nth-child(5) {
      top: 2px;
      right: 1px;
      transform: rotate(288deg);
    }

    /* 左侧樱花位置 */
    .sakura1 {
      top: 10px;
      left: 80px;
    }

    .sakura2 {
      top: 30px;
      left: 100px;
    }

    .sakura3 {
      top: 50px;
      left: 70px;
    }

    .sakura4 {
      top: 70px;
      left: 90px;
    }

    .sakura5 {
      top: 90px;
      left: 60px;
    }

    .sakura6 {
      top: 110px;
      left: 80px;
    }

    .sakura7 {
      top: 130px;
      left: 100px;
    }

    .sakura8 {
      top: 150px;
      left: 70px;
    }

    /* 右侧樱花位置 */
    .sakura9 {
      top: 10px;
      right: 20px;
    }

    .sakura10 {
      top: 30px;
      right: 8px;
    }

    .sakura11 {
      top: 50px;
      right: 8px;
    }

    .sakura12 {
      top: 70px;
      right: 7px;
    }

    .sakura13 {
      top: 90px;
      right: 6px;
    }

    .sakura14 {
      top: 120px;
      right: 5px;
    }

    .sakura15 {
      top: 140px;
      right: 10px;
    }

    .sakura16 {
      top: 190px;
      right: 0px;
    }

    /* 飘落的花朵 */
    .falling-sakura {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #ffb6c1;
      border-radius: 50%;
      animation: fall 10s linear infinite;
      z-index: 10;
      filter: drop-shadow(0 0 3px rgba(255, 182, 193, 0.8));
    }

    .falling-sakura::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #ffb6c1;
      border-radius: 100% 0 100% 0;
      transform: rotate(-45deg);
    }

    .falling1 {
      top: -20px;
      left: 150px;
      animation-duration: 10s;
    }

    .falling2 {
      top: -20px;
      left: 200px;
      animation-duration: 8s;
      animation-delay: 2s;
    }

    .falling3 {
      top: -20px;
      left: 250px;
      animation-duration: 12s;
      animation-delay: 1s;
    }

    .falling4 {
      top: -20px;
      left: 300px;
      animation-duration: 9s;
      animation-delay: 3s;
    }

    .falling5 {
      top: -20px;
      left: 350px;
      animation-duration: 11s;
      animation-delay: 0.5s;
    }

    .falling6 {
      top: -20px;
      left: 180px;
      animation-duration: 9.5s;
      animation-delay: 1.5s;
    }

    .falling7 {
      top: -20px;
      left: 280px;
      animation-duration: 10.5s;
      animation-delay: 2.5s;
    }

    .falling8 {
      top: -20px;
      left: 120px;
      animation-duration: 8.5s;
      animation-delay: 0.5s;
    }

    .falling9 {
      top: -20px;
      left: 220px;
      animation-duration: 9.5s;
      animation-delay: 1.5s;
    }

    .falling10 {
      top: -20px;
      left: 320px;
      animation-duration: 11.5s;
      animation-delay: 2.5s;
    }

    .falling11 {
      top: -20px;
      left: 160px;
      animation-duration: 10s;
      animation-delay: 1s;
    }

    .falling12 {
      top: -20px;
      left: 260px;
      animation-duration: 11s;
      animation-delay: 3s;
    }

    @keyframes fall {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
      }

      100% {
        transform: translateY(480px) rotate(360deg);
        opacity: 0;
      }
    }

    /* 底部樱花样式 */
    .bottom-sakura {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-end;
      gap: 10px;
      padding: 0 20px;
      box-sizing: border-box;
    }

    .bottom-sakura .sakura {
      position: relative;
      margin: 0 10px 10px 0;
      z-index: 10;
    }

    .sakura17 {
      top: 0;
    }

    .sakura18 {
      top: 0;
    }

    .sakura19 {
      top: 0;
    }

    .sakura20 {
      top: 0;
    }

    .sakura21 {
      top: 0;
    }

    .sakura22 {
      top: 0;
    }

    .sakura23 {
      top: 0;
    }

    .sakura24 {
      top: 0;
    }

    .sakura25 {
      top: 0;
    }

    .sakura26 {
      top: 0;
    }

    .sakura27 {
      top: 0;
    }

    .sakura28 {
      top: 0;
    }

    .sakura29 {
      top: 0;
    }

    .sakura30 {
      top: 0;
    }
  </style>

</head>

<body>
  <div class="box">
    <div class="main-branch"></div>
    <div class="main-branch main-branch-2"></div>
    <div class="top-right-branch"></div>
    <div class="left-lines">
      <div class="left-line line1">
        <div class="branch branch1">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch2">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch3">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
      </div>
      <div class="sakura sakura1">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="left-line line2">
        <div class="branch branch1">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch2">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch3">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
      </div>
      <div class="sakura sakura2">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="left-line line3">
        <div class="branch branch1">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch2">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch3">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
      </div>
      <div class="left-line line4">
        <div class="branch branch1">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch2">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch3">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
      </div>
      <div class="sakura sakura3">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>

      <div class="sakura sakura4">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>

      <div class="sakura sakura5">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura6">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura7">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura8">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
    </div>
    <div class="right-lines">
      <div class="right-line line1">
        <div class="branch branch1">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch2">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch3">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
      </div>
      <div class="sakura sakura1">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="right-line line2">
        <div class="branch branch1">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch2">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch3">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
      </div>
      <div class="sakura sakura2">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="right-line line3">
        <div class="branch branch1">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch2">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch3">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
      </div>
      <div class="right-line line4">
        <div class="branch branch1">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch2">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
        <div class="branch branch3">
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
          <div class="branch-sakura">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
          </div>
        </div>
      </div>
      <div class="sakura sakura3">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>

      <div class="sakura sakura4">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>

      <div class="sakura sakura5">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura6">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura7">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura8">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
    </div>
    <!-- 飘落的花朵 -->
    <div class="falling-sakura falling1"></div>
    <div class="falling-sakura falling2"></div>
    <div class="falling-sakura falling3"></div>
    <div class="falling-sakura falling4"></div>
    <div class="falling-sakura falling5"></div>
    <div class="falling-sakura falling6"></div>
    <div class="falling-sakura falling7"></div>
    <div class="falling-sakura falling8"></div>
    <div class="falling-sakura falling9"></div>
    <div class="falling-sakura falling10"></div>
    <div class="falling-sakura falling11"></div>
    <div class="falling-sakura falling12"></div>
    <div class="falling-sakura falling1"></div>
    <div class="falling-sakura falling2"></div>
    <div class="falling-sakura falling3"></div>
    <div class="falling-sakura falling4"></div>
    <div class="falling-sakura falling5"></div>
    <div class="falling-sakura falling6"></div>
    <div class="falling-sakura falling7"></div>
    <div class="falling-sakura falling8"></div>
    <div class="falling-sakura falling9"></div>
    <div class="falling-sakura falling10"></div>
    <div class="falling-sakura falling11"></div>
    <div class="falling-sakura falling12"></div>
    <div class="falling-sakura falling1"></div>
    <div class="falling-sakura falling2"></div>
    <div class="falling-sakura falling3"></div>
    <div class="falling-sakura falling4"></div>
    <div class="falling-sakura falling5"></div>
    <div class="falling-sakura falling6"></div>
    <div class="falling-sakura falling7"></div>
    <div class="falling-sakura falling8"></div>
    <div class="falling-sakura falling9"></div>
    <div class="falling-sakura falling10"></div>
    <div class="falling-sakura falling11"></div>
    <div class="falling-sakura falling12"></div>
    <div class="falling-sakura falling1"></div>
    <div class="falling-sakura falling2"></div>
    <div class="falling-sakura falling3"></div>
    <div class="falling-sakura falling4"></div>
    <div class="falling-sakura falling5"></div>
    <div class="falling-sakura falling6"></div>
    <div class="falling-sakura falling7"></div>
    <div class="falling-sakura falling8"></div>
    <div class="falling-sakura falling9"></div>
    <div class="falling-sakura falling10"></div>
    <div class="falling-sakura falling11"></div>
    <div class="falling-sakura falling12"></div>
    <div class="falling-sakura falling1"></div>
    <div class="falling-sakura falling2"></div>
    <div class="falling-sakura falling3"></div>
    <div class="falling-sakura falling4"></div>
    <div class="falling-sakura falling5"></div>
    <div class="falling-sakura falling6"></div>
    <div class="falling-sakura falling7"></div>
    <div class="falling-sakura falling8"></div>
    <div class="falling-sakura falling9"></div>
    <div class="falling-sakura falling10"></div>
    <div class="falling-sakura falling11"></div>
    <div class="falling-sakura falling12"></div>
    <!-- 底部樱花 -->
    <div class="bottom-sakura">
      <div class="sakura sakura17">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura18">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura19">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura20">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura21">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura22">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura23">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura24">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura25">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura26">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura27">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura28">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura29">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
      <div class="sakura sakura30">
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
    </div>
    <ul>
      <li class="zhen"></li>
      <li class="xiaoyuan"></li>
      <li class="window">
        <div class="window-line horizontal"></div>
        <div class="window-line vertical"></div>
        <div class="window-line vertical"></div>
        <div class="window-line vertical"></div>
        <div class="window-line vertical"></div>
      </li>
      <li class="upyuan"></li>
      <li class="langan">
        <div class="langan-line"></div>
        <div class="langan-line"></div>
        <div class="langan-line"></div>
        <div class="langan-line"></div>
        <div class="langan-line"></div>
        <div class="langan-line"></div>
        <div class="langan-line"></div>
      </li>
      <li class="downyuan"></li>
      <li class="qiang"></li>
      <li class="upyuan"></li>
      <li class="langan">
        <div class="langan-line"></div>
        <div class="langan-line"></div>
        <div class="langan-line"></div>
        <div class="langan-line"></div>
        <div class="langan-line"></div>
        <div class="langan-line"></div>
        <div class="langan-line"></div>
      </li>
      <li class="downyuan"></li>
      <li class="zhu">
        <i>中</i>
        <i>国</i>
        <i>海</i>
        <i>事</i>
      </li>
      <li class="downyuan last"></li>
    </ul>

  </div>

</body>

</html>

五、写在最后

网上都说前端要被AI取代了，我想说说我的想法。起初，我也在迷茫，不知道自己是否要继续学习前端，不知道等我毕业以后，还有没有这个岗位。但是我想，如果不学，连AI生成的东西哪里有错都看不懂。光靠AI生成很难，我曾试着把示例图和我的想法告诉AI，让它帮我生成图片，但结果一直不尽人意，我才想着自己来搭建这幅画。当我忘记某些语法的时候，可以借助AI帮我写出模板代码，我再根据我的需要进行修改。通过本次的前端绘画，我感受到了前端的魅力和学习前端知识的必要性，学习没有坏处，比什么都不学好，以后的事以后再说。AI很厉害，但是想要完成一幅比较成功生动的绘画，还需人类的一臂之力。把AI变成工具，那它将不再可怕！加油吧！

avatar
文章
阅读
粉丝