Home >Web Front-end >JS Tutorial >Christmas Tree animation using html css and js code

Christmas Tree animation using html css and js code

Mary-Kate OlsenOriginal: 2024-12-27 22:16:11977browse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Christmas Tree</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #000;
      perspective: 1000px; /* Add perspective to the scene */
    }
    .tree {
      position: relative;
      transform-style: preserve-3d; /* Ensure children are rendered in 3D space */
      transform: rotateX(30deg); /* Rotate the tree to face the correct direction */
    }
    .star {
      position: absolute;
      font-size: 12px;
      opacity: 0;
      animation: twinkle 1s infinite alternate, appear 5s forwards;
    }
    @keyframes twinkle {
      from { opacity: 1; }
      to { opacity: 0.5; }
    }
    @keyframes appear {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  </style>
</head>
<body>
  <div>

The above is the detailed content of Christmas Tree animation using html css and js code. For more information, please follow other related articles on the PHP Chinese website!

css html using JS display position margin viewport background transform animation flex

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can I Dynamically Manage Element Classes in JavaScript?Next article：How Can I Dynamically Manage Element Classes in JavaScript?

See more

Christmas Tree animation using html css and js code

Related articles