CSS BEAUTIFUL ROTATE TEXT ANIMATION |HTML| |CSS| |WEBSITE| |TUTORIAL| |S...

0 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;}

Tags

HTML CSS CSS_GALLERY CSS_IMAGE_GALLERY CSS_ANIMATION

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.