Skip to main content
SimilarExport ZIP
100%

CSS-Animation Sunrise Hello HTML

✓ Published0🌍 Public
RRussell Watson
Last edited Feb 2, 2020
Created on Feb 2, 2020

A single HTML page uses CSS animations to depict a sunrise over the sea, with the text "Hello" and "HTML" scaling and rising as the background shifts from dark navy to sky blue and the text color changes from red to yellow. The example relies entirely on standard HTML and CSS, including the `@keyframes` rule and the `animation-name` and `animation-duration` properties applied to the `body` and `message` elements. No JavaScript libraries or data sources are involved; it is a self-contained demonstration of pure CSS-based visual effects.

AI-generated description

A bare minimum HTML page - with CSS animation

Inspiration from CSS Sunrise

MIT Licensed

Similar vizzes

Loading thumbnail…

CSS Animation of Hello HTML

This example showcases a minimal HTML page where the text “Hello HTML” slides down from the top of the viewport using a CSS animation. The page defines a `@keyframes` rule named `slidein`, which animates the body’s `margin-top` from 100% to 0% over three seconds. The animation is applied directly to the body element via the `animation-name` and `animation-duration` properties. This demonstrates a purely CSS-driven approach without JavaScript or external libraries, relying solely on the browser’s native animation engine.

RRussell Watson
77% match
Loading thumbnail…

sunrise

This example shows a simple HTML page that displays a large, centered message reading “Hello HTML!” using custom CSS styling. The code relies on plain HTML and CSS, with no external libraries or JavaScript logic beyond the static markup. The message is styled with a font size of 13em and aligned to the center of the viewport. This minimal demonstration focuses on rendering text through basic document structure and cascading style rules, with no data processing or interactive behavior.

Ppeddubalaji@gmail.com
75% match
Loading thumbnail…

Sunrise

This visualization depicts an animated sunrise scene with a gradient sky transitioning through colors, a moving sun, and layered landscape silhouettes. The SVG markup uses CSS and JavaScript-defined gradients, including radial and linear gradients, to create the sky and terrain. Animation is driven by SVG `<animate>` elements that cycle attribute values over 15-second intervals. The sun’s vertical position, represented by a circle’s `cy` attribute, rises and falls, while sky and land gradient colors shift between light and dark tones.

Sshabdullah05
67% match
Loading thumbnail…

Sunrise

This visualization depicts an animated sunrise scene with a gradient sky transitioning through colors, a moving sun, and layered landscape silhouettes. The SVG markup uses CSS and JavaScript-defined gradients, including radial and linear gradients, to create the sky and terrain. Animation is driven by SVG `<animate>` elements that cycle attribute values over 15-second intervals. The sun’s vertical position, represented by a circle’s `cy` attribute, rises and falls, while sky and land gradient colors shift between light and dark tones.

Sshabdullah05
67% match
Loading thumbnail…

CSS Animated Starfield

This example demonstrates a purely decorative, CSS-animated starfield that brings a static header image to life. The animation adds a subtle twinkling effect to the stars by fading them in and out while slightly scaling their size, creating a gentle shimmering ambiance. The code relies exclusively on CSS keyframes and the `-webkit-animation` property, with each star's position and animation delay defined by its unique ID. The background image and texture are layered using CSS `background` properties, while the foreground cover element is positioned absolutely. No JavaScript libraries are used; the effect is achieved solely through HTML and CSS.

CCKschneid
67% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple sunrise and sunset animation using a yellow circle that moves vertically within an SVG canvas. The circle alternates between two positions—descending to the bottom and rising to the top—via a CSS `@keyframes` rule named `sunrise-sunset`, applied with an infinite alternate timing function. The markup also includes a static SVG circle and a brief demonstration of D3 version 7's `select` function to insert text into the body. The animation runs in a 500x500 viewport, showing basic CSS-driven motion without JavaScript interaction or external data.

FFouzia A.
67% match
Loading thumbnail…

02•02•20•20 - CSS Animation for a very special day

A palindrome date is displayed as a glowing digital clock using the LED Digital 7 web font, with the text “02•02•20•20” styled with layered CSS text-shadow effects in pink and blue. The entire container element rotates continuously through a 360-degree spin via CSS `@keyframes` animation, creating a looping motion effect over ten seconds. The page uses HTML and modular CSS files for layout, font import, neon styling, and animation, all controlled without JavaScript. The design centers the date on a dark background, emphasizing the typographic and animated presentation.

RRussell Watson
67% match
Loading thumbnail…

SVG with CSS Animation

This example demonstrates the interplay between HTML and CSS for rendering and animating text in a web browser. It presents a static HTML page with a large, centered message that uses CSS styling for visual formatting. The core functionality relies on the HTML `<div>` element for content structure and the CSS `font-size` and `text-align` properties for layout and appearance. Although the example references a React starter, this specific implementation uses plain HTML and CSS without JavaScript or additional animation libraries, showcasing a bare-minimum approach to web-based visualization.

Ddaigou65
66% match