Opening Text Animation Effect | HTML CSS Animation
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opening Text Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="font">
<span class="letter" data-letter="A">A</span>
<span class="letter" data-letter="B">B</span>
<span class="letter" data-letter="C">C</span>
<span class="letter" data-letter="D">D</span>
<span class="letter" data-letter="E">E</span>
<span class="letter" data-letter="F">F</span>
<span class="letter" data-letter="G">G</span>
<span class="letter" data-letter="H">H</span>
<span class="letter" data-letter="I">I</span>
<span class="letter" data-letter="J">J</span>
<span class="letter" data-letter="K">K</span>
<span class="letter" data-letter="L">L</span>
<span class="letter" data-letter="M">M</span>
<span class="letter" data-letter="N">N</span>
<span class="letter" data-letter="O">O</span>
<span class="letter" data-letter="P">P</span>
<span class="letter" data-letter="Q">Q</span>
<span class="letter" data-letter="R">R</span>
<span class="letter" data-letter="S">S</span>
<span class="letter" data-letter="T">T</span>
<span class="letter" data-letter="U">U</span>
<span class="letter" data-letter="V">V</span>
<span class="letter" data-letter="W">W</span>
<span class="letter" data-letter="X">X</span>
<span class="letter" data-letter="Y">Y</span>
<span class="letter" data-letter="Z">Z</span>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #e5e5e7;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.font{
width: 90%;
margin: 0 auto;
text-align: center;
}
.letter{
display: inline-block;
position: relative;
font-weight: 900;
font-size: 200px;
margin: 25px;
color: #418aff;
transform-style: preserve-3d;
perspective: 400;
z-index: 1;
}
.letter::before{
position: absolute;
content: attr(data-letter);
transform-origin: top left;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
color: #fff;
text-shadow: -1px 0px 1px rgba(255,255,255,0.8),
1px 0px 1px rgba(0,0,0,0.8);
z-index: 3;
transform: rotateX(0deg) rotateY(-15deg);
}
.letter::after{
position: absolute;
content: attr(data-letter);
transform-origin: top left;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
color: rgba(0,0,0,.11);
z-index: 2;
transform: scale(1.08,1) skew(0deg,1deg);
}
#m.letter::before{
transform: rotateY(-40deg);
}
#m.letter::after{
transform: scale(1.08,1) rotateY(40deg) skew(0deg, 22deg);
}
.letter:hover::before{
transform: rotateY(-40deg);
}
.letter:hover::after{
transform: scale(1.08,1) rotateY(40deg) skew(0deg, 22deg);
}
Comments
Post a Comment