FLOATING TEXT

FLOATING TEXT IN HTML.

If you are begginer and want to learn html very easily. The you are at right place I have written notes for HTML only at rs50 for begginers.

Now here is the code

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #f2f2f2;

font-family: Arial, sans-serif;

}

.floating-text {

position: absolute;

animation: float 5s infinite;

font-size: 24px;

color: #ffffff;

background-color: #ff6b6b;

padding: 10px 20px;

border-radius: 5px;

box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);

}

@keyframes float {

0% {

transform: translateX(0px) translateY(0px);

}

50% {

transform: translateX(100px) translateY(-20px);

}

100% {

transform: translateX(0px) translateY(0px);

}

</style>

</head>

<body>

<div class="floating-text">This text is floating!</div>

</body>

</html>

Follow For more.