كود الشمعه المشتعلة

حركات النار باستخدام HTML و CSS - Coding

الرسوم المتحركة الحدودية

مرحبا المبرمجين! مرحبًا بكم في nosh mac. في هذه المدونة ، سنقوم بإنشاء رسوم متحركة رائعة للحدود باستخدام HTML و CSS. يجب عليك إنشاء هذه المشاريع إذا كنت مطور ويب مبتدئًا أو متوسطًا.

كود html

كود CSS

<div class="wrapper">
 body {
  background-image: linear-gradient(#fff,#bbb);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  position: relative;
  width: 15rem;
  height: 30rem;
  transform: scale(.5); /* initial dimensions too big imho, quick dirty hack*/
}

.cake {
  position: absolute;
  bottom: 0;
}

.cake .lyr {
  width: 15rem;
  height: 6rem;
  background-color: currentColor;
  position: absolute;
  border-radius: 7.5rem / 1.5rem;
}

.cake .lyr-1 { color: #F1D4AF; bottom: 0;}
.cake .lyr-2 { color: #774F38; bottom: 3rem;}
.cake .lyr-3 { color: #E08E79; bottom: 6rem;
background-image: radial-gradient(ellipse 7.5rem 1.5rem at 7.5rem 1.5rem, gold, gold 5%, #E99788 100%, transparent);}

.candle {
  position: absolute;
  bottom: 10rem;
  left: 6.5rem;
  width: 2rem;
  height: 10rem;
  background-color: red;
  border-radius: 1rem / .5rem;
  background-image: repeating-linear-gradient(45deg, white, white 10%, transparent 10%, transparent 20%);
}

.candle::before {
  content: "";
  position: absolute;
  width: .5rem;
  height: 2rem;
  border-radius: .25rem / .15rem;
  background-color: black;
  top: -1.5rem;
  left: .75rem;
}

.candle::after {
  content: "";
  width: 2rem;
  height: 1rem;
  background-color: red;
  display: block;
  border-radius: 50%;
}

.flame {
  position: absolute;
  left: 6.5rem;
}

.wht { 
  color: white; animation: burn-wht 1.8s; 
  box-shadow: 0 0 1rem white;}
.ylw { 
  color: gold;  top: 1.8rem; animation: burn-ylw 1.6s; 
  box-shadow: 0 0 1rem gold; opacity: .9}
.orng { 
  color: orange; top: 3.6rem; animation: burn-orng 0.4s; 
  box-shadow: 0 0 1rem orange; opacity: .8}
.red { 
  color: crimson; top: 5.4rem; animation: burn-red 1s;
  opacity: .7;}

.smoke { 
  color: black; top: 8.8rem;
  box-shadow: 0 0 2rem black;
  background-color: currentColor;
  position: relative;
  border-color: currentColor;
  width: .25rem;
  height: .25rem;
  top: 7rem;
  animation-name: burn-smoke;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.smk-1 {animation-duration: .5s; animation-name: burn-smoke-rev; left: .5rem;}
.smk-2 {animation-duration: .6s; left: -.5rem;}
.smk-3 {animation-duration: .7s; animation-name: burn-smoke-rev; left: 1rem;}
.smk-4 {animation-duration: .8s; left: 1.5rem;}
.smk-5 {animation-duration: .9s; left: 2rem;}

.flm-part {
  background-color: currentColor;
  border-radius: 50%;
  position: relative;
  transform: rotate(60deg) skewX(0deg) scale(1);
  border-color: currentColor;
  width: 2rem;
  height: 2rem;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.flm-part.flipped {
  transform: rotate(120deg) skewX(0deg) scale(1);
}

.flm-part::before {
  content: "";
  position: absolute;
  border-radius: 0 0 0 100%;
  border-bottom-style: solid;
  border-bottom-color: inherit;
  height: .5rem;
  width: 2rem;
  left: -1rem;
  top: -.5rem;
  border-bottom-width: 2rem;
}

.flm-part.flipped::before {
  border-radius: 100% 0 0 0;
  border-bottom: 0 solid transparent;
  border-top-style: solid;
  border-top-color: inherit;
  border-top-width: 2rem;
  height: .5rem;
  width: 2rem;
  left: -1rem;
  top: 0;
}

@keyframes burn-wht {
  0% { transform: rotate(60deg) skewX(0deg) scale(1)}
  20% { transform: rotate(50deg) skewX(-3deg) scale(1.1)}
  40% { transform: rotate(60deg) skewX(0deg) scale(1)}
  60% { transform: rotate(70deg) skewX(3deg) scale(1.1)}
  100% {transform: rotate(60deg) skew(0deg) scale(1)}
}

@keyframes burn-ylw {
  0% { transform: rotate(120deg) skewX(0deg) scale(1.4)}
  20% { transform: rotate(110deg) skewX(10deg) scale(1.5)}
  40% { transform: rotate(120deg) skewX(0deg) scale(1.4)}
  60% { transform: rotate(130deg) skewX(-10deg) scale(1.5)}
  100% {transform: rotate(120deg) skew(0deg) scale(1.4)}
}

@keyframes burn-orng {
  0% { transform: rotate(65deg) skewX(0deg) scale(1.6)}
  20% { transform: rotate(60deg) skewX(-15deg) scale(1.7)}
  40% { transform: rotate(65deg) skewX(0deg) scale(1.6)}
  60% { transform: rotate(70deg) skewX(2deg) scale(1.7)}
  100% {transform: rotate(65deg) skew(0deg) scale(1.6)}
}

@keyframes burn-red {
  0% { transform: rotate(120deg) skewX(0deg) scale(1.8)}
  20% { transform: rotate(118deg) skewX(5deg) scale(2)}
  40% { transform: rotate(120deg) skewX(0deg) scale(1.8)}
  60% { transform: rotate(122deg) skewX(-5deg) scale(2)}
  100% {transform: rotate(120deg) skew(0deg) scale(1.8)}
}

@keyframes burn-smoke {
  0% { transform: rotate(0deg) scale(1);  opacity: 1; }
  100% {transform: rotate(360deg) scale(4); opacity: 0; top: 0;}
}

@keyframes burn-smoke-rev {
  0% { transform: rotate(0deg) scale(1);  opacity: 1; }
  100% {transform: rotate(-360deg) scale(5); opacity: 0; top: 0;}
}

</div>

Nosh Mac