Scribd
Upload
13 views3 pages

Animated Flower with Text Display

This document is an HTML file that creates a web page featuring a moving flower animation. The flower rotates continuously while a text message 'Miss u' is displayed at the bottom of the page. The page is styled with CSS to ensure a clean and simple layout with a light background.

Uploaded by

flowerblair3
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views3 pages

Animated Flower with Text Display

This document is an HTML file that creates a web page featuring a moving flower animation. The flower rotates continuously while a text message 'Miss u' is displayed at the bottom of the page. The page is styled with CSS to ensure a clean and simple layout with a light background.

Uploaded by

flowerblair3
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Moving Flower</title>

<style>

body {

margin: 0;

overflow: hidden;

background-color: #f0f0f0;

.container {

position: relative;

width: 100%;

height: 100vh;

.flower {

position: absolute;

top: 50%;

left: 50%;
transform: translate(-50%, -50%);

animation: moveFlower 5s linear infinite;

@keyframes moveFlower {

0% {

transform: translate(-50%, -50%) rotate(0deg);

50% {

transform: translate(-50%, -50%) rotate(180deg);

100% {

transform: translate(-50%, -50%) rotate(360deg);

}
.text {

position: absolute;

top: 80%;

left: 50%;

transform: translateX(-50%);

font-size: 24px;

font-family: Arial, sans-serif;

color: #333;

</style>

</head>

<body>

<div class="container">

<img class="flower" src="[Link]


alt="Flower">

<div class="text">Miss u</div>

</div>

</body>

</html>

You might also like