index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="floating-text" data-text="Coding Zone">Coding Zone</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
font-family: "montserrat",sans-serif;
}
body{
height: 100vh;
background: linear-gradient(0deg,#3498db 50%, #fff 0%);
display: flex;
justify-content: center;
align-items: center;
}
.floating-text{
text-transform: uppercase;
font-size: 80px;
font-weight: 900;
letter-spacing: 6px;
color: #ffffff40;
transform: translateY(0);
animation: fl1 3s infinite linear;
}
.floating-text::before{
content: attr(data-text);
position: absolute;
color: #000;
clip-path: polygon(0 0,100% 0,100% 50%,0 50%);
animation: fl2 3s infinite linear;
}
@keyframes fl1 {
30%{
transform: translateY(10%) rotate(4deg);
}
70%{
transform: translateY(10%) rotate(-4deg);
}
}
@keyframes fl2 {
30%{
clip-path: polygon(0 0,100% 0,100% 24%,0 56%);
}
70%{
clip-path: polygon(0 0,100% 0,100% 56%,0 24%);
}
}
![](https://pinterest.com/pin/create/button/?url=https://codingzoneofficial.blogspot.com/2020/08/floating-text-using-html-and-css.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHknj-iodyMm6w_w9NynTonpL19wW9upEUwqikA99Mw3clDCJXLQD_5T6wdFdW-2YStPu6W3G13vmKPbj_WyKAsop9hNfELZ8Jphz-gIMBrmSkPBMExc3qLVAlpb4PMCI0fZPHoLVzGGE1/s72-c/1.png&description=index.html  <!DOCTYPE html> <html lang="en" dir="ltr">  <head>   <meta charset="utf-8...){kind=link}
0 Comments
Please Do not add any spam link