In this article, we will understand how to create an animation on record button by using CSS. In this we will create an animation on record button such as voice record on off, sound button on or off etc.
Following are the examples:
Example 1:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of record animation using CSS </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<style>
#record-spin {
-webkit-animation: spin 8s ease-in infinite alternate;
-moz-animation: spin 8s ease-in infinite alternate;
animation: spin 8s ease-in infinite alternate;
}
body {
margin: 0;
padding: 00;
width: 100%;
height: 100%;
display: table;
background-color: #180d80;
}
h1 {
font-family: arial;
font-weight: 50;
font-size: 4em;
text-align: center;
background: repeating-linear-gradient(45deg, black, lime 5px);
position: relative;
-webkit-background-clip: text;
-webkit-text-stroke: 2px black;
color: transparent;
bottom: 60px;
animation: float 2s ease-in-out infinite;
}
h1::before {
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
top: 10;
left: 0;
background: repeating-linear-gradient(-45deg, black, transparent 5px);
-webkit-background-clip: text;
-webkit-text-stroke: 12px lightgreen;
}
h2 {
font-family: arial;
font-weight: 20;
font-size: 2em;
text-align: center;
background: repeating-linear-gradient(40deg, white, red 5px);
position: relative;
-webkit-background-clip: text;
-webkit-text-stroke: 2px white;
color: transparent;
bottom: 10px;
color: white;
animation: float 2s ease-in-out infinite; }
h2::before {
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(-45deg, black, transparent 5px);
-webkit-background-clip: text;
-webkit-text-stroke: 12px lightgreen;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(720deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(720deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(720deg); transform: rotate(720deg); } }
#record-spin2 {
-webkit-animation: spin2 8s ease-in infinite alternate;
-moz-animation: spin2 8s ease-in infinite alternate;
animation: spin2 8s ease-in infinite alternate;
}
@-moz-keyframes spin2 {
0% { -moz-transform: rotate(-10deg); }
10% { -moz-transform: rotate(2deg); }
20% { -moz-transform: rotate(-3deg); }
100% { -moz-transform: rotate(20deg); }
}
@-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(-10deg); }
10% { -webkit-transform: rotate(2deg); }
20% { -webkit-transform: rotate(-3deg); }
100% { -webkit-transform: rotate(20deg); }
}
@keyframes spin2 {
0% { -moz-transform: rotate(-10deg); transform: rotate(-10deg);}
10% { -moz-transform: rotate(2deg); transform: rotate(2deg);}
20% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
100% { -webkit-transform: rotate(20deg); transform: rotate(20deg); }
}
#record-spin1{
-webkit-animation:spin1 8s ease-in infinite alternate;
-moz-animation:spin1 8s ease-in infinite alternate;
animation:spin1 8s ease-in infinite alternate;
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(-10deg); }
50% { -moz-transform: rotate(10deg); }
100% { -moz-transform: rotate(-10deg); }
}
@-webkit-keyframes spin1 {
0% { -moz-transform: rotate(-10deg); }
50% { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(-10deg); }
}
@keyframes spin1 {
0% { -moz-transform: rotate(-10deg); transform: rotate(-10deg);}
50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
100% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
}
#mainpage-image {
display: table;
text-align: center;
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
align-self: center;
}
.row > [class*='col-'] img {
align-self: center;
}
.bot {
position: relative;
top: 0px;
left: 0px;
z-index: 1;
}
.top {
position: absolute;
left: 0px;
z-index: 2;
}
.img-fluid. {
max-width: 100%;
height: auto;
}
html, body {
height: 130%;
}
.container-fluid {
height: 100%;
overflow-y: hidden;
background: -moz-linear-gradient(45deg, #fa6b46 0%, #eda36f 100%);
background: -webkit-linear-gradient(45deg, #fa6b46 0%,#eda36f 100%);
background: linear-gradient(45deg, #fa6b46 0%,#eda36f 100%);
}
@media only screen and (min-width : 768px) {
.is-table-row {
display: table;
}
.is-table-row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
}
</style>
<body>
<h1> Example </h1>
<h2> Record Animation Using CSS </h2>
<div class = "container-fluid">
<div class = "row" style = "margin-bottom: -100px;">
<div class = "bot" style = "max-width:40%; text-align: center; margin: 0 auto">
<div class = "col-xs-12">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" class = "img-responsive" id = "record-spin" alt = "Responsive image" style = "z-index:1">
</div>
</div>
<div class = "layout">
<div class = "top" style="max-width:40%;text-align:center;margin-left:30%">
<div class = "col-xs-12">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" class = "img-responsive" id = "record-spin1" alt = "Responsive image" style = "z-index:2;opacity:.88;">
</div>
</div>
</div>
<div class = "layout">
<div class = "top" style="max-width:40%;text-align:center;margin-left:44%;margin-top:-7%">
<div class = "col-xs-12">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" class = "img-responsive" id = "record-spin2" alt = "Responsive image" style = "z-index:3;">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Explanation:
In the previous instance, an animation was generated on a saved CD using CSS.
Output:
Following is the output of this example.
Example 2:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of record animation using CSS </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<style>
html {
margin: 0;
padding: 00;
width: 100%;
height: 100%;
display: table;
background-color: #180d80;
}
body {
margin: 0;
padding: 00;
width: 100%;
height: 100%;
display: table;
background-color: #180d80;
}
h1 {
font-family: arial;
font-weight: 50;
font-size: 4em;
text-align: center;
background: repeating-linear-gradient(45deg, black, lime 5px);
position: relative;
-webkit-background-clip: text;
-webkit-text-stroke: 2px black;
color: transparent;
bottom: 60px;
animation: float 2s ease-in-out infinite;
}
h1::before {
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
top: 10;
left: 0;
background: repeating-linear-gradient(-45deg, black, transparent 5px);
-webkit-background-clip: text;
-webkit-text-stroke: 12px lightgreen;
}
h2 {
font-family: arial;
font-weight: 20;
font-size: 2em;
text-align: center;
background: repeating-linear-gradient(40deg, white, red 5px);
position: relative;
-webkit-background-clip: text;
-webkit-text-stroke: 2px white;
color: transparent;
bottom: 10px;
color: white;
animation: float 2s ease-in-out infinite; }
h2::before {
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(-45deg, black, transparent 5px);
-webkit-background-clip: text;
-webkit-text-stroke: 12px lightgreen;
}
#container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
vertical-align: middle;
margin:10px
}
.record-svg {
width: 600px;
height: 600px;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
border-radius: 3px;
margin-bottom: 0px;
}
#record_1_{
animation-name: rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
transform-origin: center center;
transform-box: fill-box;
animation-timing-function: linear;
display: relative;
}
@keyframes rotate {
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h1> Example </h1>
<h2> Record Animation Using CSS </h2>
<div id = "container">
<svg version = "1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="150 -150 1300 1300" style="enable-background:new 150 -150 1300 1300;" xml:space="preserve" class="record-svg">
<g id="BG">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="458.1608" y1="-615.0078" x2="1839.7026" y2="-2176.7507" gradientTransform="matrix(-1 0 0 1 1901.3 1841.3)">
<stop offset="8.107462e-02" style="stop-color:#F74AC0"/>
<stop offset="0.4338" style="stop-color:#F7879F"/>
<stop offset="0.7464" style="stop-color:#F7B786"/>
<stop offset="0.9012" style="stop-color:#F7CA7C"/>
</linearGradient>
<rect x="150" y="-150" style="fill:url(#SVGID_1_);" width="1300" height="1300"/>
</g>
<g id="base_1_">
<path style="fill:#F97DCA;" d="M1209.4,897.7H393.2c-50.8,0-91.9-41.2-91.9-91.9V189.6c0-50.8,41.2-91.9,91.9-91.9h816.1
c50.8,0,91.9,41.2,91.9,91.9v616.1C1301.3,856.5,1260.1,897.7,1209.4,897.7z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="918.1329" y1="664.15" x2="1238.3" y2="664.15" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="917.6329" y1="664.15" x2="1238.8" y2="664.15" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<path style="fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;" d="M1238.3,505.1V205c0-24.9-20.1-45-45-45H921.7
c-3.6,0-4.9,4.7-1.9,6.5c103.6,63.8,173.3,177.4,175.8,307.5c0,1.7,0.1,20.7,0.1,31.1c0,3.6,3,6.6,6.6,6.6h129.5
C1235.3,511.7,1238.3,508.7,1238.3,505.1z"/> <g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1088.9" y1="446" x2="1240.8" y2="446" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<line style="fill:none;stroke:url(#SVGID_4_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="1091.4" y1="554" x2="1238.3" y2="554"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="1080.6" y1="403.7" x2="1240.8" y2="403.7" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<line style="fill:none;stroke:url(#SVGID_5_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="1083.1" y1="596.3" x2="1238.3" y2="596.3"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="1067.1" y1="361.4" x2="1240.8" y2="361.4" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<line style="fill:none;stroke:url(#SVGID_6_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="1069.6" y1="638.6" x2="1238.3" y2="638.6"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1047.9" y1="319.1" x2="1240.8" y2="319.1" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient> <line style="fill:none;stroke:url(#SVGID_7_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="1050.4" y1="680.9" x2="1238.3" y2="680.9"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="1022" y1="276.8" x2="1240.8" y2="276.8" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<line style="fill:none;stroke:url(#SVGID_8_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="1024.5" y1="723.2" x2="1238.3" y2="723.2"/>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="987.5" y1="234.5" x2="1240.8" y2="234.5" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<line style="fill:none;stroke:url(#SVGID_9_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="990" y1="765.5" x2="1238.3" y2="765.5"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="871.6" y1="150" x2="1240.8" y2="150" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<line style="fill:none;stroke:url(#SVGID_10_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="874.1" y1="850" x2="1238.3" y2="850"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="940.7" y1="192.3" x2="1240.8" y2="192.3" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<line style="fill:none;stroke:url(#SVGID_11_);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="943.2" y1="807.7" x2="1238.3" y2="807.7"/>
</g> <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="1099.4" y1="741.7" x2="1178.4" y2="741.7" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<circle style="fill:none;stroke:url(#SVGID_12_);stroke-width:5;stroke-miterlimit:10;" cx="1138.9" cy="258.3" r="37"/>
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="1061.4" y1="741.7" x2="1216.4" y2="741.7" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<circle style="fill:none;stroke:url(#SVGID_13_);stroke-width:5;stroke-miterlimit:10;" cx="1138.9" cy="258.3" r="75"/>
</g>
</g>
<g id="record_1_">
<g> <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="357.6" y1="500" x2="1057.6" y2="500" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F7CA7C"/>
<stop offset="1" style="stop-color:#F97DCA"/>
</linearGradient>
<circle style="fill:url(#SVGID_14_);" cx="707.6" cy="500" r="350"/>
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="380.9" y1="500" x2="1034.3" y2="500" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0.2146" style="stop-color:#032161"/>
<stop offset="0.8168" style="stop-color:#04318F"/>
</linearGradient>
<circle style="fill:url(#SVGID_15_);" cx="707.6" cy="500" r="326.7"/>
<circle style="opacity:0.1;fill:none;stroke:#FEEEF7;stroke-miterlimit:10;enable-background:new ;" cx="707.6" cy="500" r="186.7"/>
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="567.6" y1="500" x2="847.6" y2="500" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="567.1" y1="500" x2="848.1" y2="500" gradientTransform="matrix(1 0 0 -1 0 1000)">
<stop offset="0" style="stop-color:#F97DCA"/>
<stop offset="1" style="stop-color:#F7CA7C"/>
</linearGradient>
<circle style="fill:url(#SVGID_16_);stroke:url(#SVGID_17_);stroke-miterlimit:10;" cx="707.6" cy="500" r="140"/>
<circle style="fill:#FFFFFF;" cx="707.6" cy="500" r="112.5"/>
<circle style="opacity:0.1;fill:none;stroke:#FEEEF7;stroke-miterlimit:10;enable-background:new ;" cx="707.6" cy="500" r="233.3"/>
<circle style="opacity:0.1;fill:none;stroke:#FEEEF7;stroke-miterlimit:10;enable-background:new ;" cx="707.6" cy="500" r="280"/>
<g style="opacity:0.25;enable-background:new ;">
<defs> <polygon id="SVGID_18_" points="1060.9,509 707.6,500 1031.6,358.8 "/>
</defs>
<clipPath id="SVGID_19_">
<use xlink:href="#SVGID_18_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#SVGID_19_);">
<circle style="fill:#FEEEF7;" cx="707.6" cy="500" r="326.7"/>
</g>
</body>
</html>
Explanation:
In the previous example, we generated an animation on a saved CD utilizing CSS.
Output:
Following is the output of this example.
Example 3:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of record animation using CSS </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<style>
@keyframes ripple {
from {
transform: scale(1);
}
to {
transform: scale(1.02);
}
}
body {
margin: 0;
padding: 00;
width: 100%;
height: 100%;
display: table;
background-color: #180d80;
}
h1 {
font-family: arial;
font-weight: 50;
font-size: 4em;
text-align: center;
background: repeating-linear-gradient(45deg, black, lime 5px);
position: relative;
-webkit-background-clip: text;
-webkit-text-stroke: 2px black;
color: transparent;
bottom: 60px;
animation: float 2s ease-in-out infinite;
}
h1::before {
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
top: 10;
left: 0;
background: repeating-linear-gradient(-45deg, black, transparent 5px);
-webkit-background-clip: text;
-webkit-text-stroke: 12px lightgreen;
}
h2 {
font-family: arial;
font-weight: 20;
font-size: 2em;
text-align: center;
background: repeating-linear-gradient(40deg, white, red 5px);
position: relative;
-webkit-background-clip: text;
-webkit-text-stroke: 2px white;
color: transparent;
bottom: 10px;
color: white;
animation: float 2s ease-in-out infinite; }
h2::before {
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(-45deg, black, transparent 5px);
-webkit-background-clip: text;
-webkit-text-stroke: 12px lightgreen;
}
body {
background-color: #333;
display: grid;
height: 100vh;
place-items: center;
}
.checkbox {
display: none;
}
.checkbox + label {
--size: 90%;
--radius: 50%;
border: 6px solid white;
border-radius: var(--radius);
cursor: pointer;
display: inline-block;
height: 200px;
width: 200px;
position: relative;
}
.checkbox + label:before {
background-color: red;
border-radius: var(--radius);
bottom: 0;
content: ' ';
height: var(--size);
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
transition: all .25s cubic-bezier(1, 0, 0, 0.2);
width: var(--size);
}
.checkbox:checked + label {
animation: .15s ripple .25s;
}
.checkbox:checked + label:before {
--size: 50%;
--radius: 10%;
transform: rotateZ(180deg);
}
</style>
<body>
<h1> Example </h1>
<h2> CSS Record Animation </h2>
<input type = "checkbox" name = "checkbox" class = "checkbox" id = "checkbox">
<label for = "checkbox"> </label>
</body>
</html>
Explanation:
In the previously mentioned example, we generated an animation on a button utilizing CSS.
Output:
Following is the output of this example.
Example 4:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of record animation using CSS </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
background-color: #180d80;
}
h1 {
font-family: arial;
font-weight: 50;
font-size: 4em;
text-align: center;
background: repeating-linear-gradient(45deg, #000, #0f0 5px);
position: relative;
-webkit-background-clip: text;
-webkit-text-stroke: 2px #000;
color: transparent;
bottom: 60px;
animation: float 2s ease-in-out infinite;
}
h1::before {
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
top: 10;
left: 0;
background: repeating-linear-gradient(-45deg, #000, transparent 5px);
-webkit-background-clip: text;
-webkit-text-stroke: 12px #90ee90;
}
h2 {
font-family: arial;
font-weight: 20;
font-size: 2em;
text-align: center;
background: repeating-linear-gradient(40deg, #fff, #f00 5px);
position: relative;
-webkit-background-clip: text;
-webkit-text-stroke: 2px #fff;
color: transparent;
bottom: 10px;
color: #fff;
animation: float 2s ease-in-out infinite;
}
h2::before {
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(-45deg, #000, transparent 5px);
-webkit-background-clip: text;
-webkit-text-stroke: 12px #90ee90;
}
body {
background-color: #ededed;
}
.record-player {
height: 200px;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.base {
background-color: #89c0d2;
border: 5px solid #000;
height: 100%;
width: 100%;
border-radius: 8px;
position: absolute;
}
.screw__container {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.base__screw {
position: absolute;
display: inline-block;
height: 10px;
width: 10px;
background-color: #fff;
border: 5px solid #000;
border-radius: 100%;
}
.base__screw:nth-child(1) {
top: 5%;
left: 5%;
}
.base__screw:nth-child(2) {
top: 85%;
left: 5%;
}
.base__screw:nth-child(3) {
left: 90%;
top: 5%;
}
.base__screw:nth-child(4) {
left: 90%;
top: 85%;
}
.console {
width: 22%;
height: 30%;
position: relative;
top: 40%;
left: 74%;
}
.buttons {
float: left;
width: 25%;
height: 60%;
}
.button {
width: 100%;
height: 20%;
margin: 15%;
border: 5px solid #000;
background-color: #fff;
border-radius: 4px;
}
.volume {
float: right;
border-left: 5px solid #000;
height: 100%;
width: 20%;
}
.volume:before {
content: '';
position: absolute;
top: 20%;
right: 5%;
width: 12px;
border: 5px solid #000;
border-radius: 5px;
}
.record {
position: relative;
top: 18%;
left: 14%;
background-color: #333;
border: 5px solid #000;
height: 140px;
width: 140px;
border-radius: 100%;
animation: rotate 18s linear infinite;
}
.record__line {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-left: #808080 5px solid;
border-right: #808080 5px solid;
border-top: transparent 5px solid;
border-bottom: transparent 5px solid;
border-radius: 100%;
}
.record__line-1 {
height: 110px;
width: 110px;
}
.record__line-2 {
height: 80px;
width: 80px;
}
.record__hole {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #808080;
height: 10px;
width: 10px;
border-radius: 100%;
}
.arm {
position: relative;
top: -100%;
left: 22%;
animation: tilt 18s linear infinite;
height: 100%;
width: 100%;
transform: rotate(20deg);
}
.arm__top {
position: absolute;
top: 50%;
left: 50%;
height: 8%;
width: 6%;
border-radius: 10px;
background-color: #000;
transform: translate(-50%, -50%);
border: 5px solid #000;
}
.arm__middle {
position: absolute;
top: 50%;
left: -51%;
width: 100%;
margin: 0 auto;
height: 60%;
border-right: 5px solid #000;
}
.arm__bottom {
position: absolute;
top: 98%;
left: 46%;
height: 6%;
width: 4%;
border-radius: 6px;
border: 5px solid #000;
background-color: #ccc;
animation: bump 1s linear infinite;
}
.credit {
position: fixed;
bottom: 2%;
right: 2%;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.7em;
color: #282a37;
}
.credit__link {
text-decoration: none;
color: #89c0d2;
}
.fa-heart {
color: #f57256;
}
@-moz-keyframes rotate {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate {
to {
transform: rotate(360deg);
}
}
@-o-keyframes rotate {
to {
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
@-moz-keyframes tilt {
90% {
transform: rotate(45deg);
}
}
@-webkit-keyframes tilt {
90% {
transform: rotate(45deg);
}
}
@-o-keyframes tilt {
90% {
transform: rotate(45deg);
}
}
@keyframes tilt {
90% {
transform: rotate(45deg);
}
}
@-moz-keyframes bump {
50% {
transform: translate(-1px, 1px);
}
}
@-webkit-keyframes bump {
50% {
transform: translate(-1px, 1px);
}
}
@-o-keyframes bump {
50% {
transform: translate(-1px, 1px);
}
}
@keyframes bump {
50% {
transform: translate(-1px, 1px);
}
}
</style>
<body>
<h1> Example Record Animation Using CSS </h1>
<div class="record-player">
<div class="base">
<div class="base__screw"></div>
<div class="base__screw"></div>
<div class="base__screw"></div>
<div class="base__screw"></div>
<div class="console">
<div class="buttons">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
<div class="volume"></div>
</div>
</div>
<div class="record">
<div class="record__line record__line-1"></div>
<div class="record__line record__line-2"></div>
<div class="record__hole"></div>
</div>
<div class="arm">
<div class="arm__top"></div>
<div class="arm__middle"></div>
<div class="arm__bottom"></div>
</div>
</div>
</body>
</html>
Explanation:
In the previous example, we generated an animation on a saved CD utilizing CSS.
Output:
Following is the output of this example.