CSS Text Cut Effect On Hover Source Code

https://webdevtrick.com/css-text-cut-effect/

by Jens Kühn

HTML

<div class="main">
  <p class="rtext"><a href="https://webdevtrick.com" class="txt" data-txt="SECRET">WEBDEVTRICK.COM</a></p>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
 
body {
  width: 100%;
  height: 100%;
  background: #1D1F20;
}
 
.main {
  position: relative;
  width: 100%;
  height: 100vh;
}
 
.rtext {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 120px;
  height: 40px;
  line-height: 40px;
  margin: auto;
}
 
.txt {
  position: relative;
  display: block;
  text-decoration: none;
  font-family: 'Fredoka One', cursive;
  font-size: 30px;
  text-align: center;
  color: transparent;
  transition: all .5s 0s ease-out;
	
}
 
.rtext:hover .txt {
  color: white;
  transition: all .8s .3s ease-in;
	margin-left: -50px;
}
 
.txt::before,
.txt::after {
  content: attr(data-txt);
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(0,54px,40px,0);
  color: #fff;
  transition: all .3s .3s;
}
 
.txt::after {
  clip: rect(0,200px,40px,54px);
}
 
.rtext:hover .txt::before {
  left: -10px;
  opacity: 0;
}
 
.rtext:hover .txt::after {
  left: 10px;
  opacity: 0;
}
 
.rtext::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  width: 1px;
  height: 80px;
  margin: auto;
  background: #fff;
  visibility: hidden;
  opacity: 0;
}
 
.rtext:hover::before {
  -webkit-animation: sword .5s;
          animation: sword .5s;
}
 
@keyframes sword {
  0% {top: -100px; visibility: hidden; opacity: 0;}
  20% {visibility: visible; opacity: 1;}
  100% {top: 100px; visibility: hidden; opacity: 0;}
}
 
@-webkit-keyframes sword {
  0% {top: -100px; visibility: hidden; opacity: 0;}
  20% {visibility: visible; opacity: 1;}
  100% {top: 100px; visibility: hidden; opacity: 0;}
}