主页 / 问题 / 1603426
Accepted
Alexandr_TT
Asked:2024-12-26 18:46:31 +0000 UTC2024-12-26 18:46:31 +0000 UTC

2024-2025年新年比赛！

  • 772

恭喜 NG 2025 比赛 NNL993 的获胜者

竞赛序言及条件：
新年实际上是每个人庆祝的唯一节日。他们送礼物，玩得开心，祝贺每个人，甚至是那些很长时间没有联系的人，当然还有许愿。 ***无论如何，让我们一起庆祝 2024-2025 年新年吧！***
往届 NG 比赛链接：

введите сюда описание изображения

主题列表：

  • 标题动画 2025 年新年快乐！
  • 弗罗斯特神父、雪少女的形象
  • 新年树：圣诞树装饰品、花环
  • 星空的图像、动画
  • 雪花、降雪的动画
  • 烟花、鞭炮

附加材料：

  • 带人字形的背景图像

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>  
</svg>

  • 圣诞树+雪人

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
             <!-- Елочка -->
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>  
           <!-- Снеговик -->
 <image  id="Snowman" transform="translate(950 720) scale(1 1)" x="0" xlink:href="https://isstatic.askoverflow.dev/mbefD.png" width="13%" height="13%"   />
</svg>

  • 圣诞树+圣诞老人

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>    
 
 <image id="Ded_Moroz" transform="translate(250 550) scale(1 1)" xlink:href="https://isstatic.askoverflow.dev/TYaVo.png" width="30%" height="30%" opacity="1">
</svg>

  • 雪少女

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>    
          <!-- Снегурочка -->
 <image id="Girl" transform="translate(850 670) scale(0.8 0.8)" xlink:href="https://isstatic.askoverflow.dev/RDght.png" width="30%" height="30%" opacity="1">
</svg>

  • 野兔与吉他

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>    
          <!-- Заяц -->
<image  id="zayka"  transform="translate(450 750) scale(0.75)"
             x="0" xlink:href=" https://isstatic.askoverflow.dev/3xzEW.png"
             
                /> 
</svg>

更新 01/02/2025

  • 2025年的象征+飞溅背景

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
             <!-- Фон -->
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>    
          <!-- Змея - символ 2025 года -->
  <image  id="snake" x="250" y="350" transform="scale(2)" xlink:href="https://isstatic.askoverflow.dev/QkvLYcnZ.png"/>
</svg>

笔记

对受访者的要求：

  1. 不要在您的答案中一对一地复制别人的代码。

  2. 如果您使用其他人的代码，请务必标明来源和作者的链接以及您具体修改的内容。

要参加比赛，您需要有良好的假期心情，渴望做一些明亮、有趣和难忘的事情。渴望创造性地创造出属于你自己的东西，让你在接下来的一年里温暖而自豪地记住它。
新年比赛最重要的不是胜利，而是参与！

比赛获胜者

涵盖“主题列表”部分中的一个或多个主题的作品，以及以积分形式获得最多正面评价的作品，将受到认可。

javascript

8 个回答

  1. 这里看起来有点歪，所以codepen链接是https://codepen.io/aliencash/pen/ByBdLRW

    const wrapper = document.querySelector(".perspective");

for (i = 0; i < window.innerHeight; i++) {
  let addPoint = document.createElement("div");
  addPoint.classList.add("point");
  addPoint.style.width = 5 + Math.random() * 90 + "vw";
  if (Math.random() < .5) {
    addPoint.style.setProperty("--pointLeft", "unset");
    addPoint.style.setProperty("--pointRight", 0);
  } else {
    addPoint.style.setProperty("--pointLeft", 0);
    addPoint.style.setProperty("--pointRight", "unset");
  }
  addPoint.style.animationDelay = Math.random() * 2 + "s";
  wrapper.appendChild(addPoint);
}
    .perspective {
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.point {
  width: 100px;
  height: 1px;
  animation: anim 2s linear infinite;
  position: relative;
}

.point::before {
  content: '';
  position: absolute;
  left: var(--pointLeft);
  right: var(--pointRight);
  width: 3px;
  height: 2px;
  border-radius: 100%;
  background-color: #fff;
  box-shadow: 0 0 6px #fff;
}

@keyframes anim {
  from {
    transform: rotateY(0deg) translatey(-10vh);
  }

  to {
    transform: rotateY(360deg) translatey(10vh);
  }
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background-image: url(https://isstatic.askoverflow.dev/PBRad.jpg);
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
    <div class="perspective"></div>

    • 19 

  2. body {
  background: rgb(131, 58, 180);
  background: radial-gradient(circle, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 0%, rgba(252, 176, 69, 1) 100%);
}

.ny {
  position: relative;
  text-align: center;
  font-size: 50px;
  color: white;
  font-family: monospace;
  -webkit-box-reflect: below -25px linear-gradient(transparent, rgba(0, 0, 0, .50));
  box-reflect: below -25px linear-gradient(transparent, rgba(0, 0, 0, .50));
}

.ny span {
  display: inline-block;
  animation: ny 0.8s infinite;
  animation-delay: calc(0.25s*var(--ny));
}

@keyframes ny {
  0% {transform: translateY(0)}
  25% {transform: translateY(-15px)}
  50% {transform: translateY(0)}
  100% {transform: translateY(0)}
}
    <body>
  <div class="ny">
    <span style="--ny:1">2</span>
    <span style="--ny:2">0</span>
    <span style="--ny:3">2</span>
    <span style="--ny:4">5</span>
  </div>
</body>

    • 15
  3. Best Answer

    圣诞树：

    const canvasWidth = 600
const canvasHeight = 400
const centerX = canvasWidth / 2
const stars = []

function setup() {
  createCanvas(canvasWidth, canvasHeight);

  for (let i = 0; i < 500; i++) {
    stars[i] = [random(canvasWidth), random(canvasHeight), random(2.5), random() > 0.5]
  }
}

let angle = 0

function draw() {
  background(0)

  // Звёздное небо
  stroke(255)

  for (let i = 0; i < stars.length; i++) {
    const [x, y, weight, decrease] = stars[i]

    strokeWeight(weight)
    point(x, y)

    if (weight >= 2.5) {
      stars[i][3] = true
    } else if (weight <= 1) {
      stars[i][3] = false
    }

    if (decrease) {
      stars[i][2] -= 0.025
    } else {
      stars[i][2] += 0.025
    }
  }

  // Типа хвоя
  stroke([0, 255, 0])
  strokeWeight(1)

  for (let i = 0; i < 5; i++) {
    for (let j = 0; j < i * 10 + 20; j++) {
      const lineY = (i - 1) * 50 + 100
      const lineYEnd = i * 50 + 100

      line(centerX, lineY, centerX + (i * 20 + 40) * Math.cos(angle + j), lineYEnd)
    }
  }

  // Звезда
  push()
  translate(centerX, 40)
  rotate(angle)
  stroke([250, 225, 0])
  strokeWeight(2)
  const radius = 25
  const step = Math.PI * 2 / 5
  const innerRadius = radius / 2

  for (let i = 0; i < 5; i++) {
    line(
      radius * Math.cos(step * i - Math.PI / 2),
      radius * Math.sin(step * i - Math.PI / 2),
      innerRadius * Math.cos(step * (i + 0.5) - Math.PI / 2),
      innerRadius * Math.sin(step * (i + 0.5) - Math.PI / 2)
    )
    line(
      radius * Math.cos(-step * i - Math.PI / 2),
      radius * Math.sin(step * i - Math.PI / 2),
      innerRadius * Math.cos(-step * (i + 0.5) - Math.PI / 2),
      innerRadius * Math.sin(step * (i + 0.5) - Math.PI / 2)
    )
  }
  pop()

  // Ствол (не волнуйтесь, у меня есть лицензия на огнестрельное)
  stroke([96, 64, 32])

  for (let i = 0; i < 20; i++) {
    const x = centerX + 10 * Math.cos(angle + i)

    line(x, 300, x, 350)
  }

  angle += 0.01
}
    <script src="https://github.com/processing/p5.js/releases/download/v1.11.2/p5.min.js"></script>

    大量的雪：

    （把雪拉起来就可以做成雪球）

    const stars = []
const snow = []
const userSnow = []
const snowflakes = []
let inside = false
let holdsSnow = false

function setup() {
  createCanvas(600, 400);

  for (let i = 0; i < 125; i++) {
    stars.push([random(width), random(height), random(2.5), random() > 0.5])
  }

  for (let i = 0; i < 10; i++) {
    snow.push([100 * i + random(10), height, random(100) + 100])
  }

  for (let i = 0; i < 100; i++) {
    snowflakes.push([random(width), -random(height * 2), random(2) + 2, random(10), random() / 25])
  }
}

function draw() {
  background(0);

  // stars
  stroke([255, 255, 255, 255 * 0.25])

  for (let i = 0; i < stars.length; i++) {
    const [x, y, weight, decrease] = stars[i]

    strokeWeight(weight)
    point(x, y)

    if (weight >= 2.5) {
      stars[i][3] = true
    } else if (weight <= 1) {
      stars[i][3] = false
    }

    if (decrease) {
      stars[i][2] -= 0.025
    } else {
      stars[i][2] += 0.025
    }
  }

  // snow
  for (let i = 0; i < snow.length; i++) {
    const [x, y, r] = snow[i]

    circle(x, y, r)
  }

  // snowflakes
  for (let i = 0; i < snowflakes.length; i++) {
    const [x, y, r, a, s] = snowflakes[i]

    circle(x, y, r)

    snowflakes[i][0] += Math.cos(a)
    snowflakes[i][1] += 0.5
    snowflakes[i][3] += s

    if (y > height + r) {
      snowflakes[i][0] = random(width)
      snowflakes[i][1] = -random(height * 2)
      snowflakes[i][2] = random(2) + 2
      snowflakes[i][3] = random(10)
    }
  }

  // cursor
  if (inside) {
    if (mouseIsPressed) {
      holdsSnow = true
      cursor('grabbing')
    } else {
      holdsSnow = false
      cursor('grab')
    }
  } else {
    if (holdsSnow) {
      cursor('grabbing')
    } else {
      cursor('default')
    }
  }


  if (holdsSnow) {
    circle(mouseX, mouseY, 15)
  }

  for (let i = 0; i < userSnow.length; i++) {
    const [x, y, r, s] = userSnow[i]

    circle(x, y, r)

    userSnow[i][1] += s
    userSnow[i][3] += 0.125

    if (y > height + r) {
      userSnow.splice(i, 1)
    }
  }
}

function mouseMoved() {
  checkIfInside()
}

function mouseReleased() {
  checkIfInside()

  if (holdsSnow && !inside) {
    holdsSnow = false

    userSnow.push([mouseX, mouseY, 15, 1])
  }
}

function checkIfInside() {
  let isInside = false

  for (let i = 0; i < snow.length; i++) {
    const [x, y, r] = snow[i]

    if(pointIsInCircle(mouseX, mouseY, x, y, r / 2)) {
      isInside = true
      break
    }
  }

  inside = isInside
}

function pointIsInCircle(x1, y1, x2, y2, r) {
  return distance(x1, y1, x2, y2) < r
}

function distance(x1, y1, x2, y2) {
  return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
}
    <script src="https://github.com/processing/p5.js/releases/download/v1.11.2/p5.min.js"></script>

    圣诞树和雪人（自动绘制）：

    function setup() {
  createCanvas(600, 400)
}

const centerX = 300
const centerY = 200

let angle = 0
let length = 50
let lineX = centerX
let lineY = 100
let lineXEnd = centerX
let lineYEnd = 50
let lastX = 0
let lastY = 0
let lines = []
let y = 100

function draw() {
  background(0)

  for (let i = 0; i < lines.length; i++) {
    const [x1, y1, x2, y2, color] = lines[i]

    stroke(color)
    line(x1, y1, x2, y2)
  }

  if (angle < 110) {
    if (angle < 90) {
      length = 50 + 20 * Math.floor(angle / 12)
      y = 100 + 30 * Math.floor(angle / 12)
    }

    lineX = centerX + length * Math.cos(angle)
    lineY = y
    lineYEnd = y + -Math.abs(length * Math.sin(angle))

    noFill()
    stroke(255)
    line(lineX, lineY, lineXEnd, lineYEnd)

    lines.push([lineX, lineY, lineXEnd, lineYEnd, [50, 200, 50]])
  }

  if (angle > 110 && angle < 120) {
    lineY = 310
    lineYEnd = lineY + 50
    lineX = centerX + 25 * Math.cos(angle)
    lineXEnd = centerX + 25 * Math.cos(angle)

    noFill()
    stroke(255)
    line(lineX, lineY, lineXEnd, lineYEnd)

    lines.push([lineX, lineY, lineXEnd, lineYEnd, [96, 64, 32]])
  }

  if (angle > 120 && angle < 180) {
    length = Math.floor((angle - 120) / 20 + 1) * 20
    lineX = width - 100
    lineY = centerY - 50 + 50 * -Math.floor((120 - angle) / 20)
    lineXEnd = lineX + length * Math.cos(angle)
    lineYEnd = lineY + length * Math.sin(angle)

    noFill()
    stroke(255)
    line(lineX, lineY, lineXEnd, lineYEnd)

    lines.push([lineX, lineY, lineXEnd, lineYEnd, [255, 255, 255]])
  }

  if (angle > 180 && angle < 210) {
    length = 4
    lineX = width - 100
    lineY = centerY + 25 * Math.floor((angle - 180) / 10 + 1)
    lineXEnd = lineX + length * Math.cos(angle)
    lineYEnd = lineY + length * Math.sin(angle)

    noFill()
    stroke(255)
    line(lineX, lineY, lineXEnd, lineYEnd)

    lines.push([lineX, lineY, lineXEnd, lineYEnd, [0, 0, 0]])
  }

  if (angle > 180) {
    angle += 0.05 // 0.05
  } else {
    angle += 0.05
  }
}
    <script src="https://github.com/processing/p5.js/releases/download/v1.11.2/p5.min.js"></script>

    • 15 

  4. const primeLengths = [1, 3, 5, 7, 11, 13, 16, 19, 21, 24];
const trunkLengths = [3, 3];

const tree = document.getElementById("tree");
const trunk = document.getElementById("trunk");

const getRandomBinaryString = length => Array.from({
  length
}, () => Math.random() < 0.5 ? "0" : "1").join("");

const fillTheTree = (arr, place) => {
  place.innerHTML = arr.map(length => `<span>${getRandomBinaryString(length)}</span>`).join("");
};

fillTheTree(primeLengths, tree);
fillTheTree(trunkLengths, trunk);

const animateTree = () => {
  const spans = tree.querySelectorAll("span:not(:first-child)");

  spans.forEach(span => {
    const chars = Array.from(span.textContent, () => (Math.random() < 0.5 ? "0" : "1"));
    const glowCount = Math.floor(Math.random() * chars.length) + 1;
    const indicesToGlow = new Set(Array.from({
      length: glowCount
    }, () => Math.floor(Math.random() * chars.length)));

    span.innerHTML = chars
      .map((char, i) => indicesToGlow.has(i) ? `<b class="glow">${char}</b>` : char)
      .join("");
  });
};

setInterval(animateTree, 1000);
    :root {
  --first-color: #2E6311;
  --second-color: #ED404A;
  --tree-color: #EC6F2A;
  --font-family: sans-serif;
  --background-gradient: linear-gradient(180deg, #012349, #00030A 70%, #00030A);
}

body {
  margin: 0;
  height: 100vh;
  background: var(--background-gradient);
  font-family: var(--font-family);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2em;
  font-weight: 300;
}

span {
  display: block;
  text-shadow: 0 0 5px var(--first-color),
    0 0 10px var(--first-color),
    0 0 15px var(--first-color),
    0 0 20px var(--first-color),
    0 0 25px var(--first-color),
    0 0 30px var(--first-color);
}

span b {
  position: relative;
  z-index: 2;
  font-weight: 300;
}

#tree span:first-child {
  text-shadow: 0 0 5px var(--second-color),
    0 0 10px var(--second-color),
    0 0 15px var(--second-color),
    0 0 20px var(--second-color),
    0 0 25px var(--second-color) !important;
}

.tree {
  text-align: center;
  line-height: 1.5;
  white-space: pre;
}

.down {
  font-family: "Pacifico", serif;
  font-weight: 400;
  text-align: center;
  max-width: 700px;
  line-height: 1.2;
  position: relative;
  overflow: visible;
  padding: 3vh 0;
}

.down:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse, #93061A 0%, transparent 100%);
  filter: blur(10px);
  border-radius: 50%;
  z-index: -1;
}

.glow {

  text-shadow: 0 0 5px var(--tree-color),
    0 0 10px var(--tree-color),
    0 0 15px var(--tree-color),
    0 0 20px var(--tree-color),
    0 0 25px var(--tree-color);
}

.bg_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80vh;
  color: rgba(32, 67, 107, 0.1);
  z-index: -3;
}
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">

<div class="bg_text">2025</div>
<main>
  <div class="tree" id="tree"></div>
  <div class="tree" id="trunk"></div>
</main>
<h1 class="down">Merry Christmas <br> and <br> Happy New Year</h1>

    • 10 

  5. @property --bpx1 {
  syntax: "<length>";
  inherits: false;
  initial-value: -64px;
}

@property --bpy1 {
  syntax: "<length>";
  inherits: false;
  initial-value: -64px;
}

@property --bpx2 {
  syntax: "<length>";
  inherits: false;
  initial-value: -128px;
}

@property --bpy2 {
  syntax: "<length>";
  inherits: false;
  initial-value: -128px;
}

@property --bpx3 {
  syntax: "<length>";
  inherits: false;
  initial-value: -256px;
}

@property --bpy3 {
  syntax: "<length>";
  inherits: false;
  initial-value: -256px;
}

body {
  background-color: #001;
  margin: 0;
}

div {
  display: grid;
  place-content: center;
  font: 700 clamp(6.25rem, 2.778rem + 13.889vw, 25rem)/1 sistem-ui, sans-serif;
  text-align: center;
  min-height: 100dvh;

  --s: 0.01em;
  --c: #fff;
  color: #0088;

  background-image:
    radial-gradient(oklch(from var(--c) l c h / 0.4) calc(3 * var(--s)),
      transparent calc(6 * var(--s))),
    radial-gradient(oklch(from var(--c) l c h / 0.6) calc(12 * var(--s)),
      transparent calc(24 * var(--s))),
    radial-gradient(oklch(from var(--c) l c h / 0.8) calc(24 * var(--s)),
      transparent calc(48 * var(--s)));
  background-size:
    calc(32 * var(--s)) calc(32 * var(--s)),
    calc(64 * var(--s)) calc(64 * var(--s)),
    calc(128 * var(--s)) calc(128 * var(--s));
  background-position-x: var(--bpx1), var(--bpx2), var(--bpx3);
  background-position-y: var(--bpy1), var(--bpy2), var(--bpy3);
  background-clip: text;
  animation: animx1 2.7s ease-in-out infinite,
    animy1 3.14s ease-in-out infinite, animx2 2.7s ease-in-out infinite,
    animy2 3.14s ease-in-out infinite, animx3 2.7s ease-in-out infinite,
    animy3 3.14s ease-in-out infinite;
}

@keyframes animx1 {

  from,
  to {
    --bpx1: -64px;
  }

  50% {
    --bpx1: 64px;
  }
}

@keyframes animy1 {

  from,
  to {
    --bpy1: -64px;
  }

  50% {
    --bpy1: 64px;
  }
}

@keyframes animx2 {

  from,
  to {
    --bpx2: -128px;
  }

  50% {
    --bpx2: 128px;
  }
}

@keyframes animy2 {

  from,
  to {
    --bpy2: -128px;
  }

  50% {
    --bpy2: 128px;
  }
}

@keyframes animx3 {

  from,
  to {
    --bpx3: -256px;
  }

  50% {
    --bpx3: 256px;
  }
}

@keyframes animy3 {

  from,
  to {
    --bpy3: -256px;
  }

  50% {
    --bpy3: 256px;
  }
}
    <div>С Новым<br>2025<br>Годом!</div>

    • 9

  6. 题字动画：新年快乐！

    这些字母一开始混乱地移动，然后停在适当的位置。
    （灰色刻字模板）在图片的背景上。

    水平停车字母

    将代码片段展开至全屏，然后使用 LMB 单击画布

    #text1 {

fill:#860D86; 
stroke:white;
stroke-width:2;
}
    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>  

 <rect width="100%" height="100%" fill="url(#grad)" />
<text  x="200 " y="500" 
font-size="120" fill="white" stroke-width="2" stroke="white" opacity="0.4">С Новым годом!</text> 
<g transform="translate(0)">
<text id="text1" x="200" y="500"
font-size="120">С Новым годом!</text> 

<animate xlink:href="#text1" 
    attributeName="x" 
    attributeType="XML"
        values="200 233 266 299 332 365 400 431 464 497 530 563 596;
    100 600 200 365 700 465 465 563 530 398 431 850 900; 
    200 500 900 950 150 531 300 620 150 266 365 650 900;
    332 233 820 300 800 633 200 670 300 850 800 530 266;
    464 900 900 900 820 670 430 900 530 600 233 365 100;
    332 100 100 100 500 100 800 563 900 700 900 100 100;
  200   233 266 299 332 365 400 431 464 497 530 563 596"
    dur="5s"
    begin="svg1.click"
    repeatCount="2" />
<animate xlink:href="#text1"
    attributeName="y" 
    attributeType="XML"
        values="500 500 500 500 500 500 500 500 500 500 500 500 500;
    100 200 850 100 250 175 750 100 750 720 850 500 50; 
    100 600 600 250 200 450 50 200 520 550 300 300 750;
    500 100 650 650 600 150 550 50 150 550 200 550 400; 
    800 300 100 750 150 650 75 350 550 700 755 120 800;
    800 600 300 150 750 350 700 650 200 250 500 650 100;
    500 500 500 500 500 500 500 500 500 500 500 500 500"
    dur="4s"
    begin="svg1.click"
    repeatCount="2" />
</g>

</svg>

    字母垂直停放

    #text1 {

fill:#00FF3C; 
stroke:white;
stroke-width:2;
}
    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>  

 <rect width="100%" height="100%" fill="url(#grad)" />
<text  x="200 " y="500" 
font-size="120" fill="white" stroke-width="2" stroke="white" opacity="0.4">С Новым годом!</text> 
<g transform="translate(0)">
<text id="text1" x="200" y="500"
font-size="120">С Новым годом!</text> 

<animate xlink:href="#text1" 
    attributeName="x" 
    attributeType="XML"
        values="200 233 266 299 332 365 400 431 464 497 530 563 596;
    100 600 200 365 700 465 465 563 530 398 431 850 900; 
    200 500 900 950 150 531 300 620 150 266 365 650 900;
    332 233 820 300 800 633 200 670 300 850 800 530 266;
    464 900 900 900 820 670 430 900 530 600 233 365 100;
    332 100 100 100 500 100 800 563 900 700 900 100 100;
  200   233 266 299 332 365 400 431 464 497 530 563 596"
    dur="4s"
    begin="svg1.click"
    repeatCount="2" />
<animate xlink:href="#text1"
    attributeName="y" 
    attributeType="XML"
        values="500 500 500 500 500 500 500 500 500 500 500 500 500;
    100 200 850 100 250 175 750 100 750 720 850 500 50; 
    100 600 600 250 200 450 50 200 520 550 300 300 750;
    500 100 650 650 600 150 550 50 150 550 200 550 400; 
    800 300 100 750 150 650 75 350 550 700 755 120 800;
    800 600 300 150 750 350 700 650 200 250 500 650 100;
    500 500 500 500 500 500 500 500 500 500 500 500 500"
    dur="5s"
    begin="svg1.click"
    repeatCount="2" />
</g>

</svg>

    • 6

  7. Ёлочка вам нравится?

    введите сюда описание изображения

    Сделал ёлку в стиле одной игры, но SO ни дал запихать её не только в сниппет, но даже в тело ответа (максимально 30к символов, а кода точно больше 😅).
    По этому будет просто ссылка на Сodepen.

    codepen.io/de-minov/pen/KwPymyB
# SO, ну это не серьёзно..

    Не рассчитывал на участие, но сделать хотелось.

    Ранее делал костёр из одной игры, вот по этому такой стиль.

    codepen.io/de-minov/pen/VYZLWZq
# 🤡
    • 6

  8. 这不是一个竞争性的答案，而是试图帮助那些想要投入这个奇妙的动画世界的初学者。

    首先，您可以从以下部分中获取现成的空白： 竞赛主题标题中的
    其他材料。 本回答会持续更新，欢迎回来查看。

    1. 以模板为例：2025年符号+启动背景

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
             <!-- Фон -->
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>    
          <!-- Змея - символ 2025 года -->
  <image  id="snake" x="250" y="350" transform="scale(2)" xlink:href="https://isstatic.askoverflow.dev/QkvLYcnZ.png"/>
</svg>

    1. 让我们使用命令 - animateTransform相对于背景移动和放大对象

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
           <!-- Фон с ёлочкой -->
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>    
          <!-- Символ 2025 года Змея -->
<image  id="zmeya" x="75"  xlink:href=" https://isstatic.askoverflow.dev/pB6og8Sf.png">
             
              <!-- команда анимации перемещения объекта -->
 <animateTransform  attributeName="transform" type="translate "  values="175 725; 850 725; 175 725" dur="16s" begin="0.5s" repeatCount="5" fill="freeze" />  
                 <!-- команда анимации увеличения, уменьшения объекта -->
  <animateTransform  attributeName="transform" type="scale "  values="1;2;1" dur="8s" begin="0.5s" additive="sum" repeatCount="5"  fill="freeze" />
 </image>  
   </svg>

    Нюанс : атрибут additive="sum" необходим для одновременной работы двух анимаций: перемещение, увеличение

    • 3

相关问题