Categories
CSS Web development

CSS Train Front Animation/ Loader

CSS Train Front Animation

Demo:

*to see the animation on the website click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
  <div class="track"></div>
  <div class="train"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
}

.container {
  position: relative;
}

Add the track:

.track {
  position: relative;
  overflow:hidden;
  width:50px;
  height:100px;
  border-left: 3px solid #333;
  transform: skew(-10deg) rotateX(45deg);
}

.track:before {
  content:"";
  position: absolute;
  height:3px;
  width:50px;
  background-color: #333;
  top:90px;
  box-shadow: 0 0 #333, 0 -10px #333, 0 -20px #333, 0 -30px #333, 0 -40px #333, 0 -50px #333, 0 -50px #333, 0 -60px #333,0 -70px #333, 0 -80px #333, 0 -90px #333, 0 -100px #333, 0 -110px #333, 0 -120px #333, 0 -130px #333, 0 -140px #333;
  animation: track 1s linear infinite;
}
.track:after {
  content:"";
  position: absolute;
  transform: rotate(-15deg);
  width:50px;
  height: 120px;
  background-color: #fff;
  border-left: 3px solid #333;
  left:30px;
  top:-10px;
}

Style the train:

.train {
  position: absolute;
  width: 60px;
  height:60px;
  background-color: #333;
  border-radius:15px;
  top:0;
  left:-13px;
  transform-origin: bottom;
  animation: rotate 1s linear infinite;
}

.train:before {
  content:"";
  position: absolute;
  background-color: #ced4da;
  width:20px;
  height:15px;
  left:9px;
  top:15px;
  box-shadow: 22px 0 #ced4da;
}

.train:after {
  content:"";
  position: absolute;
  background-color: #ced4da;
  border-radius:50%;
  height:10px;
  width:10px;
  top:45px;
  left:10px;
  box-shadow: 30px 0px #ced4da;
}

Step3.

Add CSS Animation

@keyframes track {
  0% {transform: translateY(70px) rotateX(45deg);}
  100% {transform: translateY(0px) rotateX(45deg);}
}

@keyframes rotate {
  0% {transform: rotate(0);}
  25% {transform: rotate(2deg);}
  50% {transform: rotate(0);}
  75% {transform: rotate(-2deg);}
  100% {transform: rotate(0);}
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Car Animation

CSS Car Animation

Demo:

*to see the animation on the website click here.

To create the CSS Car Animation follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="carAnimation">
    <div class="road"></div>
    <div class="car">
      <div class="colour"></div>
      <div class="windows"></div>
      <div class="leftWheel">
        <div class="wheel"></div>
      </div>
      <div class="rightWheel">
        <div class="wheel"></div>
      </div>
    </div>
    <div class="clouds"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
}

.container {
  position: relative;
}

.carAnimation {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background-color: #83c5be;
  border-radius:50%;
}

Create the road:

.road {
  position: absolute;
  background-color: #333;
  border-radius:20px;
  height:5px;
  width:220px;
  top:220px;
  left:40px;
  overflow:hidden;
}

.road:before {
  content:"";
  position: absolute;
  background-color: #83c5be;
  width:30px;
  height:5px;
  border-radius:5px; 
  animation: move 1s linear infinite reverse;
}
.road:after {
  content:"";
  position: absolute;
  width:15px;
  height:5px;
  background-color: #333;
  border-radius:5px; 
  box-shadow: 27px 0 #333;
  animation: move 1s linear infinite reverse;
}

Style the car:

.car {
  position: absolute;
  height:0;
  width:90px;
  border-right: 25px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 70px solid #333;
  z-index:2;
  top:140px;
  left:75px;  
}

.car:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:70px;
  height:40px;
  left:60px;
  top:30px;
}

.car:after {
  content:"";
  position: absolute; 
  background-color: #333;
  width:10px;
  height:35px;
  border-radius:10px;
  left:-22px;
  top:20px;
  transform: rotate(16deg);
}

.colour {
  position: absolute;
  height:0;
  width:80px;
  border-right: 20px solid transparent;
  border-left: 17.5px solid transparent;
  border-bottom: 60px solid #e5383b;
  top:5px;
  left:-12px;
}

.colour:before {
  content:"";
  position: absolute; 
  background-color: #e5383b;
  width:60px;
  height:30px;
  left:60px;
  top:30px;
}

.colour:after {
  position: absolute;
  content:"";
  background-color: #f9c74f;
  width:5px;
  height:15px;
  border: 3px solid #333;
  left:122px;
  top:44px;
  box-shadow: 0px -19px #333;
}

.windows {
  position: absolute; 
  height:0;
  width:70px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 28px solid #333;
  top:8px;
  left:4px;
}

.windows:before {
  content:"";
  position: absolute;
  height:0;
  width:65px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 22px solid #aed9e0;
  top:3px;
  left:-2.5px;
}

.windows:after {
  content:"";
  position: absolute;
  width:5px;
  height:25px;
  background-color: #333;
  left:45px;
  box-shadow: -25px 0 #333;
}

.leftWheel {
  position: absolute;
  width:35px;
  height:15px;
  border: 3px solid #333;
  background-color: #d3d3d3;
  border-radius: 30px 30px 0 0;
  top:47px;
  left:-5px;
}

.rightWheel {
  position: absolute;
  width:35px;
  height:15px;
  border: 3px solid #333;
  background-color: #d3d3d3;
  border-radius: 30px 30px 0 0;
  top:47px;
  left:75px;
}

.wheel {
  position: absolute;
  border-radius:50%;
  width:15px;
  height:15px;
  background-color: #d3d3d3;
  border: 8px solid #333;
  box-shadow: inset 5px 5px #f5f3f4;
  top:2px;
  left:2px;
  animation: spin .5s infinite linear;
}

Add some clouds:

.clouds {
  position: absolute;
  background-color: rgba(255,255,255,0.5);
  width:35px;
  height:10px;
  border-radius: 20px;
  top:100px;
  left:100px;
  z-index:1;
  box-shadow: 130px 50px rgba(255,255,255,0.5), -100px 20px rgba(255,255,255,0.5);
  animation: cloud 1.5s linear infinite reverse;
}

Step3.

Add CSS Animation

For the road:

@keyframes move {  
  from { left: -100px; }
    to { left: 200px; }
}

Make the wheels spin:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

To move the clouds:

@keyframes cloud {  
  from{left:-150px;}
  to{left: 400px;}
}

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Bouncing Basketball

Basketball player illustration
Do you like this image? Check more images in the store.

Demo:

*to see the animation on the website click here.

To create the CSS Bouncing Basketball follow the steps below:

Step1.

Add HTML

<div class="basketball">
    <div class="ball">
    <div class="lines"></div>
    </div>
  <div class="shadow"></div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
}

.basketball {
  position: relative;
  top: 50px;
  left:-50px;
}

Style the ball:

.ball {
  position: absolute;
  background-color: #e76f51;
  border-radius:50%;
  width:100px;
  height:100px;
  overflow: hidden;
  border: 3px solid #333;
  animation: bounce 1.5s ease-in infinite;
}
.ball:before, .ball:after {
  content:"";
  position: absolute;
  background-color: #333;
  width:110px;
  height:3px;
  top:50px;
  left:-5px;
}

.ball:before {
  transform: rotate(45deg);
}

.ball:after {
  transform: rotate(-45deg);
}

.lines {
  position: absolute;
  border-radius:50%;
  border: 3px solid #333;
  width:70px;
  height:70px;
  left:-20px;
  top:-20px;
}

.lines:before {
  content:"";
  position: absolute; 
  border-radius:50%;
  border: 3px solid #333;
  width:70px;
  height:70px;
  top:65px;
  left:60px;
}

Add the shadow:

.shadow {
  position: absolute;
  width:100px;
  height:15px;
  background-color: rgba(0,0,0,0.2);
  border-radius:50%;
  top:95px;
  z-index:-1;
  left:3px;
  animation: scale 1.5s ease-in infinite;
}

Step3.

Add CSS Animation

To make the ball bounce:

@keyframes bounce {
   0% {transform: translate3d(0, 0, 0) rotate(0deg);}
  25% {transform: translate3d(0, -185px, 0) rotate(90deg);}
  50% {transform: translate3d(0, 0, 0) rotate(180deg);}
  75% {transform: translate3d(0, -185px, 0) rotate(270deg);}
  100% {transform: translate3d(0, 0, 0) rotate(360deg);}
}

Scale the shadow:

@keyframes scale {
  0% {transform: scaleX(1);}
  25% {transform: scaleX(0.7);}
  50% {transform: scaleX(1);}
  75% {transform: scaleX(0.7);}
  100% {transform: scaleX(1);}
}

To see the animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

Simple CSS Birthday Cake

CSS Birthday Cake

Demo:

*to see the animation on the website click here.

To create to CSS Birthday Cake animation follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="bdayCake">
    <div class="plate"></div>
    <div class="cream"></div>
    <div class="candle"></div>
    <div class="flame">
      <div class="one">+</div>
      <div class="two">+</div>
      <div class="three">+</div>
    </div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  background-color: #f0efeb;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.container {
  position: relative;
}

.bdayCake {
  position: relative;
  left:-100px;
  top:100px;
}

Style the cake and the plate:

.plate {
  position: absolute;
  width: 242px;
  height:10px;
  border-radius:10px;
  background-color: #2a9d8f;
}

.plate:before {
  content:"";
  position: absolute;
  width:195px;
  height:90px;
  background-color: #9c6644;
  top:-90px;
  left:25px;  
}

.plate:after {
  content:"";
  position: absolute;
  width:195px;
  left:25px;
  height:10px;
  background-color: #ffd166;
  top:-60px;
  box-shadow: 0px 25px #f4978e;
}

.cream {
  position: absolute;
  background-color: #f08080;
  width:195px;
  height:20px;
  left:25px;
  top:-110px;
  border-radius:20px 20px 0 0;
}

.cream:before {
  content:"";
  position: absolute;
  background-color: #f08080;
  width:15px;
  height:30px;
  top:10px;
  border-radius:20px;
  box-shadow: 15px 5px #9c6644, 30px -5px #f08080, 45px 0px #9c6644, 60px 4px #f08080, 75px 3px #9c6644, 90px -5px #f08080, 105px 5px #9c6644, 120px -5px #f08080, 135px 0px #9c6644, 150px 4px #f08080, 165px 0px #9c6644, 180px 3px #f08080;
}

.cream:after {
  position: absolute;
  content:"";
  background-color: rgba(0,0,0,0.1);
  width: 97.5px;
  height:110px;
  left:98px;
  border-radius: 0 20px 0 0;
}

Add the candle and the flame:

.candle {
  position: absolute;
  width: 10px;
  height:40px;
  background: repeating-linear-gradient(#fae0e4,
  #fae0e4 5px, #ff0a54 5px, #ff0a54 10px);
  box-shadow: inset -5px 0px rgba(0,0,0,0.1);
  top: -150px;
  left:118px;
}

.candle:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:2px;
  height:10px;
  top:-10px;
  left:4px;
}

.candle:after {
  content:"";
  position: absolute;
  width:20px;
  height: 20px;
  background-color:#fcca46;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
  box-shadow: inset -3px 3px #fe7f2d;
  transform: rotate(-45deg);
  top:-28px;
  left:-5px;
  opacity:0.9;
  animation: scale .5s ease-out infinite;
}

.flame {
  position: absolute; 
}

.flame:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  height:10px;
  width:118px;
  border-radius:0 10px 10px 0;
  top:0;
  left:123px;
}

.one {
  position: absolute;
  color: #fcca46;
  font-size:20px;
  top:-160px;
  left: 100px;
  text-shadow: 33px -30px #fcca46;
  animation: flash .5s ease infinite alternate;
}

.two {
  position: absolute;
  color: #fcca46;
  font-size:15px;
  top:-180px;
  left: 100px;
  text-shadow: 35px 30px #fcca46;
  animation: flash .8s ease infinite alternate;
}
 
.three {
  position: absolute;
  color: #fcca46;
  font-size:10px;
  top:-195px;
  left: 110px;
  text-shadow: 30px 30px #fcca46;
  animation: flash .4s ease infinite alternate;
}

Step3.

Add CSS Animation

For the candle and the flame:

@keyframes scale {
  0% {transform: scaleY(1) rotate(-45deg); opacity:0.9;}
  50% {transform: scaleY(0.9) rotate(-45deg); opacity:0.8;}
  100% {transform: scaleY(1) rotate(-45deg); opacity: 0.9;}  
}

@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}

To see the CSS Birthday Cake on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

Pure CSS Train Animation

I’ve been thinking about travel a lot recently and yes, I miss it a lot. Are you missing travelling?

train vector image
Do you like this image? Check more images in the store.

I created simple Train Animation using the CSS basic shapes.

Demo:

*to see the animation on the website click here.

To create the CSS Train Animation follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="content">
    <div class="track"></div>
    <div class="train">
      <div class="front"></div>
      <div class="wheels">
        <div class="smallOne"></div>
        <div class="smallTwo"></div>
        <div class="smallThree"></div>
        <div class="smallFour"></div>
        <div class="smallFive"></div>
        <div class="smallSix"></div>
        <div class="big"></div>
      </div>
      <div class="cord"></div>
      <div class="coach"></div>
      <div class="coachTwo"></div>
      <div class="windows"></div>  
      <div id="up" class="steam"></div>
      <div id="up" class="steam2"></div>
    </div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  background-color: #f0ead2;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.container {
  position: relative;
}

.content {
  position: relative;
  width: 400px;
  height: 400px; 
  overflow: hidden;
}

Create the track:

.track {
  position: absolute;
  width:400px;
  height:5px;
  background-color: #333;
  top:300px;
}

.track:before {
  content:"";
  position: absolute;
  width:10px;
  height:5px;
  background-color: #333;
  top:4px;
  box-shadow: 20px 0 #333, -20px 0 #333, -40px 0 #333, -60px 0 #333, -80px 0 #333, 40px 0 #333, 60px 0 #333, 80px 0 #333, 100px 0 #333, 120px 0 #333, 140px 0 #333, 160px 0 #333, 180px 0 #333, 200px 0 #333, 220px 0 #333, 240px 0 #333, 260px 0 #333, 280px 0 #333, 300px 0 #333, 320px 0 #333, 340px 0 #333, 360px 0 #333, 380px 0 #333, 400px 0 #333, 420px 0 #333, 440px 0 #333, -100px 0 #333, -120px 0 #333, -140px 0 #333, 460px 0 #333, 480px 0 #333;
  animation: move 1s linear infinite reverse;
}

Style the train:

.train:before {
  content:"";
  position: absolute;
  border:5px solid #333;
  background-color: #335c67;
  width:35px;
  height:60px;
  left:-45px;
  top:-35px;
}

.train:after {
  position: absolute;
  content:"";
  width: 100px;
  height:5px;
  border-radius:10px;
  border: 5px solid #333;
  background-color: #fff3b0;
  top:30px;
  left:-50px;
}

.front {
  position: absolute;
  border: 5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width:20px;
  height:30px;
  left:-37.5px;
  top:-20px;
}

.front:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:15px;
  height:5px;
  border-radius:10px;
  top: 25px;
  left:70px;
  box-shadow: 0px 10px #333, -50px -45px #333, -86px -45px #333, -22px -41px #333,-11px -41px #333;
}

.front:after {
  content:"";
  position: absolute;
  width:12px;
  height:20px;
  border: 5px solid #333;
  left:50px;
  top:-16px;
  background-color:#adb5bd;
}

.wheels {
  position: absolute;
  z-index:1;
}

.smallOne, .smallTwo, .smallThree, .smallFour, .smallFive, .smallSix {
  position: absolute;
  border: 5px solid #333;
  border-radius:50%;
  width: 15px;
  height:15px;
  top:40px;
  background-color: #e09f3e;
  box-shadow: inset 2px 2px white;
  z-index:2;
}

.smallOne {
  left: 30px;
  animation: spin .5s infinite linear;
}

.smallTwo {
  left:0;
  animation: spin .5s infinite linear;
}

.smallThree {
  left:-225px;
  animation: spin .5s infinite linear;
}

.smallFour {
  left:-190px;
  animation: spin .5s infinite linear;
}

.smallFive {
  left:-130px;
  animation: spin .5s infinite linear;
}

.smallSix {
  left:-95px;
  animation: spin .5s infinite linear;
}

.big {
  position: absolute;
  border: 5px solid #333;
  border-radius:50%;
  width:25px;
  height:25px;
  background-color: #e09f3e;
  box-shadow: inset 2px 2px white;
  top:30px;
  left:-40px;
  animation: spin .5s infinite linear;
}

.cord {
  position: absolute;
  width: 10px;
  height:5px;
  background-color: #333;
  top:35px;
  left:-59px;
  z-index:3;
}

.cord:before {
  content:"";
  position: absolute;
  height:5px;
  width: 70px;
  background-color: #333;
  top:15px;
  left:35px;
}

.cord:after {
  content:"";
  position: absolute;
  background-color: #333;
  border-radius:50%;
  width:15px;
  height:15px;
  top:5px;
  left:29px;
}

.coach {
  position: absolute;
  width:80px;
  height:60px;
  border:5px solid #333;
  background-color: #9e2a2b;
  left:-145px;
  top:-20px;
}

.coach:before {
  content:"";
  position: absolute;
  width: 10px;
  height:5px;
  background-color: #333;
  top:50px;
  left:-15px;
}

.coach:after {
  content:"";
  position: absolute;
  width:80px;
  height:60px;
  border:5px solid #333;
  background-color: #335c67;
  top:-5px;
  left:-100px;
}

.coachTwo {
  position: absolute;
  border:5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width: 15px;
  height:25px;
  left:-225px;
  top:-5px;
}

.coachTwo:before, .coachTwo:after {
  content:"";
  position: absolute;
  border:5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width: 15px;
  height:25px;
  top:-5px;
}

.coachTwo:before {
  left:30px;
}

.coachTwo:after {
  left:90px;
}

.windows {
  position: absolute;
  border:5px solid #333;
  background-color: #aed9e0;
  box-shadow: inset 2px -5px rgba(255,255,255,0.3);
  width: 15px;
  height:25px;
  left:-95px;
  top:-5px;
  z-index:6;
}

.windows:before {
  content:"";
  position: absolute;
  background-color: #333;
  height:5px;
  width: 95px;
  border-radius:10px;
  top:-20px;
  left:-153px;
  box-shadow: 95px 0px #333;
}

.windows:after {
  content:"";
  position: absolute;
  background-color: #333;
  height:5px;
  width:40px;
  top:51px;
  left:-125px;
  box-shadow: 95px 0 #333;
}

Add steam to the chimney:

#up {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
  top: -30px;
  left: 25.5px;
  z-index:-1;
}

.steam {
  animation: up 2.5s ease-out infinite; 
}

.steam2 {
  animation: up 1.7s ease-out infinite 1s; 
}

.steam2:before {
  content:"";
  position: absolute;
  left:5px;
  width:15px;
  height:15px;
  background-color: #fff;
  border-radius:50%;
  top:20px;
}

Step3.

Add CSS Animation

To spin the wheels:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

For the track:

@keyframes move {  
  from { left: -100px; }
    to { left: 100px; }
}

and the steam:

@keyframes up {
  0%{
    transform: translateY(0) translateX(0) scale(0.5);
    opacity: 1;
  }
  100%{
    transform: translateY(-110px) translateX(-80px) scale(1.5);
    opacity: 0.2;
  }
}

To see the animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Windmill Animation

Pure CSS Windmill

Thinking about Rotterdam and the Tulip Festival I’ve created the simple windmill animation using only pure CSS:

Demo:

*to see the animation on the website click here.

To create the CSS Windmill Animation follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="windmill">
  <div class="line"></div>
  <div class="mill"></div>
  <div class="door"></div>
    <div class="fan">
      <div class="wingOne"></div>
      <div class="wingTwo"></div>
      <div class="wingThree"></div>
      <div class="wingFour"></div>
    </div>
    <div class="clouds"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  background-color: #eae2b7;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

Create the container and style the windmill:

.container {
  position: relative;
}

.windmill {
  position: relative;
}

.line {
  position: absolute;
  width: 300px;
  height:5px;
  border-radius:10px;
  background-color: #333;
  left:-150px;
  top:100px;
  z-index:1;
}

.line:before {
  content:"";
  position: absolute;
  background-color: #6a994e;
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  top:-50px;
  left:50px;
  box-shadow: 100px 0 #a7c957;
}

.line:after {
  content:"";
  position: absolute;
  background-color: #6a994e;
  width: 50px;
  height: 25px;
  border-radius: 50px 50px 0 0;
  top:-25px;
  left:10px;
  box-shadow: 50px 0 #a7c957, 105px 0 #6a994e, 195px 0 #6a994e, 225px 0 #a7c957;
}

.mill {
  position: absolute;
  border-bottom: 130px solid #333;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  width: 80px;
  height:0;
  top:-28px;
  left:-60px;
  z-index:2;
}

.mill:before {
  position: absolute;
  content:"";
  border-bottom: 120px solid #ab3428;
  border-right: 22px solid transparent;
  border-left: 22px solid transparent;
  width: 70px;
  height:0;
  top:7px;
  left:-16.5px;
}

.mill:after {
  position: absolute;
  content:"";
  background-color: #333;
  width: 20px;
  height:5px;
  border-radius:10px;
  left:-2px;
  top:20px;
  box-shadow: 20px 40px #333, -10px 80px #333, 65px 5px #333, 70px 20px #333, 50px 80px #333, 55px 90px #333, 15px 95px #333, 10px 30px #333;
}

.door {
  position: absolute; 
  background-color: #621708;
  width:25px;
  height:40px;
  border-radius:30px 30px 0 0;
  border: 5px solid #333;
  box-shadow: inset 1px 7px rgba(0,0,0,0.2);
  top:55px;
  left:-10px;
  z-index:3;
}

.door:before {
  position: absolute;
  content:"";
  border-bottom: 65px solid #333;
  border-right: 65px solid transparent;
  border-left: 65px solid transparent;
  height:0;
  width:0;
  top:-145px;
  left:-55px;
}

.door:after {
  position: absolute;
  content:"";
  border-bottom: 50px solid #2d728f;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  height:0;
  width:0;
  top:-136px;
  left:-40px;
}

Add fan to the windmill:

.fan {
  position: absolute;
  background-color: #333;
  width:25px;
  height:25px;
  border-radius:50%;
  left:-7px;
  top:-55px;
  z-index:4;
  animation: spin 3s infinite linear;
}
.wingOne, .wingTwo, .wingThree, .wingFour {
  position: absolute;
  width:5px;
  border: 5px solid #333;
  height:25px;
  background-color: #e6e6ea;
  border-radius:10px;
}

.wingOne:before, .wingTwo:before, .wingThree:before, .wingFour:before {
  position: absolute;
  content:"";
  background-color: #3b8ea5;
  box-shadow: inset -5px 0 #f5ee9e;
  border: 5px solid #333;
  width:15px;
  height:65px;
  top:17px;
  left:-10px;
}

.wingOne {
  left:5px;
  top:15px;
}

.wingTwo {
  transform: rotate(90deg);
  top:-5px;
  left:-15px;
}

.wingThree {
  transform: rotate(-90deg);
  top:-5px;
  left:25px;
}

.wingFour {
  transform: rotate(180deg);
  top:-25px;
  left:5px;
}

and style clouds:

.clouds {
  position: absolute;
  width: 50px;
  height:15px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index:-1;
  top:-120px;
  box-shadow: -120px 40px rgba(255, 255, 255, 0.5), 80px 80px rgba(255, 255, 255, 0.5);
  animation: move 10s linear infinite;
}

Step3.

Add CSS Animation

To spin the fan:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

and make the clouds move:

@keyframes move {
  0% {transform: translateX(0);}
  25% {transform: translateX(-30px);}
  50% {transform: translateX(0);}
  75% {transform: translateX(30px);}
  100% {transform: translateX(0);}
}

To see the CSS animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

Pure CSS Rainbow Text Animation

Pure CSS Rainbow text

The colours of the rainbow are Red, Orange, Yellow, Green, Blue, Indigo(*colour between blue and purple) and Violet.

I will use exactly these colours to create the rainbow text and the animation.

Demo:

*to see the code output on the website click here.

To create the CSS Rainbow Text Effect and the Animation follow the steps below:

Step1.

Add HTML

<div class="rainbowText">RAINBOW TEXT</div>

Step2.

Add CSS

Set the colour and position of the background and the elements:

body {
  background-color: #333;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

Style your text.

Create the linear-gradient with 7 colours of the rainbow:

.rainbowText {
  font-family:arial black;
  font-size:70px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
  animation: move 35s linear infinite;
CSS Rainbow text effect

Step3.

Add CSS Animation

@keyframes move {
	to {
		background-position: 4500vh;
	}
}

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Heart Shape & Heartbeat Animation

Last year I posted the tutorial Fast & easy CSS Valentine’s Day Animation (Heartbeat), were to create the heartbeat I used the .png file. Today I will show you how to create the heart shape and heartbeat animation using just pure CSS.

heartbeat
Do you like this gif? Check more gifs in the store.
*animation opened in the Firefox browser.
*to see the live output of the animation click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
      <div class="heart"></div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  background-color: #fae1dd;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
  
.container {
  position: relative;
  animation: .8s beat infinite;
}

Create the heart:

.heart {
  position: relative;
  background-color: red;
  display: inline-block;
  height: 60px;
  top:0;
  left:0;
  transform: rotate(-45deg);
  width:60px;
}
  
.heart:before, .heart:after {
  content:"";
  background-color: red;
  border-radius:50%;
  height: 60px;
  width: 60px;
  position: absolute;
  width: 60px;
  }
  
.heart:before {
  top:-30px;
  left:0;}
  
.heart:after {
  left:30px;
  top:0;}

Step3.

Add CSS Animation

@keyframes beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS JQuery Web development

CSS Valentine’s Day Card

Hello! Valentine’s day is coming up – a day to celebrate love and friendship! To celebrate this day I created the CSS Valentine’s Day card 🙂 Do you have Valentine’s Day wishes for your love ones?

hearts envelope
Do you like this image? Check more images in the store.

If not yet, no problem! Follow the steps below and create beautiful Valentine’s Day card.

*animation opened in the Firefox browser.
*to see the live output of the animation click here.

Step1.

Add HTML

Create the container, envelope and card:

<div class="container">  
<div class="valentines">
  <div class="envelope"></div>
  <div class="front"></div>
  <div class="card">
  <div class="text">Happy</br> Valentine's</br> Day!</div>
  <div class="heart"</div>
  </div>
  <div class="hearts">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
</div>
</div>
<div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fae1dd;
}

.container {
  position: relative;
}
.valentines {
  position: relative;
  top:50px;
  cursor: pointer;
  animation: up 3s linear infinite;
}

Style the envelope and the card:

.envelope {
  position: relative;
  width: 300px;
  height:200px;
  background-color: #f08080; 
}

.envelope:before {
  background-color: #f08080; 
  content:"";
  position: absolute;
  width: 212px;
  height: 212px;
  transform: rotate(45deg);
  top:-105px;
  left:44px;
  border-radius:30px 0 0 0;
}

.card {
  position: absolute;
  background-color: #eae2b7;
  width: 270px;
  height: 170px;
  top:5px;
  left:15px;
  box-shadow: -5px -5px 100px rgba(0,0,0,0.4); 
}

.card:before {
  content:"";
  position: absolute;
  border:3px solid #003049;
  border-style: dotted;
  width: 240px;
  heighT: 140px;
  left:12px;
  top:12px;
}

.text {
  position: absolute;
  font-family: 'Brush Script MT', cursive;
  font-size: 28px;
  text-align: center;
  line-height:25px;
  top:19px;
  left:85px;
  color: #003049;
}

.heart {
  background-color: #d62828;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: 110px;
  left:105px;
  transform: rotate(-45deg);
  width: 30px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: #d62828;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:before {
  top: -15px;
  left: 0;
}

.heart:after {
  left: 15px;
  top: 0;
}
.front {
  position: absolute;
  border-right: 180px solid #f4978e;
  border-top: 95px solid transparent;
  border-bottom: 100px solid transparent;
  left:120px;
  top:5px;
  width:0;
  height:0;
  z-index:10;
}

.front:before {
  position: absolute;
  content:"";
  border-left: 300px solid #f8ad9d;
  border-top: 195px solid transparent;
  left:-120px;
  top:-95px;
  width:0;
  height:0;
}
CSS Valentine's Day Card

Add the shadow:

.shadow {
  position: absolute;
  width: 330px;
  height: 25px;
  border-radius:50%;
  background-color: rgba(0,0,0,0.3);
  top:265px;
  left:-15px;
  animation: scale 3s linear infinite;
  z-index:-1;
}

Step3.

Add CSS Animation:

To move the envelope up and down:

@keyframes up {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

To scale the shadow:

@keyframes scale {
  0%, 100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.85);
  }
}

Add some hearts to the envelope:

.hearts {
  position: absolute  
}

.one, .two, .three, .four, .five {
  background-color: red;
  display: inline-block;
  height: 10px;
  margin: 0 10px;
  position: relative;
  transform: rotate(-45deg);
  width: 10px;
  top:50px;
}

.one:before,
.one:after, .two:before, .two:after, .three:before, .three:after, .four:before, .four:after, .five:before, .five:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  width: 10px;
}

.one:before, .two:before, .three:before, .four:before, .five:before {
  top: -5px;
  left: 0;
}

.one:after, .two:after, .three:after, .four:after, .five:after {
  left: 5px;
  top: 0;
}
  
.one {
  left:10px;
  animation: heart 1s ease-out infinite; 
}

.two {
  left:30px;
  animation: heart 2s ease-out infinite; 
}

.three {
  left:50px;
  animation: heart 1.5s ease-out infinite;
}

.four {
  left:70px;
  animation: heart 2.3s ease-out infinite;
}

.five {
  left:90px;
  animation: heart 1.7s ease-out infinite;
}

@keyframes heart {
  0%{
    transform: translateY(0) rotate(-45deg) scale(0.3);
    opacity: 1;
  }
  100%{
    transform: translateY(-150px) rotate(-45deg) scale(1.3);
    opacity: 0.5;
  }
}

Step4.

Add jQuery

To change the position of the card on hover:

$(document).ready(function () {
    $('.container').mouseenter(function () {
        $('.card').stop().animate({
            top: '-90px'
        }, 'slow');
    }).mouseleave(function () {
        $('.card').stop().animate({
            top: 0
        }, 'slow');
    });
});

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

CSS Winter window scene

I love watching the snowfall from the window with the cup of the hot tea…so beautiful!

window snowfall
Do you like this GIF? Check more gifs in the store.

Feeling the coming winter atmosphere I created simple window winter scene using just CSS:

*animation opened in the Firefox browser.
*to see the live output of the animation click here.

To create the CSS Window winter scene animation follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
  <div class="window">
    <div class="frame">
      <div class="snow">
        <div class="snowflake1"></div>
        <div class="snowflake2"></div>
        <div class="snowflake3"></div>
        <div class="snowflake4"></div>
        <div class="snowflake5"></div>
      </div>
      <div class="hills"></div>
      <div class="tree"></div>
      <div class="tree2"></div>
      <div class="tree3"></div>
      <div class="tree4"></div>
      <div class="shine"></div>
    </div>
    <div class="sill"></div>
    <div class="knob"></div>
    <div class="mug"></div>
    <div id="up" class="steam"></div>
    <div id="up" class="steam2"></div>
    <div id="up" class="steam3"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background, and the elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e9c46a;
}
.container {
  position: relative;
}

Style the window:

.window {
  position: relative;
}

.frame {
  position: relative;
  width: 350px;
  height: 250px;
  border: 5px solid #e9ecef;
  background-color: #48cae4;
  overflow:hidden;
}

.hills {
  position: absolute;
  background-color: #90e0ef;
  width: 550px;
  height:250px;
  border-radius:50%;
  top:80px;
  left:-100px;
}

.hills:before {
  position: absolute;
  content:"";
  background-color: #ade8f4;
  width: 1000px;
  height:250px;
  border-radius:50%;
  left:50px;
  top:20px;
}

.hills:after {
  content:"";
  position: absolute;
  background-color: #caf0f8;
  width: 800px;
  height:250px;
  border-radius:50%;
  left:-200px;
  top:100px;
}

.tree {
  position: absolute;
  width:3px;
  height:15px;
  background-color: #432818;
  top:170px;
  left:75px;
}

.tree:before {
  content:"";
  position: absolute;
  border-bottom:40px solid #2c6e49;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  width:0;
  height:0;
  left:-8px;
  top:-30px;
}

.tree:after {
  content:"";
  position: absolute;
  width:2px;
  height:15px;
  background-color: #432818;
  top:-60px;
  left:75px;
}

.tree2 {
  position: absolute;
  border-bottom:35px solid #4c956c;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  width:0;
  height:0;
  top:85px;
  left:144px;
}

.tree2:before {
  content:"";
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  top:-12px;
  left:115px;
}

.tree2:after {
  content:"";
  position: absolute;
  border-bottom:27px solid #2c6e49;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:-28px;
  left:110px;
}

.tree3 {
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  top:85px;
  left:25px;
}

.tree3:before {
  content:"";
  position: absolute;
  border-bottom:20px solid #4c956c;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:-8px;
  left:-5px;
}

.tree3:after {
  content:"";
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  left:17px;
  top:-5px;
}

.tree4 {
  position: absolute;
  border-bottom:27px solid #2c6e49;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:64px;
  left:37px;
}

.tree4:before {
  content:"";
  position: absolute;
  width:1.5px;
  height:15px;
  background-color: #432818;
  left:147px;
  top:40px;
}

.tree4:after {
  content:"";
  position: absolute;
  border-bottom:27px solid #2c6e49;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width:0;
  height:0;
  top:23px;
  left:142px;
}

.shine {
  position: absolute;
  width: 200px;
  height:100px;
  background-color: rgba(255,255,255,0.2);
  transform: skew(-20deg,-50deg);
  top:50px;
  left:-10px;
}

.shine:before {
  content:"";
  position: absolute;
  width: 200px;
  height:100px;
  background-color: rgba(255,255,255,0.2);
  top:400px;
  left:320px;
}

.sill {
  position: absolute;
  left:-20px;
  width:400px;
  height:10px;
  background-color: #c5c3c6;
  z-index:15;
  box-shadow: 5px 7px 0 rgba(0,0,0,0.05);
}

.sill:before {
  width:340px;
  height:240px;
  border: 5px solid white;
  content:"";
  position: absolute;
  top:-300px;
  left:25px;
  top:-255px;
  box-shadow:inset 5px 5px rgba(0,0,0,0.05);
}

.sill:after {
  content:"";
  position: absolute;
  background-color: white;
  height: 240px;
  width:10px;
  left:193px;
  top:-250px;
  box-shadow:5px 1px rgba(0,0,0,0.05);
}

.knob {
  position: absolute;
  width:30px;
  height:10px;
  border-radius:10px;
  background-color: #c5c3c6;
  z-index:20;
  top:135px;
  left:175px;
}

Add cup of hot tea:

.mug {
  position: absolute;
  background-color: #db504a;
  width:28px;
  height: 35px;
  border-radius:5px 5px 10px 10px;
  z-index:25;
  top:225px;
  left:250px;
  box-shadow:inset -5px -5px rgba(0,0,0,0.05);
}

.mug:before {
  content:"";
  position: absolute;
  border:5px solid #db504a;
  width:15px;
  height:15px;
  border-radius:50%;
  left:-10px;
  top:5px;
}

#up {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #F3F1E7;
  border-radius: 50%;
  opacity: 0;
  top: 220px;
  left: 255px;
  z-index:20;
}

.steam {
  animation: up 3s ease-out infinite; 
}

.steam2 {
  animation: up 2s ease-out infinite; 
  animation-delay:0.5s;
}

.steam2:before {
  content:"";
  position: absolute;
  left:5px;
  width:15px;
  height:15px;
  background-color: #fff;
  border-radius:50%;
  top:20px;
}

and some snowflakes:

.snow {
  position: absolute;
}

.snowflake1, .snowflake2, .snowflake3, .snowflake4, .snowflake5 {
  width:5px;
  height:5px;
  border-radius:50%;
  opacity:0.7;
  position: absolute;
  z-index:10;
  background-color: white;
}

.snowflake1 {
  animation: fall 4s linear infinite;
  box-shadow: 100px -10px white, 200px -5px white, -20px -35px white, 250px -50px white, 240px -150px white, 40px -130px white;
  left:50px;
}

.snowflake2 {
  animation: fall 5s linear infinite;
  animation-delay:2s;
  top:-55px;
  box-shadow: 75px -10px white, 163px -10px white, -20px -35px white, 250px -50px white, 240px -150px white, 40px -130px white;
  left:30px;
}

.snowflake3 {
  animation: fall 4.5s linear infinite;
  animation-delay:1s;
  top:-85px;
  box-shadow: 90px -10px white, 180px -15px white, -20px -35px white, 230px -50px white, 10px -140px white, 70px -120px white;
  left:60px;
}

.snowflake4 {
  animation: fall 3.5s linear infinite;
  top:-115px;
  box-shadow: 70px -20px white, 140px -5px white, -20px -35px white, 230px -50px white, 110px -80px white, 99px -25 white;
  left:80px;
}

.snowflake5 {
  animation: fall 2.9s linear infinite;
  animation-delay:3s;
  top:-145px;
  box-shadow: 190px -10px white, 280px -15px white, 320px -35px white, 230px -50px white, 113px -100px white, 256px -50px white, 116px -50px white;
  left:-5px;
}

Step3.

CSS Animation

To create Snowfall:

@keyframes fall {
    100% {transform: translateY(400px);}
}

To add to the hot drink steam:

@keyframes up {
  0%{
    transform: translateY(0) scale(0.5);
    opacity: 0.9;
  }
  100%{
    transform: translateY(-50px) scale(1);
    opacity: 0;
  }
}

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!