The HTML file contains a circle div with a nested animated-text div inside it.
1. CSS styles are applied to create a circular shape, set a linear gradient background, and define initial properties for the animated text.
2. Keyframes in CSS are used to specify the animation behavior. The text will float up and down with changing opacity.
3.The JavaScript function show text is called when the circle is clicked, making the animated text visible.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Animated Text</title>
<style>
body {
margin: 0;
overflow: hidden;
}
.circle {
width: 200px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to bottom right, red, blue);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
}
.animated-text {
display: none;
color: white;
position: absolute;
animation: floatText 3s infinite;
}
@keyframes floatText {
0% {
transform: translateY(-50px);
opacity: 0;
}
50% {
transform: translateY(50px);
opacity: 1;
}
100% {
transform: translateY(-50px);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="circle" onclick="showText(this)">
<div class="animated-text">Coding Made Easy</div>
</div>
<script>
function showText(element) {
const text = document.querySelector('.animated-text');
text.style.display = 'block';
}
</script>
</body>
</html>
Leave a Reply