CSS Text Morphing

HTML CSS JS Tidy

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&family=Kablammo:MORF@0..60&family=Sixtyfour:BLED,SCAN@100,-53&display=swap')
;
body {
	height: 100vh;
  margin: 0;
	display: grid;
	justify-items: center;
  grid-template-rows: 1fr 1fr auto auto;
	align-items: center;
	background: radial-gradient(#81c08d, #4a8b46);  
  color: #FBF7F4;
  
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-variation-settings:
    "SOFT" 50,
    "WONK" 1;
}
a {
  color: #FEEDD8;
}
.text {
  color: #F1F2ED;
  font-size: calc(14vw + 0.5rem);
  font-family: "Kablammo", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 0;
  animation: morph 5s ease alternate infinite;
}

.text2 {
  color: #F1F2ED;
  font-size: calc(14vw + 0.5rem);
  font-family: "Sixtyfour", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" -53;
  animation: morph2 5s ease alternate infinite;
}

@keyframes morph2 {
	0% {
		font-variation-settings:
    "BLED" 100,
    "SCAN" -53;
	}

100% {
		font-variation-settings:
    "BLED" 0,
    "SCAN" 100;
	}
}

@keyframes morph {
	0% {
		font-variation-settings: "MORF" 25;
	}

100% {
		font-variation-settings: "MORF" 45;
	}
}

HTML CSS JS Tidy

CSS Text Morphing

>_Console

Leave a Comment Cancel reply

>_Console

File Setting

Code Playground Setting

Add External Stylesheets and Script

Leave a Comment Cancel reply