Text Shaking Effect Using HTML and CSS3

    

Text Shake Animation in HTML And CSS3



HTML CODE

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css shake effect</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<h1>shake effect!</h1>
</body>

</html>

CSS Code(style.css)

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  background: #000;
}

h1 {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 10vw;
  font-weight: 900;
  text-decoration: none;
  color: white;
  display: inline-block;
  background-size: 120% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(45deg, 
                    #7794ff, 
                    #44107A,
                    #FF1361,
                    #FFF800);
  animation: .8s shake infinite alternate;
}

@keyframes shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}

Watch video





Comments

Post a Comment

Popular posts from this blog

Domino's Logo using HTML & CSS3

Image
 Domino's Logo Using CSS HTML CODE <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Domino's Logo</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="dominos">   <span class="d1"></span>   <span class="d2"></span> </div> <script src="codee.js"></script> </body> </html> CSS Code(style.css) body {   background-color: #333;   text-align: center; } .dominos {   background-color: #fff;   display: inline-block;   font-size: 0;   padding: 5px;   border-radius: 30px;   margin: 150px 20px 20px 20px;   transform: rotate(-45deg); } .d1 {   background-color: #0079ae;   width: 250px; ...
Read more

create 3D image hover effect using html and css

Image
      3D Image Hover Effect in CSS3 HTML CODE <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="4000"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="row"> <div class="tdimension"> <a href="#"> </a> </div> </div> </div> </body> </html> CSS Code(style.css) body { background: #ECECEC; } .container { width: 100wh; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .row { margin-top: 12px; } .tdimension { width: 300px; height: 300px; margin: 20px ...
Read more

Pheli baar song sing by ajay atul in kapil sharma show | pehli baar marathi version

Image
pehli baar song sing by ajay atul in the show of kapil sharma. Singer and muscian Ajay atul comes in kapil sharma show. In which kapil request to ajay atul to sing a song that is "pheli baar" from movie of sairat and dhadak. Then ajay atul start sing pheli baar song in the show as kapil request. Lots of youtuber share this song video clip on youtube and other social media platforms. The clips get show much viral on the internet.
Read more