HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Text Fill From Hover Direction</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet">
<div class="main">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<span class="text" data-text="WEBDEV">WEBDEV</span>
</div>
</body>
</html>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f3f3f3;
}
.main {
--color-of-text: #f05855;
position: relative;
}
.main a {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.main a:nth-child(1) {
-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%);
clip-path: polygon(0 0, 100% 0, 50% 50%);
}
.main a:nth-child(2) {
-webkit-clip-path: polygon(100% 0, 100% 100%, 50% 50%);
clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}
.main a:nth-child(3) {
-webkit-clip-path: polygon(0 100%, 50% 50%, 100% 100%);
clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}
.main a:nth-child(4) {
-webkit-clip-path: polygon(0 0, 50% 50%, 0 100%);
clip-path: polygon(0 0, 50% 50%, 0 100%);
}
.main a:hover {
-webkit-clip-path: none;
clip-path: none;
z-index: 2;
}
.main a:nth-child(1):hover ~ .text:before {
--from: circle(0% at 50% 0%);
--to: circle(150% at 0% 50%);
-webkit-animation: textani 1s forwards;
animation: textani 1s forwards;
}
.main a:nth-child(2):hover ~ .text:before {
--from: circle(0% at 150% 50%);
--to: circle(100% at 50% 50%);
-webkit-animation: textani 1s forwards;
animation: textani 1s forwards;
}
.main a:nth-child(3):hover ~ .text:before {
--from: circle(0% at 50% 100%);
--to: circle(150% at 0% 50%);
-webkit-animation: textani 1s forwards;
animation: textani 1s forwards;
}
.main a:nth-child(4):hover ~ .text:before {
--from: circle(0% at 0% 50%);
--to: circle(150% at 0% 50%);
-webkit-animation: textani 1s forwards;
animation: textani 1s forwards;
}
.text {
color: transparent;
-webkit-text-stroke: 1px var(--color-of-text);
text-stroke: 1px var(--color-of-text);
font-size: 350pt;
font-family: 'Staatliches', cursive;
}
.text:before {
content: attr(data-text);
position: absolute;
}
@keyframes textani {
0% {
-webkit-clip-path: var(--from);
clip-path: var(--from);
}
100% {
-webkit-clip-path: var(--to);
clip-path: var(--to);
color: var(--color-of-text);
}
}