CSS BEAUTIFUL ROTATE TEXT ANIMATION |HTML| |CSS| |WEBSITE| |TUTORIAL| |S...
HTML And CSS Cooding
August 10, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<svg viewBox="-126 -126 252 252">
<path id="path" d="M-125 0a125 125 0 10250 0 125 125 0 10-250 0" fill="none" />
<text y="40">
<textPath href="#path" startOffset="20">
We have only the dream
To see what you wanted to be
</textPath>
</text>
</svg>
</body>
</html>
CSS SOURCE CODE
@keyframes rotate {
to {
transform: rotate(360deg);}}
body {
height: 100vh;
margin: 0;
background: linear-gradient(190deg,skyblue,yellow,red);
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;}
svg {
width: 35vw;
height: 35vw;
animation: rotate linear 10s infinite;}
svg text {
font-size: 21px;
letter-spacing: 2px;
font-weight: bold;
fill: red;
text-shadow: 2px 2px 1px green;}
