Categories
#SVG Web development

SVG Handwriting Animation

Practising SVG Path drawing I created the SVG Handwriting Animation.

SVG Handwriting Animation

I’ve tried several ways to make this animation, and I found (in my opinion) the easiest way is to create the text in Adobe Illustrator (or any different program which creates SVG’s) by using the path tools like the Pen tool, or the Pencil tool.

*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Draw your text

This time I used the Pencil tool, and renamed each path (like on the image below, I drew letter L and I named this path as an L). This will make the animation easier to set up later.

I drew the letters one by one but if you want to draw more letters on the same path that will be okay too.

Draw your text and export it like an SVG.(To see how to create an SVG file click here).

Step2.

Add the HTML and paste your SVG code into it:

<div id="container">
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285.84 73.32"><defs><style>.cls-1{fill:none;stroke:#1d1d1b;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style></defs><title>lenastanley</title><path id="L" class="cls-1" d="M109.68,101.19c1.09,5.41,6.88,9,12.4,8.87s10.6-3.21,14.52-7.1c1.82-1.81,3.52-3.94,3.92-6.47s-.9-5.5-3.39-6.15a5.31,5.31,0,0,0-4.69,1.34,12.14,12.14,0,0,0-2.83,4.18c-5.73,12.48-4,27.77-11.35,39.37a13.56,13.56,0,0,1-4,4.32,6.65,6.65,0,0,1-5.66.87c-3.45-1.21-4.62-5.89-3.14-9.23s4.79-5.48,8.15-6.93c4.7-2,10-3.1,15-2s9.64,4.64,11.15,9.55-.81,10.95-5.58,12.85" transform="translate(-103.33 -88.71)"/><path id="E" class="cls-1" d="M154,127.24a15.13,15.13,0,0,0,6.2-2.32c1.77-1.34,2.93-3.76,2.13-5.84s-3.48-3.15-5.72-2.65a9.37,9.37,0,0,0-5.36,4,17.26,17.26,0,0,0-3,11.81,7.87,7.87,0,0,0,1.85,4.62,6.47,6.47,0,0,0,5.85,1.6,12.8,12.8,0,0,0,5.55-2.9" transform="translate(-103.33 -88.71)"/><path id="N" class="cls-1" d="M170.47,115.52c1.94,3.42,1.81,7.63,1,11.47s-1.56,7.08-2.12,11c1-3.25,2.28-6,3.4-10.17,1-3.69,2.5-7.54,5.67-9.67,1.28-.87,3.07-1.36,4.32-.45a4.59,4.59,0,0,1,1.45,3.13,43.49,43.49,0,0,1-.68,17.12l.28-.62" transform="translate(-103.33 -88.71)"/><path id="A" class="cls-1" d="M210.05,138.29a16.72,16.72,0,0,1-.49-8.35,74.74,74.74,0,0,0,1.18-8.38,6.47,6.47,0,0,0-1.36-4.8,4.93,4.93,0,0,0-4.8-1.07,10.56,10.56,0,0,0-4.33,2.71c-3.58,3.41-6.19,8.15-5.93,13.08.11,2.12.86,4.37,2.61,5.56a4.69,4.69,0,0,0,7.26-3.18" transform="translate(-103.33 -88.71)"/><path id="S" class="cls-1" d="M263.55,91.6a11.16,11.16,0,0,0-7.92,9,4.59,4.59,0,0,0,1.12,4.2,3.42,3.42,0,0,0,4.72-.76,5,5,0,0,0,.21-5.07,9.18,9.18,0,0,0-3.79-3.67c-3.76-2.15-8.58-2.7-12.46-.77s-6.42,6.59-5.29,10.77c.88,3.26,3.68,5.69,6.7,7.22s6.34,2.35,9.46,3.68,6.14,3.31,7.64,6.34a10.65,10.65,0,0,1-.8,10.26,14.2,14.2,0,0,1-8.68,5.91,21.83,21.83,0,0,1-10.65-.33c-3.31-.87-6.6-2.43-8.59-5.21s-2.24-7,.12-9.44a8.48,8.48,0,0,1,5.13-2.27,14.31,14.31,0,0,1,9.19,26.42" transform="translate(-103.33 -88.71)"/><path id="T" class="cls-1" d="M280.38,107c-2,7.37-4,14.83-4.25,22.46a18,18,0,0,0,.91,7.16c.42,1.09,1.2,2.23,2.37,2.32" transform="translate(-103.33 -88.71)"/><path id="T2" class="cls-1" d="M272.26,116.93a27,27,0,0,1,11.69-.07" transform="translate(-103.33 -88.71)"/><path id="A2" class="cls-1" d="M303.78,139.29a16.77,16.77,0,0,1-.48-8.36,76.78,76.78,0,0,0,1.18-8.38c0-1.71-.17-3.57-1.36-4.8a5,5,0,0,0-4.81-1.07A10.58,10.58,0,0,0,294,119.4c-3.59,3.4-6.2,8.15-5.94,13.08.11,2.12.86,4.36,2.62,5.55a4.75,4.75,0,0,0,4.5.42,4.8,4.8,0,0,0,2.76-3.59" transform="translate(-103.33 -88.71)"/><path id="N2" class="cls-1" d="M315,115.69c1.93,3.41,1.81,7.63,1,11.46s-1.56,7.09-2.12,11c1-3.25,2.28-6,3.4-10.17,1-3.69,2.49-7.54,5.66-9.68,1.28-.86,3.08-1.36,4.33-.45a4.61,4.61,0,0,1,1.44,3.14,43.69,43.69,0,0,1-.67,17.12l.27-.63" transform="translate(-103.33 -88.71)"/><path id="L2" data-name="L" class="cls-1" d="M345.1,96.4c-.3,11.8-4.39,23.33-4.06,35.13a15.66,15.66,0,0,0,1.58,7.26" transform="translate(-103.33 -88.71)"/><path id="E2" class="cls-1" d="M355.85,127.4a15.12,15.12,0,0,0,6.2-2.31c1.77-1.35,2.93-3.77,2.13-5.84s-3.48-3.15-5.72-2.66a9.43,9.43,0,0,0-5.36,4,17.29,17.29,0,0,0-3,11.8,7.92,7.92,0,0,0,1.86,4.62,6.47,6.47,0,0,0,5.85,1.61,12.71,12.71,0,0,0,5.55-2.91" transform="translate(-103.33 -88.71)"/><path id="Y"class="cls-1" d="M373.08,115.75a29.75,29.75,0,0,0-.38,16.7c.52,1.89,1.42,3.94,3.26,4.61a4.61,4.61,0,0,0,4.57-1.22,12,12,0,0,0,2.58-4.21A69.17,69.17,0,0,0,387.62,116l-1.46,13.43a84.83,84.83,0,0,1-2.53,15,28.46,28.46,0,0,1-7.56,13,11.54,11.54,0,0,1-5.4,3,6.09,6.09,0,0,1-5.75-1.72c-1.85-2.17-1.35-5.66.47-7.85s4.63-3.29,7.4-4a16.16,16.16,0,0,1,8.67-.07c2.78.89,5.26,3.18,5.72,6.07l.49-.49" transform="translate(-103.33 -88.71)"/></svg>
</div>

Step3.

Add CSS

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

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

#container {
  position: relative;
  cursor:pointer;
  width: 100%;
  max-width: 400px;
  left:-200px;
}

svg {
  width: 100%;
  max-width: 400px;
  padding: 150px; 
  
}

Add your letters(paths):

#L  {
        stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards;
}

To each letter, I added the animation – duration time and animation-delay to make handwriting smoother.

#E {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards .8s;
}

#N {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 1.1s;
}

#A {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 1.3s;
}

#S {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.4s linear forwards 1.8s;
}

#T {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.3s;
}

#T2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.3s;
}

#A2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.6s;
}

#N2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 2.9s;
}

#L2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.2s;
}

#E2 {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.5s;
}

#Y {
  stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: lena 1.5s linear forwards 3.8s;
}

Step4.

Add CSS Animation

Add the @keyframes:

@keyframes lena {
	0% {
        stroke-width: 3;
		stroke-dashoffset: 600;
	}
    
    14% {
        stroke-width: 3;
    }
    
    15% {
        stroke-width: 3;
    }
    
	100% {
		stroke-dashoffset: 0;
	}
}

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

Enjoy coding!

Categories
CSS HTML Web development

CSS Windsurfing

I love water sports – can’t wait to Windsurf again!

CSS Windsurfing Animation

Thinking about the wind and the waves I created the Windsurfing animation using just pure CSS.

*animation opened in the Safari browser.
To see the live output of the animation click here.

To create the animation you’ll need 2 images of the waves in .png format. For your training, you can use mine pictures below which I created in Adobe Photoshop, and then follow the steps below:

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

Step1.

Add HTML

<div class="container">
  <div class="windserfing">
    <div class="sail">
      <div class="boom"></div>
      <div class="mast"></div>
    </div>
    <div class="board"></div>
    <div class="surfer">
      <div class="head"></div>
      <div class="hair"></div>
      <div class="sunglasses"></div>
      <div class="top"></div>
      <div class="shorts"></div>
      <div class="leg"></div>
      <div class="leg2"></div>
      <div class="arm"></div>
      <div class="arm2"></div>
    </div>
    </div>
   <div class="wave1"></div>
   <div class="wave2"></div>
</div>

Step2.

Add CSS

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

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

Style the Sail:

.windsurfing {
  position:relative; 
  animation: surf 2s ease infinite;
}

.sail{
  position: relative;
  width: 0;
  height: 0;
  border-top: 280px solid transparent;
  border-right: 110px solid rgba(237, 246, 125, 0.95);
  border-bottom: 50px solid transparent;
  transform-style: preserve-3d;
  left:30px;
  top:-40px;
  z-index:5;
}
.sail:before {
  position: absolute;
  content:"";
  width:65px;
  height:5px;
  background-color: #F896D8;
  border-radius:100px;
  top:-130px;
  left:50px;
  transform: rotate(25deg);
}
.sail:after {
  position: absolute;
  content:"";
  width:123px;
  height:5px;
  background-color: #F896D8;
  border-radius:100px;
  top:20px;
  left:-7px;
  transform: rotate(25deg);
}

.boom {
  width: 145px;
  height: 150px;
  border: solid 10px black;
  border-radius: 50%;
  top: -125px; 
  left: -20px; 
  position: absolute;
  transform: rotate3d(0.4, 0.2, 0, 75deg); 
  box-sizing: border-box;
}
.mast {
  position: absolute;
  width:5px;
  height:360px;
  background-color: black;
  left:110px;
  top:-280px;
  border-radius:100px;
  z-index:1;
}
.mast:before {
  position: absolute;
  content:"";
  background-color:black;
  width:25px;
  height:10px;
  top:350px;
  left:-10px;
  border-radius:30px 30px 0 0;
}
CSS Sail

Style the Board:

.board {
  width:300px;
  height: 50px;
  position:absolute;
  background-color: #724CF9;
  border-radius:50%;
  left:-60px;
  top:300px;
  box-shadow: inset 15px -10px 0 #564592;
}
.board:after {
  content:"";
  position: absolute;
  border-radius:0 0 100% 50%;
  width:20px;
  height:40px;
  background-color: #564592;
  left:40px;
  top:40px;
  transform: skew(-25deg);
}
CSS Windsurfing

Add the Windsurfer:

.surfer {
  position:absolute;
  top:0;
  left:0;
}
.head {
  position:absolute;
  background-color: #ffcb69;
  border-radius:50%; 
  width:45px;
  height:50px;
  top:110px;
  left:-55px;
  box-shadow: inset 3px 8px 0 black;
}
.head:before {
  position:absolute;
  content:"";
  width:15px;
  height:15px;
  background-color: #ffcb69;
  left:35px;
  top:20px;
  border-radius: 0 40px;
  
}
.head:after {
  content:"";
  position: absolute;
  border-radius:50%;
  box-shadow: inset 2px 2px 0 black;
  width:15px;
  height:15px;
  top:15px;
  left:10px;
}

.sunglasses {
  position: absolute;
  width: 8px;
  height:15px;
  border-radius:50%;
  background-color: brown;
  top:120px;
  z-index:5; 
  left:-15px;
  box-shadow: inset 2px 2px 0 black;
  
}
.sunglasses:before {
  content:"";
  position:absolute;
  width:25px;
  height:3px;
  background-color:black;
  top:5px;
  left:-22px;
}

.sunglasses:after {
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background-color:black;
  border-radius:50%;
  top:-10px;
  left:-5px;
}

.top {
  position:absolute;
  width:20px;
  height:50px;
  border-top: 25px solid #41ead4;
  border-left: 35px solid #41ead4;
  border-bottom: 30px solid transparent;
  border-right: 20px solid transparent;
  border-radius:50%;
  top:150px;
  left:-70px;
}

.shorts {
  z-index:5;
  position:absolute;
  width:45px;
  height:40px;
  background-color: #CC444B;
  top:225px;
  left:-60px;
  transform: skew(10deg) rotate(-40deg);
  border-radius: 30px 0 0 0;
}
.shorts:before {
  content:"";
  position:absolute;
  width:36px;
  height:40px;
  background-color: #DA5552;
  top:7px;
  left:8px;
  border-radius: 30px 0 0 0;
  transform: skew(5deg) rotate(-30deg);
}

.shorts:after {
  content:"";
  position: absolute;
  width:38px;
  height:10px;
  left:10px;
  background-color: #CC444B;
}

.leg {
  position:absolute;
  width:5px;
  height:70px;
  background-color: #ffcb69;
  top:250px;
  left:5px;
  transform: rotate(-35deg);
}

.leg:before {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:30px;
  height:10px;
  border-radius: 0 30px 0 0;
  top:70px;
}

.leg2 {
  position:absolute;
  background-color: #ffcb69;
  width:5px;
  height:40px;
  top:250px;
  left:-31px;
  transform: rotate(-35deg);
}

.leg2:before {
  content:"";
  position: absolute; 
  width:5px;
  height:40px;
  background-color: #ffcb69;
  transform: rotate(35deg);
  top:35px;
  left:-11px;
}

.leg2:after {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:30px;
  height:10px;
  border-radius: 0 30px 0 0;
  top:70px;
  left:-22px;
}

.arm { 
  position: absolute; 
  background-color: #ffcb69;
  width:5px;
  height:35px;
  top:168px;
  left:-5px;
  transform: rotate(-45deg);
  z-index:-1;
}
.arm:before {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:5px;
  height:35px;
  top:5px;
  left:11px;
  transform: rotate(45deg);
}

.arm:after {
  content:"";
  position: absolute;
  background-color: #ffcb69;
  width:15px;
  height:15px;
  transform: rotate(-45deg);
  top:2px;
  left:25px;
  border-radius: 0 30px 30px 30px;
}

.arm2 {
  position:absolute;
  background-color: #ffcb69;
  width:35px;
  height:5px;
  top:155px;
  left:-21px;
  z-index:-1;
  
}
.arm2:after {
  content:"";
  position: absolute;
  background-color: #ffcb69;
  width:15px;
  height:15px;
  transform: rotate(-45deg);
  top:-7px;
  left:40px;
  border-radius: 0 30px 30px 30px;
}

.hair {
  position:absolute;
  background-color: black;
  border-radius:50%;
  width:15px;
  height:15px;
  top:97px;
  left:-40px;
}
.hair:before {
  content:"";
  position:absolute;
  background-color: black;
  border-radius:50%;
  width:12px;
  height:12px;
  left:12px;
  top:6px;
}

and add the Waves:

.wave1, .wave2 {
  height: 300px;
  position: absolute;
  width: 1000px;
  z-index: 99;
  left: -400px;
  top:280px;
  opacity:0.6;
}

.wave1 {
  background: url('https://lenadesign.org/wp-content/uploads/2020/05/vawe3-1.png?w=1024') repeat-x;
  -webkit-animation: wave-animation1 8.7s infinite linear; 
  -moz-animation:    wave-animation1 8.7s infinite linear; 
  -o-animation:      wave-animation1 8.7s infinite linear; 
   animation:        wave-animation1 8.7s infinite linear; 
}

.wave2 {
  background: url('https://lenadesign.org/wp-content/uploads/2020/05/vawe1.png?w=1024') repeat-x;
  -webkit-animation: wave-animation1 6.3s infinite linear;
  -moz-animation:    wave-animation1 6.3s infinite linear; 
  -o-animation:      wave-animation1 6.3s infinite linear; 
  animation:         wave-animation1 6.3s infinite linear; 
}
CSS Waves

Step3.

Add CSS Animation

To Surf:

@keyframes surf {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px) rotate(-7deg);}
	60% {transform: translateY(-15px) rotate(3deg);}
}

and for the Waves:

@-webkit-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@-moz-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@-o-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% {background-position: 1601px 0;}
}

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

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS & jQuery 3d Cube

3d Cube

From the tutorial CSS Perspective property, we know now how to create 3d Cube. To make a Cube move/rotate we can add some JavaScript and jQuery.

*animation opened in the Safari browser.
To see the live output of the animation click here.

The cube is gonna move with the move of the mouse.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add JavaScript/jQuery

Step1.

Add HTML

Each cube has 6 sides. We need to create them in HMTL:

<div id="wrap">
    <div id="D3Cube">
        <div id="side1"></div>
        <div id="side2"></div>
        <div id="side3"></div>
        <div id="side4"></div>
        <div id="side5"></div>
        <div id="side6"></div>
    </div>
</div>

Step2.

Add CSS

body {
  background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(233,210,148,1) 100%);
  height:100vh;
  display:flex;
  justify-content: center;
  align-items: center;
}

#wrap {
    position:relative;
}
#D3Cube {
    width: 250px;
    height: 250px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 250px;
    height: 250px;
    float: left;
    overflow: hidden;
    opacity: 0.8;
}
#side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #F9E79F;
}
#side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #85C1E9;
}
#side3 {
    transform: translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(125px);
    background-color: #F1948A;
}
#side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #1ABC9C;
}
#side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #8E44AD;
}
#side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #D7DBDD;
   }

Step3.

Add JavaScript/jQuery

$(document).mousemove(function(e) {
  $('#3dCube').css('transform', 'rotateX(0deg) rotateY(0deg)');
  
  var rotate_X;
  var rotate_Y;
  var invert = false;
  
  if (invert) {
    rotate_X = e.pageX;
    rotate_Y = e.pageY;
  } else if (!invert) {
    rotate_X = e.pageX;
    rotate_Y = -e.pageY;
  }
  
  $('#D3Cube').css('transform', 'rotateX(' + rotate_Y + 'deg) rotateY(' + rotate_X + 'deg)')
});

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

Enjoy coding!

Categories
CSS Web development

CSS Coffee Express Animation

It’s Monday… but it’s OK. Fancy some Coffee?

CSS Coffee Express

To create the CSS Coffee Express animation follow the steps below and watch the video tutorial.

*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Add HTML

<div class="container">
  <div class="express">
    <div class="top"></div>
    <div class="buttons"></div>
    <div class="logo"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
    <div class="buttons2"></div>
    <div class="coffeepod"></div>
    <div class="coffee"></div>
    <div class="milk"></div>
    <div class="cup">
    <div id="wrap">
  <div id="steam" class="steam1"></div>
  <div id="steam" class="steam2"></div>
  <div id="steam" class="steam3"></div>
  <div id="steam" class="steam4"></div>
    </div>
      </div>
  </div>
</div>

Step2.

Add CSS

Set the size and the colour of the background, and the container.

body {
  background-color: #CD6155;
  height: 100vh;
  
}
.container {
  position: relative;
  left:40%;
  top: 50px;
  
}

Style the coffee express:

.express {
  position: relative;
  
}
.top {
  position: absolute;
  background-color: #C2C1C1;
  width: 220px;
  height: 140px;
  border-radius: 30px;
  overflow:hidden;
  
}
.top:after {
  position: absolute;
  content:"";
  background-color:#E5E8E8;
  width:180px;
  height: 160px;
  left:20px;
  box-shadow:inset 5px 5px 0 rgba(0,0,0,0.07);
  
}
.middle {
  position: absolute;
  background-color: #b2b2b2;
  width:190px;
  height:180px;
  top:130px;
  left:15px;
  z-index:-1;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.middle:after {
  content:"";
  background-color: #A22C20;
  width:220px;
  height:20px;
  position: absolute;
  top:160px;
  left:-15px;
  border-radius: 10px 10px 0 0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.middle:before {
  content:"";
  position: absolute;
  background-color: #949494;
  width: 150px;
  height: 170px;
  left:20px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.bottom {
  position: absolute;
  background-color: #E74C3C;
  width: 260px;
  height: 60px;
  top:310px;
  left:-21px;
  border-radius:20px 20px 0 0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.bottom:after {
  content:"";
  position: absolute;
  background-color: #292929;
  width: 260px;
  height: 15px;
  border-radius: 0 0 10px 10px;
  top:60px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.bottom:before {
  content:"";
  position: absolute;
  background-color: #292929;
  width: 290px;
  height: 15px;
  top:70px;
  left: -16px;
  border-radius:20px;
  opacity:0.5;
}
CSS Coffee Express

Add the logo:

.logo {
  background-color: #F08080;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: 50px;
  left: 85px;
  transform: rotate(-45deg);
  width: 30px;
  
}

.logo:before,
.logo:after {
  content: "";
  background-color: #F08080;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
  box-shadow:inset -2px 2px 0 #EC7063;
}

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

.logo:after {
  left: 15px;
  top: 0;
}

and the buttons:

.buttons {
  position: absolute;
  border-radius: 50%;
  background-color: #A9CCE3;
  width: 20px;
  height: 20px;
  border: 4px solid #292929;
  top: 100px;
  left: 60px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.buttons:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #A9CCE3;
  width: 20px;
  height: 20px;
  border: 4px solid #292929;
  top: -3px;
  left: 30px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.buttons:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #A9CCE3;
  width: 20px;
  height: 20px;
  border: 4px solid #292929;
  top: -3px;
  left: 65px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.buttons2 {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:330px;
  left: 50px;
}
.buttons2:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  left: 50px;
  top:-2px;
}
.buttons2:before {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  left: 100px;
  top:-2px;
}
CSS Coffee

Coffee pod:

.coffeepod {
  position: absolute;
  width: 80px;
  height: 20px;
  background-color:#D7D7D7;
  top:140px; 
  left: 70px;
  border-radius: 0 0 20px 20px;
  box-shadow:inset 3px -5px 0 rgba(0,0,0,0.07);
}
.coffeepod:after {
  content:"";
  position: absolute;
  background-color: #292929;
  width:50px;
  height: 10px;
  top:20px;
  left:15px;
  border-radius: 0 0 5px 5px;
  
}

Coffee and milk:

.coffee {
  position: absolute;
  background-color: #292929;
  width: 10px;
  height: 20px;
  border-radius: 2px;
  top: 160px;
  left:95px;
}
.coffee:after {
  content:"";
  position: absolute;
  width: 6px;
  height: 65px;
  opacity: 0;
  top: 20px;
  left: 2px;
  background-color: #472708;
  animation: milk 5s linear;
  animation-delay: 5s;
}
.milk {
  position: absolute;
  background-color: #292929;
  width: 10px;
  height: 20px;
  border-radius: 2px;
  top: 160px;
  left:115px;
}

.milk:after {
  content:"";
  position: absolute;
  width: 6px;
  height: 65px;
  opacity: 0;
  top: 20px;
  left: 2px;
  background-color: white;
  animation: milk 4s linear;
  animation-delay: 4s;
}
CSS Coffee Machine

The Coffee Express is ready. Now, it is time to add the cup:

.cup {
  position: absolute;
  background-color:#292929;
  width: 70px;
  height: 5px;
  top: 285px;
  left: 75px;
  border-radius: 5px 5px 0 0;
}
.cup:after {
  position: absolute;
  content:"";
  background-color: #2874A6;
  width: 70px;
  height: 50px;
  border-radius: 5px 5px 30px 30px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:-49px;
}
.cup:before {
  position: absolute;
  content:"";
  border: 8px solid #2874A6;
  border-radius: 50%;
  width: 20px;
  height: 15px;
  top:-46px;
  left:55px;
  
}
CSS Coffee Machine

Steam:

#steam {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #F3F1E7;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  top: -20px;
  left: 30%;
}
.steam1 {
  animation: steam1 5s ease-out infinite; 
}
.steam3 {
  animation: steam1 4s ease-out 2s infinite; 
}
.steam2 {
  animation: steam2 1s ease-out 0.5s infinite; 
}
.steam4 {
  animation: steam2 2s ease-out 1.5s infinite; 
}

Step3.

Add CSS Animation

To fill the cup:

@keyframes milk {
  0% {height: 0px; opacity: 1;}
  10% {height: 0px; opacity: 1;}
  30% {height: 65px;opacity: 1;}
  80% {height: 65px; opacity: 1;}
  100% {height: 65px; opacity: 0;}
}

and add the steam:

@keyframes steam1{
  0%{
    transform: translateY(0) translateX(0) scale(0.3);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-80px) translateX(10px) scale(1);
    opacity: 0;
  }
}
@keyframes steam2{
  0%{
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-90px) translateX(-10px) scale(1);
    opacity: 0;
  }
}

To see the live output of the animation visit lenastanley.com.

Enjoy coding!

Categories
CSS HTML Web development

Working from home…with a Cat

When I am at home my cat is always next to me and he wants to do what I do. Cats are lovely creatures…

CSS Sleeping Cat

To create – Working from Home Animation..with the Cat follow the steps below:

*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Add HTML

<div class="container">
  <div class="laptop">
    <div class="bottom"></div>
    <div class="top"></div>
    <div class="screen"></div>
    <div class="screen1"></div>
    <div class="screen2"></div>
    <div class="deleting"><h1>Deleting...</h1></div>
    <div class="shadow"></div>
    <div class="head"></div>
    <div class="body"></div>
    <div class="paw"></div>
    <div class="paw1"></div>
    <div class="tail"></div>
    <div class="ear"></div>
    <div class="ear1"></div>
    <div class="face"></div>
    <div class="eyes"></div>
    <div class="mouth"></div>
  </div>
</div>

Step2.

Add CSS

Ste the size and the colour of the background and the container.

body {
  height:100vh;
  background-color:#4ED2BA;
}
.container {
  position: relative;
}

Style the laptop:

.laptop {
  position: relative;
  left: 40%;
  top: 350px;
}
.bottom {
  position: absolute;
  width: 400px;
  height: 30px;
  background-color: #DEDEDE;
  border-radius: 100px;
  border: 5px solid #767676;
  box-shadow:inset -55px -10px 0 rgba(0,0,0,0.07);
}
.bottom:after {
  content:"";
  position: absolute;
  width: 100px;
  height: 10px;
  background-color: #DEDEDE;
  border: 5px solid #767676;
  left: 145px;
  top:-5px;
  border-radius: 0 0 50px 50px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
}
.bottom:before {
  content:"";
  position: absolute;
  width: 200px;
  height: 30px;
  background-color: #DEDEDE;
  border-radius: 100px;
  border: 5px solid #767676;
  left: 350px;
  top:-5px;
  box-shadow:inset 15px -10px 0 rgba(0,0,0,0.07);
}
.top {
  position: absolute;
  width: 80px;
  height: 10px;
  background-color: #767676;
  border-radius: 100px;
  top: 15px;
  left: 370px;
}
.top:after {
  content:"";
  position: absolute;
  width: 40px;
  height: 10px;
  background-color: #767676;
  border-radius: 100px;
  left: 90px;
}
.top:before {
  content:"";
  position: absolute;
  background-color: #767676;
  border-radius: 100px;
  width: 15px;
  height: 15px;
  left: 140px;
  top:-3px;
  
}
.shadow {
  position: absolute;
  width: 600px;
  height: 50px;
  background-color: black;
  border-radius: 50%;
  left:-15px;
  z-index:-1;
  top:10px;
  opacity:0.7;
  
}

.screen {
  position: absolute;
  width: 460px;
  height: 250px;
  background-color:#404040;
  top:-280px;
  z-index:-10;
  left:80px;
  border-radius: 50px;
  transform: skew(-10deg);
  border: 20px solid #DEDEDE;
  box-shadow:inset 15px -10px 0 rgba(0,0,0,0.07);
}
.screen1 {
  position: absolute;
  width: 500px;
  height: 300px;
  background-color:#767676;
  transform: skew(-10deg);
  border-radius: 50px;
  top:-280px;
  z-index:-15;
  left:85px; 
}
CSS Laptop

Add a sleeping cat:

.body {
  position: absolute;
  width: 300px;
  height: 160px;
  background-color: #F1C40F;
  border-top-left-radius: 170px;
  border-top-right-radius: 170px;
  border: 10px solid #F1C40F;
  border-bottom: 0;
  left: 30px;
  top: -170px;
  z-index:20;             
}
.head {
  position: absolute;
  width: 150px;
  height: 100px;
  background-color: #F4D03F;
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  border: 10px solid #F4D03F;
  border-bottom: 0;
  left: 220px;
  top: -110px;
  z-index:21;

}
.paw {
  position: absolute;
  background-color: #F1C40F;
  width: 45px;
  height: 130px;
  border-radius: 0 0 100px 100px;
  left: 170px;
  box-shadow:inset 0px -25px 0 white;
  overflow:hidden;
  
 
}
.paw:after {
  content:"";
  position: absolute;
  background-color:#613A17;
  width:5px;
  height:15px;
  left: 10px;
  top:115px;
}
.paw:before {
  content:"";
  position: absolute;
  background-color:#613A17;
  width:5px;
  height:15px;
  left: 25px;
  top:115px;
}
.paw1 {
  position:absolute;
  border-radius:50%;
  background-color: #fff;
  width:40px;
  height:40px;
  border: 5px solid #F1C40F;
  overflow:hidden;
  left:370px;
  top:-30px;
  z-index:25;
  
}
.paw1:after {
  content:"";
  position: absolute;
  background-color:#613A17;
  width:5px;
  height:25px;
  left: 10px;
  top:22px;
}
.paw1:before {
  content:"";
  position: absolute;
  background-color:#613A17;
  width:5px;
  height:25px;
  left: 25px;
  top:22px;
}
.tail {
  position:absolute;
  background-color: #F1C40F;
  width: 35px;
  height: 180px;
  border-radius: 0 0 100px 100px;
  left:30px;
  top:-20px;
  transform-origin: top center;
	animation: swing 4s ease infinite;
}
.ear {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid #F4D03F;
  left: 230px;
  top:-140px;
  z-index:30;
  transform:rotate(-25deg);
}
.ear:after {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 40px solid #F1948A;
  left: -15px;
  top:10px;
  
}
.ear1 {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid #F4D03F;
  left: 325px;
  top:-140px;
  z-index:30;
  transform:rotate(25deg);
}
  
.ear1:after {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 40px solid #F1948A;
  left: -15px;
  top:10px;
  
}
.face {
  position:absolute;
  width: 75px;
  height: 50px;
  background-color: #FCF3CF;
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  border: 10px solid #FCF3CF;
  border-bottom: 0;
  left: 260px;
  top: -60px;
  z-index:25;
}
.face:after {
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background-color:#F9E79F;
  border-radius:100px 100px 0 0;
  left:25px;
  top:-10px;
}
.face:before {
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background-color:#F5B7B1;
  border-radius:0 0 100px 100px;
  left:25px;
  top:0;
}
.eyes {
  position:absolute;
  border-radius: 50%;
  box-shadow:inset 0 -5px 0 black;
  width: 30px;
  height:30px;
  left:330px;
  top:-80px;
  z-index:30;
  
}
.eyes:after {
  content:"";
  position:absolute;
  border-radius: 50%;
  box-shadow:inset 0 -5px 0 black;
  width: 30px;
  height:30px;
  left:-70px;
  top:0;
 
}
.mouth {
  position:absolute;
  z-index:30;
  border-radius:50%;
  background-color:black;
  width:20px;
  height:20px;
  top:-28px;
  left:300px;
  animation: scale 1s infinite ease-in-out alternate;
}

Add the desktop:

.screen2 {
  position: absolute;
  background-color: #FEF9E7;
  width: 150px;
  height: 10px;
  border: 5px solid black;
  border-radius:30px;
  top:-160px;
  left: 250px;
  overflow:hidden;
  transform: skew(-20deg);
}
.screen2:after {
  content:"";
  position: absolute;
  height:10px;
  width: 20px;
  left: 20px;
  background-color: #52C2D3;
  transform: skew(-20deg);
  animation: 3s move linear infinite;
}
.screen2:before {
  content:"";
  position: absolute;
  left: 80px;
  height:10px;
  width: 20px;
  background-color: #D35252;
  transform: skew(-20deg);
  animation: 3.5s move linear infinite;
}
.deleting {
  position: absolute;
  top: -240px;
  left: 250px;
  color: red;
  animation: flash 500ms ease infinite alternate;
}
CSS Sleeping Cat

Step3.

Add CSS Animation

For the sleeping cat (mouth and tail):

@keyframes scale {
  from { transform: scale(0.8); }
  to { transform: scale(1); }
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

For the desktop (caption and progress bar):

@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}
 @keyframes move {  
    100% {left: -160px}
    from {left: -80px;}
     to {left: 180px;}
} 

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

Enjoy coding!

Categories
CSS HTML Web development

Thinking about traveling? CSS Plane Animation

Paper plane gif

Thinking about travelling? Me…yes. Unfortunately, we need to wait to travel again.

*animation opened in the Safari browser.
To see the live output of the animation click here.

To create CSS Plane Animation follow the steps below:

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

Step1.

Add HTML

<div class="container">
  <div class="clouds">
    <div class="cloud"></div>
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  <div class="plane">
    <div class="body">
      <div class="pollution"></div>
      </div>
    <div class="window">
      <div class="window1"></div>
  </div>
</div>
  <div class="mountains">
    <div class="mountain1"></div>
    <div class="mountain2"></div>
    <div class="mountain3"></div>
    <div class="mountain4"></div>
    <div class="mountain5"></div>
    <div class="mountain6"></div>
    <div class="mountain7"></div>
    <div class="mountain8"></div>
  </div>
</div> 

Step2.

Add CSS

Set the colour of the background:

body {
  background-color: #bae6f5;
  background-size: 100vh;
}

Style the container and the plane:

.container {
  position: relative;
  
}
.plane {
  position: relative;
  left: 40%;
  top: 200px;
  animation: move 9s linear infinite;
}
.body {
  position: absolute;
  background-color: #fff;
  width: 250px;
  height: 50px;
  border-radius: 20px 50px 50px 50px;
  box-shadow:inset -15px -15px 1px #157ea1;
}
.body:after {
  content:"";
  position: absolute;
  width: 60px;
  height: 150px;
  border-radius: 30px 30px 30px 30px;
  background-color: #fff;
  transform: skew(50deg);
  border-racius: 30px;
  top:-50px;
  left: 110px;
  
}
.body:before {
  position: absolute;
  content:"";
  background-color:#fff;
  width: 25px;
  height: 40px;
  top:-20px;
  left: 0;
  border-radius: 20px;
  
}

.window {
  position: absolute;
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  top: 5px;
  left: 170px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window:after {
  position: absolute; 
  content:"";
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -50px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  
}
.window:before {
  content:"";
  position:absolute; 
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -95px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window1 {
  position:absolute; 
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -140px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window1:after { 
  content:"";
  position: absolute;
  background-color: #3bbfeb;
  width: 25px;
  height: 20px;
  border: 4px solid #d2d5d6;
  left: 180px;
  top: -5px;
  transform:skew(20deg); 
  border-radius: 20px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
 }

Add coluds:

.clouds {
  position: absolute;
  left: 175px;
}
 .cloud {
  position: absolute;
  top: 120px;
  left: 200px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 7;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 12s linear alternate infinite;   
  }
.cloud::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 20px;
  }

.cloud1 {
  position: absolute;
  top: 200px;
  left: 300px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 8;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 10s linear alternate-reverse infinite;
}
.cloud1::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 25px;
  }
.cloud2 {
  position: absolute;
  top: 120px;
  left: 1000px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 7;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 12s linear alternate infinite;   
  }
.cloud2::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 20px;
  }

.cloud3 {
  position: absolute;
  top: 200px;
  left: 1300px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 8;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 10s linear alternate-reverse infinite;
}
.cloud3::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 25px;
  }

Add mountains:

.mountains {
  position: absolute;
}
.mountain1 {
  position: absolute;
  left: 90px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #32a852;
  z-index: 1;
  opacity: 0.6;
}
.mountain1:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain1:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain2 {
  position: absolute;
  top: 350px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain2:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain2:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain3 {
  position: absolute;
  left: 490px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #32a852;
  z-index: 1;
  opacity: 0.6;
}
.mountain3:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain3:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain4 {
  position: absolute;
  top: 350px;
  left: 650px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain4:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain4:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain5 {
  position: absolute;
  left: 790px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #918c76;
  z-index: -1;
  opacity: 0.6;
}
.mountain5:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain5:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:2;
  top: 50px;
  left:-40px; 
}
.mountain6 {
  position: absolute;
  top: 350px;
  left: 1250px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain6:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain6:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain7 {
  position: absolute;
  left: 1790px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #918c76;
  z-index: -1;
  opacity: 0.6;
}
.mountain7:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain7:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:2;
  top: 50px;
  left:-40px; 
}
.mountain8 {
  position: absolute;
  top: 350px;
  left: 1550px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain8:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain8:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}

Airplane pollution:

.pollution {
  position: absolute;
  background-color: #fff;
  top: 30px;
  left: -55px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 1s linear infinite;
  z-index:4; 
}
.pollution:after {
  content:"";
  position: absolute;
  background-color: #fff;
  top: 10px;
  left: -65px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 2s linear infinite;
  z-index:4; 
}
.pollution:before {
  content:"";
  position: absolute;
  background-color: #fff;
  top: -15px;
  left: -85px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 3s linear infinite;
  z-index:4; 
}

Step3.

Add CSS Animation

To make the plane move:

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

For clouds:

@keyframes cloud {
  100% {
    transform: translateX(95px);
  }
}

For airplane pollution:

@keyframes steam { 
    20% {opacity: 0.6;}
    35% {left: 100px opacity: 0.6;}
    70% {left: 70px  opacity: 0;} 
  }

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

Enjoy coding!

Categories
CSS HTML Web development

CSS Background Change Animation – Day & Night

CSS Night & Day

Hello! To change the element/ background colour we can use the CSS Animation.

The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: example;
  animation-duration: 5s;
  border-radius: 50%;
}

@keyframes example {
  0%   {background-color: green;}
  25%  {background-color: blue;}
  50%  {background-color: yellow;}
  100% {background-color: red;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Output:

Now when you know the base of the background change animation we can go further.

In the animation below I used exactly the same rule of the changing background.

*animation opened in the Safari 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="window">
    <div class="frame"></div>
    <div class="windowsill"></div>
    <div class="holder"></div>
    <div class="curtain"></div>
  </div>
  <div class="cat">
    <div class="tail"></div>
    <div class="ears"></div>
  </div>
  <div class="sun"></div>
  <div class="moon"></div>
  </div>

Step2.

Add CSS

Set the size and the color of the background:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #53CABD;
  animation: background 10s linear infinite alternate;
}

Set the position of the container and the window:

.container {
  top:-200px;
  left:-150px;
  position: relative;
}
.window {
  position: relative;
}

Style the frame, window sill, and curtains:

.frame {
  position: absolute; 
  width: 450px;
  height: 250px;
  background-color: #41BEDD;
  border: 10px solid #311C1C;
  border-radius: 5px;
  box-shadow:inset -15px -15px 0 rgba(0,0,0,0.07);
  left:-80px;
  animation: frame 10s linear infinite alternate;
  
}
.frame:after {
  content:"";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #BDBDBD;
  top: -50px;
  left: 515px;
}
.windowsill {
  position: absolute;
  width: 580px;
  height: 30px;
  background-color: #311C1C;
  top: 265px;
  left:-125px;
  border-radius: 50px;
  box-shadow: 15px 15px rgba(0,0,0,0.07);
  
}
.windowsill:after {
  content:"";
  position: absolute;
  width: 600px;
  height: 10px;
  background-color: #BDBDBD;
  top:-300px;
  left: -20px;
  
}
.windowsill:before {
  content:"";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #BDBDBD;
  top: -305px;
  left: -35px;
  
}
.holder {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 300px solid #962c48;
  border-right: 200px solid transparent;
  left: -120px;
  top:-25px;

}
.holder:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid #962c48;
  border-right: 50px solid transparent;
}
.holder:before {
  content:"";
  position: absolute;
  background-color: #962c48;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  left:-5px;
  top:-5px;
}
.curtain {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 300px solid #962c48;
  border-left: 200px solid transparent;
  top:-25px;
  left:240px;
}
.curtain:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid #962c48;
  border-left: 50px solid transparent;
  left:-50px;
}
.curtain:before {
  content:"";
  position: absolute;
  background-color: #962c48;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  left:-10px;
  top:-5px;
}

Style a cat:

.cat {
  position: absolute;
  z-index:10;
}
.tail {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius:50%;
  box-shadow:inset 10px -5px 0 black;
  top: 210px;
  left:80px;
  transform: rotate(5deg);
}
.tail:after {
  content:"";
  position: absolute;
  background-color: black;
  width: 70px;
  height: 80px;
  top: -20px;
  left:20px;
  border-radius:50%;
  box-shadow: 10px -15px 0 rgba(0,0,0,0.07);
}
.tail:before {
  content:"";
  position: absolute;
  background-color: black;
  box-shadow: 5px -15px 0 rgba(0,0,0,0.07);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top:-50px;
  left: 30px;
}
.ears {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black; 
  top:152px;
  left:145px;
  transform: rotate(20deg);
  
}
.ears:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black; 
  top:12px;
  left:-40px;
  transform: rotate(-40deg);
}

Add Sun and Moon:

.sun {
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 50px;
  height:50px;
  left:130px;  
  top: 70px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  animation: sun 10s alternate infinite;
  
}
.sun:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 100px;
  height:100px;
  opacity:0.5;
  top: -23px;
  left:-25px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  
}
.sun:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 150px;
  height:150px;
  opacity:0.3;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left:-50px;
  top:-50px;
}
.moon {
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height:50px;
  left:130px;  
  top: 70px;
  box-shadow:inset -15px -15px 0 #c7ebde;
  animation: fade-in 10s infinite alternate;
}
.moon:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #ceede2;
  width: 100px;
  height:100px;
  opacity:0.5;
  top: -23px;
  left:-25px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  animation-delay: 10s;
  animation: moon 10s alternate infinite;
  
}
.moon:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #ceede2;
  width: 150px;
  height:150px;
  opacity:0.3;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left:-50px;
  top:-50px;
  animation-delay: 10s;
  animation: moon 10s alternate infinite;
}

Step3.

Add CSS Animation

For the background:

@keyframes background {
  0% {
    background: #53CABD;
  }
  100% {
    background: rgba(3, 43, 62, .94);
  }
}

For the window:

@keyframes frame {
  0% {
    background: #41BEDD;
  }
  100% {
    background: #23355e;
  }
}

For Sun:

@keyframes sun {
  0 {transform: scale(0.8) rotate(360deg);opacity:1;}
  50% {opacity:1;}
  100% {transform: scale(1.1) rotate(360deg);opacity:0;}
}

and for the Moon:

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
    50% {
    opacity: 0.3;
    transform: translateY(0);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}

@keyframes moon {
  0 {transform: scale(0.3) rotate(360deg);opacity:0;}
  50% {opacity:0.2;}
  100% {transform: scale(1.1) rotate(360deg);opacity:0.1;}
}

To see the live output of the animation visit lenastanley.com.

Enjoy coding!

Categories
CSS Web development

Happy Easter! /CSS Easter Animation

Happy Easter everyone. Stay safe, and keep well!

Happy Easter Gif

To create the Easter animation follow the steps below.

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Add HTML

<div class="container">
  <div class="bunny">
    <div class="face"></div>
    <div class="smile"></div>
    <div class="nose"></div>
    <div class="teeth"></div>
    <div class="ears"></div>
    
  </div>
  <div class="bunny2">
    <div class="face2"></div>
    <div class="smile"></div>
    <div class="nose"></div>
    <div class="teeth"></div>
     <div class="ears2"></div>
</div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the background colour, and the position of the container.

body {
  background-color: #DAF7A6;
}

.container {
  position: relative;
  left: 40%;  
  top: 150px;
}

Style bunnies:

body {
  background-color: #DAF7A6;
}

.container {
  position: relative;
  left: 40%;  
  top: 150px;
}

.bunny {
  position: relative; 
  animation: jump 2s ease infinite;
}
.face {
      position: absolute;
      display: block;
      width: 160px;
      height: 220px;
      background-color: #F1948A;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  z-index:1;
    }

.face:after {
  position: absolute;
  content:"";
  background-color: #000;
  border-radius:50%;
  width: 15px;
  height: 20px;
  top: 35px;
  left: 50px;
}
.face:before {
  position: absolute;
  content:"";
  background-color: #000;
  border-radius:50%;
  width: 15px;
  height: 20px;
  top: 35px;
  left: 90px;
}



.bunny2 {
  position: relative;
  left: 170px;
  animation: jump 2.5s ease infinite;
}
.face2 {
      position: absolute;
      display: block;
      width: 160px;
      height: 220px;
      background-color: #1ABC9C;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
    }

.face2:after {
  position: absolute;
  content:"";
  background-color: #000;
  border-radius:50%;
  width: 15px;
  height: 20px;
  top: 35px;
  left: 50px;
}
.face2:before {
  position: absolute;
  content:"";
  background-color: #000;
  border-radius:50%;
  width: 15px;
  height: 20px;
  top: 35px;
  left: 90px;
}

.smile {
  position: absolute;
  background-color: transparent;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  box-shadow:inset 3px -3px 0 #000;
  transform: rotate(-40deg);
  top:50px;
  left: 53px;
  z-index:3;
}
.smile:after {
  content:"";
  position: absolute;
  width:10px;
  height:3px;
  background-color: #000;
  left:2px;
  top:5px;
  
}
.smile:before {
  content:"";
  position: absolute;
  width:10px;
  height:3px;
  background-color: #000;
  left:39px;
  top:40px;
  transform: rotate(90deg);
  
}
.nose {
  position: absolute;
  width: 3px;
  height: 25px;
  background-color: #000;
  top: 72px;
  left: 75px;
  z-index:5;
}
.nose:after {
  content:"";
  position: absolute;
  width: 25px;
  height: 15px;
  background-color: #C0392B;
  border-radius: 40px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  left:-10px;
  
}
.teeth {
  position: absolute;
  background-color: #fff;
  width: 10px;
  height: 15px;
  border-radius: 5px 5px 20px 20px;
  top:96px;
  left: 70px;
  z-index:2;
  
}
.teeth:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width: 10px;
  height: 15px;
  border-radius: 5px 5px 20px 20px;  
  left: 8px;
  z-index:2;
  
}
.ears {
  position: absolute;
  width: 40px;
  height: 120px;
  background-color: #F1948A;
  top:-105px;
  border-radius: 60% 60% 40% 40% / 50% 50% 60% 50% ;
  transform: rotate(20deg);
  left: 100px;
  opacity:0.7;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.ears:after {
  content:"";
  position: absolute;
  width: 40px;
  height: 120px;
  background-color: #F1948A;
  top:-105px;
  border-radius: 60% 60% 40% 40% / 50% 50% 60% 50% ;
  transform: rotate(-40deg);
  left: -70px;
  top:25px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  
}
.ears2 {
  position: absolute;
  box-shadow:inset 5px 5px 0 rgba(0,0,0,0.07);
  width: 40px;
  height: 120px;
  background-color: #1ABC9C;
  border-radius: 60% 60% 40% 40% / 50% 50% 60% 50% ;
  opacity:0.7;
  z-index:-1;
  top:-100px;
  left:20px;
  transform: rotate(-20deg);
  
}
.ears2:after {
  content:"";
  position: absolute;
  width: 38px;
  height: 90px;
  background-color: #1ABC9C;
  left: 65px;
  transform: rotate(40deg);
  top: 60px;
  border-radius: 50%;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  
}
.ears2:before {
  content:"";
  position: absolute;
  width: 38px;
  height: 90px;
  background-color: #1ABC9C;
  left: 92px;
  transform: rotate(-40deg);
  top: 70px;
  border-radius: 50%;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  z-index:1;
  transform-origin: top center;
	animation: swing 2s ease infinite;
}

Add shadow:

.shadow {
  position: absolute;
  width: 350px;
  height: 50px;
  background-color:#000;
  top: 200px;
  border-radius: 50%;
  opacity: 0.5;
  left:-5px;
  z-index:-2;
  animation: scale 1.5s infinite;
}

Step3.

Add CSS Animation

For the shadow:

@keyframes scale {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

For the bunny’s ear:

@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

To make bunnies jump:

@keyframes jump {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

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

Enjoy coding!

Categories
CSS JavaScript Web development

JavaScript onmousedown event/ Astronaut

spacecraft

Today, I’ll show you an example of CSS & JavaScript Animation using the JavaScript onmousedown event (addEventListener() method).

The JavaScript onmousedown event occurs when a user presses a mouse button over an element and, as you can see animation below- by pressing on the Astronaut we can move him to the place on the desktop which we like.

*animation opened in Codepen.
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
  4. Add JavaScript

Step1.

Add HTML

<div class="container">
  <div class="astronaut">
    <div class="head"></div>
    <div class="uniform"></div>
    <div class="legs"></div>
    <div class="arm"></div>
    <div class="arm1"></div>
  </div>
  <div class="stars">
    <div class="star1"></div>
    <div class="star2"></div>
    <div class="star3"></div>
    <div class="star4"></div>
    <div class="star5"></div>
    <div class="star6"></div>
    <div class="star7"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour of the background:

body {
background: rgb(20,2,10);
background: linear-gradient(90deg, rgba(20,2,10,1) 0%, rgba(6,37,73,1) 76%, rgba(6,37,73,1) 83%, rgba(12,15,19,1) 95%);
margin: 100px;

}

Create the container:

.container {
  position: relative;
  left: 35%;
  
}

Style the Astronaut:

.astronaut {
  position: relative; 
  display: block; 
  animation: space 6s linear infinite alternate;
}
.head {
  position: absolute;
  border-radius: 50%;
  border: 10px solid #fff;
  width: 100px;
  height: 100px;
  background: rgb(121,121,121);
  background: radial-gradient(circle, rgba(121,121,121,1) 17%, rgba(6,37,73,1) 76%, rgba(6,37,73,1) 83%, rgba(20,2,10,1) 100%);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.07); 
}
.head:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width: 10px;
  height: 30px;
  left:-19px;
  top: 35px;
  border-radius: 20px;
}
.head:before {
  content:"";
  position: absolute;
  background-color: #fff;
  width: 10px;
  height: 30px;
  left:109px;
  top: 35px;
  border-radius: 20px;
}
.uniform {
  position: absolute;
  background-color: #fff;
  width: 120px;
  height: 150px;
  top: 100px;
  border-radius: 20px 20px 50px 50px;
  box-shadow:inset -10px -15px 0 rgba(0,0,0,0.07);
  z-index:-1;
}
.uniform:after {
  content:"";
  background-color:rgba(0,0,0,0.07);
  width: 70px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 20px;
  border-radius: 10px;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,0.07);
}
.uniform:before {
  content:"";
  position: absolute;
  background-color: #D92A5F;
  width: 70px;
  height: 20px;
  top: 45px;
  left: 20px;
  box-shadow: 0 2px 4px #818181; 
}
.legs {
  position: absolute;
  background-color: #fff;
  width: 55px;
  height: 110px;
  border-radius: 20px 20px 50px 50px;
  box-shadow:inset -5px -15px 0 rgba(0,0,0,0.07);
  top: 200px;
  z-index:-3;
}
.legs:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width: 55px;
  height: 110px;
  border-radius: 20px 20px 50px 50px;
  box-shadow:inset -5px -15px 0 rgba(0,0,0,0.07);
  z-index:-3;
  left:65px;
}
.arm {
  position: absolute;
  background-color: #fff;
  width: 45px;
  height: 110px;
  border-radius: 20px 20px 50px 50px;
  box-shadow:inset -5px -15px 0 rgba(0,0,0,0.07);
  top:100px;
  left: -40px;
  transform: rotate(50deg);
  z-index:-3;
}
.arm1 {
  position: absolute;
  background-color: #fff;
  width: 45px;
  height: 110px;
  border-radius: 20px 20px 50px 50px;
  box-shadow:inset -5px -15px 0 rgba(0,0,0,0.07);
  top:100px;
  left: 120px;
  transform: rotate(-50deg);
  z-index:-3;
}
.stars {
  position: absolute;
  z-index:-5;
  
}
.star1 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  animation: flash .7s ease infinite alternate;
}
.star1:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .5s ease infinite alternate;
}
.star1:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .8s ease infinite alternate;
}
.star2 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 350px;
  top: 100px;
  animation: flash .7s ease infinite alternate;
}
.star2:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .5s ease infinite alternate;
}
.star2:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .7s ease infinite alternate;
}
.star3 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -350px;
  top: 80px;
  animation: flash .6s ease infinite alternate;
}
.star3:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .7s ease infinite alternate;
}
.star3:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .9s ease infinite alternate;
}
.star4 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 550px;
  top: 180px;
  animation: flash .8s ease infinite alternate;
}
.star4:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .7s ease infinite alternate;
}
.star4:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .6s ease infinite alternate;
}
.star5 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 650px;
  top: 50px;
  animation: flash .4s ease infinite alternate;
}
.star5:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .9s ease infinite alternate;
}
.star5:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .7s ease infinite alternate;
}
.star6 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 50px;
  top: 200px;
  animation: flash .8s ease infinite alternate;
}
.star6:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .7s ease infinite alternate;
}
.star6:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .4s ease infinite alternate;
}
.star7 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 850px;
  top: 180px;
  animation: flash .9s ease infinite alternate;
}
.star7:after {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: 200px;
  top: 50px;
  animation: flash .8s ease infinite alternate;
}
.star7:before {
  content:"";
  position:absolute;
  width: 5px;
  height: 5px;
  background-color: #FFFDB8;
  border-radius:50%;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left: -200px;
  top: 150px;
  animation: flash .5s ease infinite alternate;
}

Step3.

Add CSS Animation

To make an astronaut fly in the space:

@keyframes space {
	0%{transform:translateY(-50px) rotate(-12deg);}
	100%{ transform:translateY(-100px) rotate(10deg)};
}

To make stars flash:

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

Step4.

Add JavaScript

To make an astronaut move:

var elem = document.querySelector('.container'), 
div = document.querySelector('.astronaut'), 
         x = 0, 
 
         y = 0, 
 
         mousedown = false; 
 
 div.addEventListener('mousedown', function (e) {  
     
     mousedown = true; 
     
     x = div.offsetLeft - e.clientX; 

     y = div.offsetTop - e.clientY; 

 }, true); 

 
 
 div.addEventListener('mouseup', function (e) { 

     

     mousedown = false; 
 
 }, true); 


 elem.addEventListener('mousemove', function (e) { 

     
     if (mousedown) { 

        
         div.style.left = e.clientX + x + 'px'; 
         div.style.top = e.clientY + y + 'px'; 
     }  
 }, true); 

To see the live output of the animation visit: lenastanley.com.

Enjoy coding!

Categories
CSS JavaScript Web development

Digital Clock – CSS & JavaScript Animation

Some time ago I created the Analog Clock CSS & JavaScript tutorial (to learn how to create Analog Clock click here), however, not everyone is using the analog clock, so today I’ve prepared a tutorial about the second type of clock – digital clock.

Digital Clock
Do you like this image? Check more images in the store.
*animation opened in the Safari 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 JavaScript (to set the current time)

Step1

Add HTML

Project your Clock:

<div class="container">
  <div class="digitalclock">
    <div class="front"></div>
    <div class="feet"></div>
    <div class="shadow"></div>
  </div>
   <div id="DigitalClock" class="time" onload="showTime()"></div>
</div>
             

Step2.

Add CSS

Set the colour and the size of your background:

body {
  background-color:#138D75;
  display: flex;
  height: 100vh;  
  align-items: center;
  justify-content: center;
  overflow: hidden;
 }

Style you Clock:

.container {
    position: relative; 
  
}
.digitalclock {
  top:-150px;
  left:-100px;
  position: relative; 
}

.front {
  position: absolute;
  width: 230px;
  height:50px; 
  background-color: #C0392B;
  border-radius: 100px;
  box-shadow:inset 5px 5px 0 rgba(0,0,0,0.07);
  
}
.front:after {
  content:"";
  position: absolute;
  background-color: #CACFD2;
  width:450px;
  height:200px;
  top:20px;
  left:-115px;
  border-radius:50px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  
}
.front:before {
  content:"";
  position: absolute;
  background-color:#1C2833;
  width:380px;
  height:150px;
  z-index:1;
  top:45px;
  left:-80px;
  border-radius:30px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.feet {
  position:absolute;
  width:50px;height:70px;
  background-color:#424949;
  border-radius:20px;
  top:165px;
  left:-60px;
  z-index:-1;
}
.feet:after {
  content:"";
  position:absolute;
  width:50px;height:70px;
  background-color:#424949;
  border-radius:20px;
  top:0;
  left:280px;
}
.time {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    color: #E67E22;
    font-size: 100px;
    font-family: Impact, Charcoal, sans-serif;
    letter-spacing: 22px;
    z-index:10;
    top:-30px;
    left:15px;
    text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.7),
                -3px 10px 12px rgba(0, 0, 0, 0.7);

}
.shadow {
  position:absolute;
  width:550px;
  height:100px;
  background-color: rgba(0,0,0,0.09);
  border-radius:50%;
  top:200px;
  z-index:-2;
  left:-165px;
}

add the time to the clock:

.time {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    color: #E67E22;
    font-size: 100px;
    font-family: Impact, Charcoal, sans-serif;
    letter-spacing: 22px;
    z-index:10;
    top:-30px;
    left:15px;
    text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.7),
                -3px 10px 12px rgba(0, 0, 0, 0.7);

}

Step3.

Add JavaScript

Set the current time:

function showTime(){
    var date = new Date();
    var h = date.getHours(); 
    var m = date.getMinutes(); 
    
    
    
    if(h == 0){
        h = 12;
    }
    
    if(h > 12){
        h = h - 12;
        
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    
    
    var time = h + ":" + m;
    document.getElementById("DigitalClock").innerText = time;
    document.getElementById("DigitalClock").textContent = time;
    
    setTimeout(showTime, 1000);
    
}

showTime();

To see the live output of the animation visit: lenastanley.com.

To see more examples of digital clock animation check also my Home Office animation and JavaScript – Time and date.

Enjoy coding!