<!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!