In this topic you will able to learn Text Split CSS Hover Animation Effects where we use both HTML & CSS. This a advance topic of this CSS Hover Animation Effect so that learn it carefully. So read it till the end. If you want to learn more about this topic in more advance CSS effects then SUBSCRIBE to my channel.
Subscribe Now
"index.html" Code:-
"index.html" Code:-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Split text</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<ul id="nav">
<li class="nav-link">
<h1 data-name="home">Home</h1>
</li>
<li class="nav-link">
<h1 data-name="about">About</h1>
</li>
<li class="nav-link">
<h1 data-name="services">Services</h1>
</li>
<li class="nav-link">
<h1 data-name="contact">Contact</h1>
</li>
</ul>
</body>
</html>
"style.css" Code:-
"style.css" Code:-
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: #020024;
color: #fff;
}
ul {
list-style: none;
}
h1 {
font-size: 5rem;
position: relative;
text-transform: uppercase;
transition: all 300ms ease;
width: fit-content;
cursor: pointer;
}
h1:hover {
transform: skew(10deg);
}
h1::before {
content: attr(data-name);
position: absolute;
top: 0;
left: -20px;
background: #020024;
height: 3rem;
overflow: hidden;
transition: all 300ms ease;
padding-left: 20px;
}
h1:hover::before {
top: -3px;
left: 0;
color: hotpink;
}
h1::after {
content: "";
height: 4px;
width: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: hotpink;
transition: all 300ms ease;
}
h1:hover::after {
width: 120%;
outline: 5px solid #020024;
}
0 Comments
Post a Comment