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 and watch the video tutorial:

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!

Read also:

Pure CSS Train Animation

CSS Plane Animation

CSS Cyclist /Bike Animation

Categories
CSS Web development

CSS Bouncing Basketball

CSS Bouncing Basketball

Demo:

*to see the animation on the website click here.

To create the CSS Bouncing Basketball follow the steps below and watch the video tutorial:

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!

Read also:

CSS Paper Plane Animation

CSS Umbrella (Open/Close on Click)

CSS Parallax Scrolling Effect

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 and watch the video tutorial:

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!

Hey, here’s something that might interest you:

CSS Steaming Coffee

CSS Doughnut

CSS Coffee Express Animation

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 traveling?

CSS train animation

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 and watch the video tutorial:

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!

Read also:

CSS Train Animation

CSS Train Front Animation/ Loader

CSS Car Animation

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 and watch the video tutorial:

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!

Hey, here’s something that might interest you:

CSS Train Animation

CSS Saturn/ Planet Rings

CSS Airplane Window (Open/Close)

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 and watch the video tutorial:

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!

Read also:

CSS Sliced Text Effect

CSS Mirror/ Reflection Text Effect

Text Effects

Categories
CSS Web development

CSS Heart Shape & Heartbeat Animation

CSS heart

Demo:

*to see the CSS Heartbeat Animation on the website click here.

What do you need to do?

To create the CSS Heart Shape & Heartbeat Animation follow the steps below and watch the video tutorial:

  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 shape:

.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);
  }
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Valentine’s Day Card

Fast & easy CSS Valentine’s Day Animation (Heartbeat)

Valentine’s Day

Categories
CSS JQuery Web development

CSS Valentine’s Day Card

Hello! Valentine’s day is coming up – a day to celebrate love and friendship! Do you have Valentine’s Day Card for your loved ones?

CSS Valentine's Card

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

*animation opened in the Firefox browser.
*to see the animation on the website click here.

Demo:

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 read how to add jQuery to HTML click here.

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 animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Heart Shape & Heartbeat Animation

Pure CSS Envelope (Open/Close on click)

CSS Envelope (Open/Close on Hover)

Categories
CSS JQuery Web development

CSS Champagne Glass Animation

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

To learn how to create the CSS Champagne Glass animation follow the steps below and watch the video tutorial.

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

Demo:

What do you need to do?

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

Step1.

Add HTML

<div class="newyear">
  <div class="glass1">
  <div class="glass">
     <div class="holder"></div>
    </div>
    <div class="drink">
      <div class="liquid"></div>
      <div id="bubbles">
  <div id="bubble" class="bubble1"></div>
  <div id="bubble" class="bubble2"></div>
  <div id="bubble" class="bubble3"></div>
  <div id="bubble" class="bubble4"></div>
    </div>
      </div>
    <div class="champagne"></div>
  </div>
  <div class="line"></div>
  <div class="text">Happy New Year!</div>
  <div class="number">2021</div>
</div>

Step2.

Add CSS

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

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

.newyear {
  position: relative; 
}

.glass1 {
  position: absolute;
  animation: drop 2s linear;
}

Style the glass:


.glass {
  position: absolute;
  width: 50px;
  height: 110px;
  border: 5px solid #333;
  border-radius:0 0 50px 50px;
  box-shadow: inset 0 -5px 0 rgba(255,255,255,0.4);
  top:-10px;
  z-index:30;
  animation: drop 2s linear;
}
.glass:before {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  width:7px;
  height:70px;
  left:7px;
  top:15px;
  border-radius:10px;
}

.holder {
  position: absolute;
  width:5px;
  height:70px;
  background-color: #333;
  top:115px;
  left:24px;
}

.holder:before {
  content:"";
  position: absolute;
  width:50px;
  height:10px;
  background-color: #333;
  top:70px;
  left:-22px;
  border-radius:30px 30px 0 0;
}

Fill the glass:

.drink {
  position: absolute;
  overflow: hidden; 
  width: 48px;
  height: 180px;
  border-radius:0 0 50px 50px;
  top:-78px;
  left:6px;

}

.liquid {
  position: absolute;
  background-color: #fdc500;
  width:80px;
  height:50px;
  left:-5px;
  top: 210px;  
}

.champagne {
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: #fdc500;
  top:-350px;
  left: 20px;
  z-index:5;
  animation: champagne 3s linear;
  animation-delay: 2s;
}

Add some bubbles:

#bubbles {
  position: absolute;
  top:50px;
  
}

#bubble {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #F3F1E7;
  border-radius: 50%;
  opacity: 0;
  top: 100px;
  left: 10px;
  z-index:10;
  
}
.bubble1 {
  animation: bubble1 1.2s ease-out 5s infinite; 
}
.bubble3 {
  animation: bubble1 1s ease-out 4.2s infinite; 
}
.bubble2 {
  animation: bubble2 1.2s ease-out 4.7s infinite; 
}
.bubble4 {
  animation: bubble2 1.3s ease-out 3.7s infinite; 
}

Add the wishes to the animation:

.line {
  position: absolute;
  background-color: #333;
  height:5px;
  width:250px;
  top:190px;
  left:-97px;
}
.text {
  position: absolute;
  top:200px;
  left:-93px;
  display: inline-block;
  white-space: nowrap;
  font-family: 'Brush Script MT', cursive;
  font-size:40px;  
}

.number {
  position: absolute;
  top:240px;
  left:-10px;
  font-family: 'Brush Script MT', cursive;
  font-size:40px;  
}

Step3.

Add CSS Animation

Drop the glass down:

@keyframes drop {
  0% {transform: translateY(-470px); opacity: 0;}
  5% {opacity: 1;}
  50% {transform: translateY(0px); opacity: 1;}
  65% {transform: translateY(-15px); opacity: 1;}
  75% {transform: translateY(-18px); opacity: 1;}
  100% {transform: translateY(0px); opacity: 1;}
}

To pour the champagne:

@keyframes champagne {
  0% {height: 0px; opacity: 1; transform: scaleX(1);}
  10% {height: 0px; opacity: 1; transform: scaleX(0.95);}
  30% {height:450px;opacity: 1; transform: scaleX(0.9);}
  80% {height: 450px; opacity: 1; transform: scaleX(0.85);}
  100% {height: 450px; opacity: 0; transform: scaleX(0.8);}
}

Move the bubbles:

@keyframes bubble1{
  0%{
    transform: translateY(0) translateX(0) scale(0.3);
    opacity: 1;
  }
  100%{
    transform: translateY(-95px) translateX(10px) scale(0.5);
    opacity: 0.5;
  }
}
@keyframes bubble2{
  0%{
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 1;
  }
  100%{
    transform: translateY(-105px) translateX(-10px) scale(0.6);
    opacity: 0.6;
  }
}

Step4.

Add jQuery

setTimeout(function(){
    $(".liquid").animate({
        "height": "+=40",
        top: "-=100"
    }, 2000)
}, 2000, "ease")

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

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Snowfall

Birthday Cake – CSS Animation

CSS Party drinks

Categories
CSS JQuery Web development

CSS Christmas Card

Many of us have our own personal traditions when sending out Christmas cards. I always send the wishes to my family and friends, so to make it easier I created the CSS Christmas Card 🙂

CSS Christmas Card

If you still did not send the wishes to your loved ones, follow the steps below and create an original Christmas card!

*Christmas card opened in the Firefox browser.
*to see the animation on the website click here.

Demo:

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
  4. Add jQuery (optional)

Step1.

Add HTML

Create the container, the card, and snowflakes:

<div id="christmascard">
  <div class="card">
    <div class="tree">
      <div class="tree1"></div>
      <div class="balls"></div>
      <div class="balls1"></div>
      <div class="sparkles">✨</div>
      <div class="sparkles1">✨</div>
    </div>
    <div class="wishes">
<!-- You can type your wishes here -->
      <div class="merry">Merry</div>
      <div class="christmas">CHRISTMAS</div>
      <div class="everyone">Everyone</div>
      <div class="lena">Lena xxx</div>
  </div>
    <div class="snowfall">
      <div class="snowflake1">❄</div>
      <div class="snowflake2">❄</div>
      <div class="snowflake3">❄</div>
      <div class="snowflake4">❄</div>
      <div class="snowflake5">❄</div>
      <div class="snowflake6">❄</div>
      <div class="snowflake7">❄</div>
      <div class="snowflake8">❄</div>
      <div class="snowflake9">❄</div>
      <div class="snowflake10">❄</div>
    </div>
</div>
</div>

Step2.

Add CSS

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

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

#christmascard {
  position: relative;  
}

Create the card:

.card {
  z-index:1;
  position: relative;
  width: 500px;
  height: 400px;
  border: 10px solid #fff;
  box-shadow: inset 5px 5px 1px rgba(0,0,0,0.07), 10px 10px 7px rgba(0,0,0,0.3);
  background-color: #c44536;
  overflow:hidden;
  
}

.tree {
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #43291f;
  left: 245px;
  top:120px;
}

.tree:before {
  content:"";
  position: absolute;
  border-bottom: 45px solid #6a994e;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  width:0;
  height:0;
  left:-35px;
  top:-30px;
}

.tree:after {
  content:"";
  position: absolute;
  border-bottom: 45px solid #a7c957;
  border-right: 40px solid transparent;
  top:-30px;
  left:5px;
  width:0;
  height:0;
}

.tree1 {
  position: absolute;
  border-bottom: 40px solid #6a994e;
  border-right: 35px solid transparent;
  border-left: 35px solid transparent;
  width:0;
  height:0;
  left:-30px;
  top:-55px;
}

.tree1:before {
  content:"";
  position: absolute;
  border-bottom: 40px solid #a7c957;
  border-right: 35px solid transparent;
  top:0;
  left:0;
  width:0;
  height:0;
}

.tree1:after {
  content:"";
  position: absolute;
  border-bottom: 30px solid #6a994e;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-15px;
  left:-25px;
  width:0;
  height:0;
}

.balls {
  position: absolute;
  border-bottom: 30px solid #a7c957;
  border-right: 25px solid transparent;
  width:0;
  height:0;
  left:5px;
  top:-70px;
}

.balls:before {
  content:"";
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  top:14px;
  left:2px;
}

.balls:after {
  content:"";
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  top:40px;
  left:-15px;
}

.balls1 {
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  z-index:2;
  left:-10px;
}

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

.balls1:after {
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  content:"";
  left:25px;
  top:-5px;
}

.sparkles {
  position: absolute;
  z-index:2;
  font-size:25px;
  left:-50px;
  top:-5px;
}

.sparkles1 {
  position: absolute;
  z-index:2;
  font-size:23px;
  top:-63px;
  left:18px;
}

Style the wishes (you can type your wishes in the HTML part):

.wishes {
  position: absolute;
  top:200px;
  text-align: center;
  left:140px;
  top:180px;
  color: #fff;
  line-height: 50px;  
}

.merry {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.everyone {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.christmas {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.lena {
  font-family: 'Brush Script MT', cursive;
  font-size: 25px;
}

Step3.

Add CSS Animation

Add some snowflakes to the card:

.snowfall {
  position: absolute;
}

.snowflake1, .snowflake2, .snowflake3, .snowflake4, .snowflake5, .snowflake6, .snowflake7, .snowflake8, .snowflake9, .snowflake10 {
  color: white;
  position: absolute;
}

.snowflake1 {
  font-size:25px;
  left:30px;
  animation: fall 10s linear infinite;
}

.snowflake2 {
  font-size:15px;
  left:30px;
  animation: fall2 6s linear infinite;
}

.snowflake3 {
  font-size:19px;
  left:230px;
  animation: fall3 7s linear infinite;
}

.snowflake4 {
  font-size:24px;
  left:250px;
  animation: fall4 8s linear infinite;
}

.snowflake5 {
  font-size:22px;
  left:333px;
  animation: fall2 6s linear infinite;
}

.snowflake6 {
  font-size:27px;
  left:400px;
  animation: fall 6.5s linear infinite;
}

.snowflake7 {
  font-size:20px;
  left:450px;
  animation: fall5 8.5s linear infinite;
}

.snowflake8 {
  font-size:18px;
  left:170px;
  animation: fall3 7.5s linear infinite;
}

.snowflake9 {
  font-size:29px;
  left:120px;
  animation: fall4 9.5s linear infinite;
}

.snowflake10 {
  font-size:27px;
  left:290px;
  animation: fall5 5s linear infinite;
}

@keyframes fall {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-10px);}
}

@keyframes fall2 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-40px);}
}

@keyframes fall3 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(50px);}
}

@keyframes fall4 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(30px);}
}

@keyframes fall5{
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-40px);}
}

Christmas Card is ready but if you want to add to the card an extra rotation effect follow the step below.

Step4.

Add jQuery

*don’t forget to add the jQuery library in the head section of your HTML file.

$(function(){
    var card = $("#christmascard");
    card.on('mousemove', function (event) {
    var y = event.clientY - $(this).offset().top + $(window).scrollTop();
    var x = event.clientX - $(this).offset().left + $(window).scrollLeft();
            
    var rY = turn(x, 0, $(this).width(), -30, 30);
    var rX = turn(y, 0, $(this).height(), -50, 50);
    
        $(this).children(".card").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
    });
        
    function turn(x, in_min, in_max, out_min, out_max)
    {
        return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
    }
});

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

Enjoy coding!

Read also:

CSS Snowfall

CSS Christmas Tree Snow Globe

CSS Christmas Tree