Pure CSS candle light animation by One element

Developer
Keisuke Takahashi
Size
2,193 Kb
Views
129,536
  1. Pure CSS candle light animation by One element Previews
  2. Pure CSS candle light animation by One element HTML Codes
  3. Pure CSS candle light animation by One element CSS Codes

How do I make an pure css candle light animation by one element?

One div.candle I used.. What is a pure css candle light animation by one element? How do you make a pure css candle light animation by one element? This script and codes were developed by Keisuke Takahashi on 19 November 2022, Saturday.

Pure CSS candle light animation by One element Previews
IQ Test

Pure CSS candle light animation by One element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS candle light animation by One element</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="candle"></div>
<h1>Pure CSS candle light animation by One element</h1>
</body>
</html>

Pure CSS candle light animation by One element - Script Codes CSS Codes

body { background:#101000;
}
h1 { text-align:center; color:#333; font-family:serif;
}
.candle{ font-size:2em; margin:0 auto;width:8em;height:8em; position: fixed; left: 35%; top: 35%; border-radius:50%/20%; background:#000; background-image:-moz-linear-gradient(-90deg, #555, rgba(255, 255, 255, 0.2)); background-image:-webkit-linear-gradient(-90deg, #555, rgba(255, 255, 255, 0.2)); background-image:linear-gradient(to bottom, #555, rgba(255, 255, 255, 0.2)); box-shadow: 0 0.5em 1em 0.5em rgba(0, 0, 0, 0.5), 0 -1em 2em rgba(0, 0, 0, 0.9) inset, 0em -2em 4em rgba(200,100,0,0.5) inset, 0 -4em 2em 1em rgba(200, 120, 0, 0.7) inset, 0em 0em 2em rgba(200,200,200,0.5) inset, 0 -5.1em 0.3em 0.2em rgba(200, 100, 0, 0.5) inset, 0em -0.1em 0.5em rgba(0,0,0,0.9) inset, 0 0 0 4em rgba(255, 255, 250, 0.8) inset, 0 -6em 2em 0em rgba(50,30,0,0.7), 0 0 4em 5em rgba(50,30,0,0.2), 0 0 0 0 transparent; }
.candle:before { content:""; display:block; width:20%; height:70%; position:relative; top:-60%; margin:0 auto; border-radius:30% 100% 50% 50% / 60% 60% 60% 60%; box-shadow: 0em 2em 1em rgba(255, 255, 0, 0.5) inset, 0em 3em 0.5em rgba(250, 100, 50, 0.8) inset, 0 0 0.5em 0 rgba(255, 255, 0, 0.7) ; background:transparent; background-image:-moz-linear-gradient(-90deg, transparent,rgba(0,100,100,0.3),transparent); background-image:-webkit-linear-gradient(-90deg, transparent,rgba(0,100,100,0.3),transparent); background-image:linear-gradient(-90deg, transparent,rgba(0,100,100,0.3),transparent); -moz-transform: skewX(0deg) skewY(0deg); -webkit-transform: skewX(0deg) skewY(0deg); transform: skewX(0deg) skewY(0deg); -moz-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; -moz-animation: air 2s ease-in infinite; -webkit-animation: air 2s ease-in infinite; animation: air 2s ease-in infinite;
}
.candle:after{ content:""; display:block; width:0.2em; height:1.3em; position:absolute; top:-5%; left:49%; background:#fff; background-image:-moz-linear-gradient(-90deg,#311,#eec 70%,#eec); background-image:-webkit-linear-gradient(-90deg,#311,#eec 70%,#eec); background-image:linear-gradient(to bottom,#311,#eec 70%,#eec);
}
@-moz-keyframes air{ 0%{-moz-transform: skewX(0deg) skewY(0deg) scale(1,1);} 31%{-moz-transform: skewX(0deg) skewY(0deg) scale(1,1);} 32%{-moz-transform: skewX(0deg) skewY(0deg) scale(-1.2,1.5);} 33%{-moz-transform: skewX(5deg) skewY(5deg) scale(1,0.9);} 34%{-moz-transform: skewX(-1deg) skewY(-1deg) scale(1,1);} 36%{-moz-transform: skewX(0deg) skewY(0deg);} 98%{-moz-transform: skewX(0deg) skewY(0deg);} 99%{-moz-transform: skewX(2deg) skewY(2deg);} 100%{-moz-transform: skewX(0deg) skewY(0deg) scale(0.9,1.4);}
}
@-webkit-keyframes air{ 0%{-webkit-transform: skewX(0deg) skewY(0deg) scale(1,1);} 31%{-webkit-transform: skewX(0deg) skewY(0deg) scale(1,1);} 32%{-webkit-transform: skewX(0deg) skewY(0deg) scale(-1.2,1.5);} 33%{-webkit-transform: skewX(5deg) skewY(5deg) scale(1,0.9);} 34%{-webkit-transform: skewX(-1deg) skewY(-1deg) scale(1,1);} 36%{-webkit-transform: skewX(0deg) skewY(0deg);} 98%{-webkit-transform: skewX(0deg) skewY(0deg);} 99%{-webkit-transform: skewX(2deg) skewY(2deg);} 100%{-webkit-transform: skewX(0deg) skewY(0deg) scale(0.9,1.4);}
}
@keyframes air{ 0%{transform: skewX(0deg) skewY(0deg) scale(1,1);} 31%{transform: skewX(0deg) skewY(0deg) scale(1,1);} 32%{transform: skewX(0deg) skewY(0deg) scale(-1.2,1.5);} 33%{transform: skewX(5deg) skewY(5deg) scale(1,0.9);} 34%{transform: skewX(-1deg) skewY(-1deg) scale(1,1);} 36%{transform: skewX(0deg) skewY(0deg);} 98%{transform: skewX(0deg) skewY(0deg);} 99%{transform: skewX(2deg) skewY(2deg);} 100%{transform: skewX(0deg) skewY(0deg) scale(0.9,1.4);}
}
Pure CSS candle light animation by One element - Script Codes
Pure CSS candle light animation by One element - Script Codes
Home Page Home
Developer Keisuke Takahashi
Username ksksoft
Uploaded November 19, 2022
Rating 3
Size 2,193 Kb
Views 129,536
Do you need developer help for Pure CSS candle light animation by One element?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keisuke Takahashi (ksksoft) Script Codes
Name
The mount
One div DORAEMON
Pure css Dialogue UI
Pure CSS drower menu with transition-delay
Ladybird Fly Away
Pure CSS Slide Panel
TEMARI Sphere
Gooey text melt away...
Figure 8 animation Type 2
Table-cell with gutter
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!