In this video, We'll show you how to create a cracking text effect with breathing animation using just pure CSS in couple minutes. Let’s check it out!
In this video, We'll show you how to create a cracking text effect with breathing animation using just pure CSS in couple minutes. Let’s check it out!
Clip-path generator: https://bennettfeely.com/clippy/
🔔 Subscribe: https://www.youtube.com/channel/UCRthRrv06q1iOl86-tTKJhg
Source Code
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="cracked">
<span>cracked</span>
<span>cracked</span>
<span>cracked</span>
</div>
</div>
</body>
</html>
CSS
html,body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
body {
background: #000;
}
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.cracked {
font-family: Coolvetica, Arial;
font-size: 15rem;
color:#fff;
text-transform: uppercase;
position: relative;
animation: glow 2s linear infinite;
animation-direction: alternate;
}
.cracked span:nth-child(1) ,
.cracked span:nth-child(3) {
position: absolute;
top:0;
left:0;
}
.cracked span:nth-child(1) {
clip-path: polygon(-10% 0%, 10% 0%, 60% 100%, -10% 100%);
animation: crack1 0.2s linear forwards;
}
.cracked span:nth-child(2) {
clip-path: polygon(10% 0%, 40% 0%, 80% 100%, 60% 100%);
}
.cracked span:nth-child(3) {
clip-path: polygon(40% 0%, 110% 0%, 110% 100%, 80% 100%);
animation: crack2 0.2s linear forwards;
}
@keyframes crack1 {
0% {transform: translate(0%,0%); }
100% {transform: translate(-2%, 1%) rotateZ(1deg); }
}
@keyframes crack2 {
0% {transform: translate(0%,0%); }
100% {transform: translate(2%, -1%) rotateZ(1deg); }
}
@keyframes glow {
0% {
text-shadow: 0 0 3rem #c98686;
filter: brightness(150%) blur(0.12rem);
}
100% {
text-shadow: 0 0 3rem #ff2525;
filter: brightness(150%) blur(0.07rem);
}
}
HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.
HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.
The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.
HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.
Responsive Personal Portfolio Website using HTML CSS & JavaScriptImages: https://bit.ly/353QF2ZDemo: https://edem-portfolio.netlify.app/Source Code: https://...