code_magic字体

Posted 2020-10-12 mudeng007

https://codepen.io/scorch/pen/zdKErE

 

 

 

 

 

 

 

<div>
  <h1 class="A">MAGIC</h1>
  <h1 class="B">Kang</h1>
</div>
*{margin: 0;padding: 0;}
body{line-height:0;overflow: hidden;}
div{position: absolute;width: 100%;top:50%;bottom: 50%;line-height: 0;filter:contrast(10);}
h1{width: 100%;text-align: center;position: absolute;font-size: 200px;color:black;
   text-shadow: 4px 4px 120px rgba(256,256,256,1),
               -4px -4px 120px rgba(256, 256, 256, 1),
               -4px  4px 120px rgba(256, 256, 256, 1),
                4px -4px 120px rgba(256, 256, 256, 1)
}
@keyframes anim {
  0%   { opacity: 0; filter: blur(28px)}
  10%  { opacity: 0; }
  90%  { opacity: 1; }
  100% { opacity: 1; filter: blur(6px)}
}
.A{animation: anim 5s infinite alternate-reverse;}
.B{animation: anim 5s infinite alternate;}