In this tutorial, we are going to implement a CSS vibration effect on both text and images. Initially, we will grasp the fundamental concept of CSS. Subsequently, we will explore this technique through a variety of illustrative instances.
What do you mean by CSS?
The acronym CSS represents cascading style sheet. Within this context, cascading denotes the sequence in which styles are implemented on a webpage. This feature empowers web designers with enhanced authority over the appearance of an HTML page, enabling them to customize styles for different elements such as lists, borders, and more.
It serves as a robust method for managing the arrangement of a web document through the application of styles. This action effectively segregates the content of the document from its visual presentation, thereby enhancing the accessibility of the content and offering increased adaptability.
What do you mean by CSS Shake text?
Shaking text and images is a popular effect employed on numerous websites; this dynamic feature can be effortlessly generated with fundamental HTML and CSS coding techniques.
Let's explore some instances of applying shake effects to text and images using CSS.
Example 1:
Example
<html>
<head>
<title> Shake text on CSS Example
</title>
</head>
<style>
.five h1 {
text-align: center;
font-size: 22px;
font-weight: 700;
color: #202020;
text-transform: uppercase;
word-spacing: 1px;
letter-spacing: 2px;
}
h1 {
position: relative;
padding: 0;
margin: 10;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
h1 span {
display: block;
font-size: 0.5em;
line-height: 1.3;
}
h1 em {
font-style: normal;
font-weight: 600;
}
.five h1 span {
margin-top: 40px;
text-transform: none;
font-size: .75em;
font-weight: normal;
font-style: italic;
font-family: "Playfair Display","Bookman",serif;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
.five h1:before {
position: absolute;
left: 0;
bottom: 38px;
width: 60px;
height: 4px;
content: "";
left: 50%;
margin-left: -30px;
background-color: #dfdfdf;
}
body {
background-color: #FB861D;
}
.content {
margin: 5% 0 0 0%;
}
.shake {
display: inline-block
}
.shake {
display: block;
position: relative;
}
img {
display: block;
height: 250px;
width: 250px;
border-radius: 50% 50% 50% 50%;
}
h2.shake {
display: inline-block
}
.shake.inline {
display: inline-block
}
h1, p, h2 {
color: #FFF;
}
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover
{
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
</style>
<body>
<center>
<section class="content">
<div class="five">
<h1> Example
<span> Shaking Image and Text </span>
</h1>
<br>
<br>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" class="shake">
<h2 class="shake"> Shake this text Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. It is most often used to set the visual style of web pages and user interfaces written in HTML and XHTML. </h2>
</div>
</section>
</center>
</body>
</html>
Explanation:
In the previously mentioned example, a shaking effect has been implemented on text and images when hovered over using CSS.
Following is the output of this example:
Example 2:
Example
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title> Shake Text on click </title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5em;
color: rgb(4, 110, 4);
}
div:hover h2 {
animation: shake 0.8s ;
}
@keyframes shake {
0% {
transform: translateX(0)
}
25% {
transform: translateX(25px);
}
50% {
transform: translateX(-25px);
}
100% {
transform: translateX(0px);
}
}
.five h1 {
text-align: center;
font-size: 22px;
font-weight: 700;
color: #202020;
text-transform: uppercase;
word-spacing: 1px;
letter-spacing: 2px;
}
h1 {
position: relative;
padding: 0;
margin: 10;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
h1 span {
display: block;
font-size: 0.5em;
line-height: 1.3;
}
body {
background-color: #f6f6f6;
width: 400px;
margin: 10px auto;
font: normal 13px/100% sans-serif;
color: #444;
}
h1 em {
font-style: normal;
font-weight: 800;
}
.five h1 span {
margin-top: 40px;
text-transform: none;
font-size:.75em;
font-weight: normal;
font-style: italic; font-family: "Playfair Display","Bookman",serif;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
.five h2 span {
margin-top: 40px;
text-transform: none;
font-size:.75em;
font-weight: normal;
font-style: italic; font-family: "Playfair Display","Bookman",serif;
color: #999;
letter-spacing: -0.005em;
word-spacing: 1px;
letter-spacing: none;
}
.five h1:before {
position: absolute;
left: 0;
bottom: 38px;
width: 60px;
height: 4px;
content: "";
left: 50%;
margin-left: -30px;
background-color: #dfdfdf;
}
.area {
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height: 100vh;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
</style>
<body>
<div class="area" >
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div >
<div>
<div class="five">
<h1> Example
<span> <h2> Shake text! </h2> </span>
</h1>
</div>
</div>
</body>
</html>
Explanation:
In the previous example, we generated a shaking effect on text when hovered using CSS.
Following is the output of this example: