Read more
Continue moving text
Hello dosto in this article I will show you my styling animation tag to you.
Here is my source code-
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="krishna.css">
<title>Document</title>
<style>
body{
justify-content:center;
display:flex;
align-items:center;
min-height:100vh;
background-image:linear-gradient(to right #333 1px, transparent 1px),linear-gradient(to bottom #333 1px ,transparent 1px);
background-size:4vh 4vh;
background:#262626;
}
h2{
display:inline-block;
color:#fff;
font-weight:600;
padding: 0 100px;
font-size:4rem;
}
h2 span{
position:relative;
color:transparent;
-webkit-text-stroke:1px #3DFF52;
line-height:1.2em;
padding:5px 10px;
animation:krishna 4s infinite;
animation-delay:calc(-3s*var(--1))
}
@keyframes krishna {
0%{
display: inline-block;
}
25%,100%{
display:none;
}
}
</style>
</head>
<body>
<h2>
i'm
<span style="--1:0" data-text="YouTuber.">youtuber.</span>
<span style="--1:1" data-text="coder.">coder.</span>
<span style="--1:2" data-text="designer.">designer.</span>
<span style="--1:3" data-text="creative.">creative.</span>
</h2>
</body>
</html>
0 Reviews