Categories
Web development

CSS Fortune Wheel/ Conic-gradient/ Random Result


CSS & JavaScript Fortune Wheel

To learn how to create the CSS Fortune Wheel follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="fortune-wheel">
  <div id="wheel" class="wheel">
    <div class="ring">
      <div class="label"><span>1</span></div>
      <div class="label"><span>2</span></div>
      <div class="label"><span>3</span></div>
      <div class="label"><span>4</span></div>
      <div class="label"><span>5</span></div>
      <div class="label"><span>6</span></div>
      <div class="label"><span>7</span></div>
      <div class="label"><span>8</span></div>
      <div class="label"><span>9</span></div>
      <div class="label"><span>10</span></div>
      <div class="label"><span>11</span></div>
      <div class="label"><span>12</span></div>
    </div>
  </div>
  <div class="back-wheel"></div>
  <div class="holder"></div>
  <div class="shadow"></div>
  <div class="arrow"></div>
  <button id="spin" class="spin">SPIN</button>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: repeating-conic-gradient(#ffdd00 0 18deg, #ffc300 0 36deg);}

.fortune-wheel, .wheel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

Style the wheel:

.wheel {
  width:250px;
  height:250px;
  border-radius:50%;
  background-image:
 conic-gradient(
      #00acc3 0deg 30deg, #79af3e 30deg 60deg, #fd8b00 60deg 90deg, #e53935 90deg 120deg, #465a65 120deg 150deg, #00abc1 150deg 180deg, #7db343 180deg 210deg, #f98b00 210deg 240deg, #e53935 240deg 270deg, #00acc3 270deg 300deg, #7db343 300deg 330deg, #fd8b00 330deg 360deg);    
    }    

.back-wheel, .back-wheel:after {
  position: absolute;
  border-radius: 50%;
}

.back-wheel {
  width: 270px;  height: 270px;
  background-color: #333;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
  z-index:-1;
}

.back-wheel:after {
  content:"";
  border: 5px dotted yellow;
  width: 260px;
  height: 260px;
  animation: light .5s linear infinite;
}

@keyframes light {
  0% {filter: hue-rotate(0);}
  50% {filter: hue-rotate(130deg);}
  100% {filter: hue-rotate(0);}
}
.holder {
  position: absolute;
  background-color: #333;
  width:100px;
  height: 100px;
  overflow: hidden;
  z-index:-2;
  top:220px;
  left:32%;
}

.holder:before {
  content:"";
  position: absolute;
  width: 270px;
  height: 270px;
  background-color: rgba(0,0,0,.4);
  top:-218px;
  left:-85%;
  border-radius:50%;
}

.shadow {
  position: absolute;
  width:250px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.3);
  top:320px;
}

.shadow:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:200px;
  height: 30px;
  border-radius: 100px 100px 0 0;
  left:30px;
  top:-15px;
  box-shadow: inset 0 -10px rgba(0,0,0,.3);
}

.shadow:after {
  content:"";
  position: absolute;
  width:30px;
  height: 30px;
  background-color: yellow;
  border: 5px solid #333;
  border-radius: 50%;
  box-shadow:inset -5px -5px rgba(0,0,0,.2);
  top:-215px;
  left:105px;
}

.arrow, .arrow:before {
  position: absolute;
  border-style: solid;
  width:0;
  height:0;
}

.arrow {
  border-color: #333 transparent transparent transparent;
  border-width: 50px 20px 0 20px;
  top:-15px;
}

.arrow:before {
  content:"";
  border-color: #9e2a2b transparent transparent transparent;
  border-width: 38px 13px 0 13px;
  top:-46px;
  left:-13px;
}
CSS Fortune Wheel

Add the numbers:

.ring {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 100%;
  transform: rotate(-15deg);
}

.label {
  top: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-origin: 50% 0;
  position: absolute;
  //transform:rotate(0deg) translate(0, -50%);
  font-size: 20px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.label span {
  display: inline-block;
  margin: 0 auto;
  width: 70px;
  height: 70px;
  line-height: 70px;
}

.label:nth-child(1) {
  transform: rotate(0deg) translate(0, -50%);
  //transform: rotate(360deg) translate(0, -50%);
}

.label:nth-child(2) {
  transform: rotate(30deg) translate(0, -50%);
}

.label:nth-child(3) {
  transform: rotate(60deg) translate(0, -50%);
}

.label:nth-child(4) {
  transform: rotate(90deg) translate(0, -50%);
}

.label:nth-child(5) {
  transform: rotate(120deg) translate(0, -50%);
}

.label:nth-child(6) {
  transform: rotate(150deg) translate(0, -50%);
}

.label:nth-child(7) {
  transform: rotate(180deg) translate(0, -50%);
}

.label:nth-child(8) {
  transform: rotate(210deg) translate(0, -50%);
}

.label:nth-child(9) {
  transform: rotate(240deg) translate(0, -50%);
}

.label:nth-child(10) {
  transform: rotate(270deg) translate(0, -50%);
}

.label:nth-child(11) {
  transform: rotate(300deg) translate(0, -50%);
}

.label:nth-child(12) {
  transform: rotate(330deg) translate(0, -50%);
}

Style and animate the button:

.spin {
  position: absolute;
  top:-80px;
  width: 150px;
  height:50px;
  background-color: transparent;
  border: 5px solid red;
  border-radius: 50px;
  color: red;
  font-weight:900;
  font-size: 30px;
  transition: .1s;
  cursor: pointer;
}

.spin:hover {
  background-color: red;
  color: yellow;
}

.spin:active {
  width:200px;
  color: #affc41;
}
Spin the wheel

Step3.

Add JavaScript

let wheel = document.querySelector("#wheel");
let button = document.querySelector("#spin");

button.addEventListener("click", spinWheel);

function spinWheel(evt) {
  let spin = Math.round(Math.random() * (2220));
  wheel.style.setProperty("transition", "ease 1s");
  wheel.style.transform = 'rotate(' + spin + 'deg)';
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Roll the dice!

CSS & JavaScript Memory Game

Heads or Tails? Toss a Coin!

Categories
Web development

CSS Record Player (Play on click/ control the volume of the audio)


CSS Record Player (Play on click/ control the volume of audio)

To learn how to create the Record Player (Play on click/ control the volume of the audio) with CSS and JavaScript follow the steps below and watch the video tutorial.

Demo:

*to see the animation and play the audio on the website click here.

Step1.

Add HTML

Use the <audio> and <source> tags to link the audio/ music.

<div class="record-player">
  <input type="checkbox" id="headshell">
  <label class="headshell" for="headshell"></label>
  <audio id="player">
  <source src="https://lenadesign.org/wp-content/uploads/2022/03/Sunshine-Telecasted.mp3" type="audio/mpeg"/>
</audio>
  <input type="range" max="1" min="0" step="0.1" id="volume-control" onchange="audioVolume(this.value)">
  <div class="plinth"></div>
  <div class="platter"></div>
  <div class="vinyl"></div>
  <div class="top-circle"></div>
</div>

Step2.

Add CSS

Set the position and colour of the background and elements:

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

.record-player {
  position: relative;
}

Style the record player:

.plinth {
  position: relative;
  background-color: #760d19;
  width:400px;
  height: 300px;
  box-shadow: 3px 3px 5px rgba(0,0,0,.5);
  border-radius: 20px;
}

.plinth:before {
  content:"";
  position: absolute;
  width:395px;
  height: 295px;
  background-color: #c4222f;
  border-radius: 20px;
}

.plinth:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #2c2424;
  width: 30px;
  height: 30px;
  top:20px;
  left:20px;
  box-shadow: 0 230px #2c2424;
}
.platter {
  position: absolute;
  border-radius: 50%;
  width:270px;
  height: 270px;
  background-color: #d6d6d6;
  z-index:2;
  top:15px;
  left:15px;
}

.platter:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #d6d6d6;
  width:40px;
  height:40px;
  border: 10px solid #2c2424;
  left:280px;
  top:30px;
}

.vinyl {
  position: absolute;
  background-image: repeating-radial-gradient(#181312, #181312 10%, #2c2424 15%);
  border-radius:50%;
  width:250px;
  height:250px;
  z-index:5;
  top:25px;
  left:25px;
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

.vinyl:before, .vinyl:after {
  content:"";
  position: absolute;
  border-style: solid;
  border-color: rgba(255,255,255,.1) transparent transparent transparent;
  border-width: 130px 50px 0 125px;
}

.vinyl:after {
  top:170px;
  left:60px;
  transform: rotate(-65deg);
}

.top-circle {
  position: absolute;
  z-index:10;
  width:70px;
  height: 70px;
  background-color: #7a101c;
  border-radius:50%;
  top:115px;
  left:115px;
}

.top-circle:before {
  content:"";
  position: absolute;
  border-radius:50%;
  width:15px;
  height:15px;
  background-color: #181312;
  top:28px;
  left:28px;
}

Style the input range slider:

input#volume-control {
  -webkit-appearance: none; 
  width: 100%; 
  background-color: transparent; 
}

input#volume-control:focus {
  outline: none; 
}

input#volume-control::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

input#volume-control {
  position: absolute;
  z-index:1;
  transform: rotate(-90deg) scale(.25);
  left:40%;
  top:70%;
}

input#volume-control::-webkit-slider-thumb {
   -webkit-appearance: none;
   cursor: pointer;
   width: 40px;
   height:70px;
   background-color: #333533;
   border: none;
   border-radius:2px;
   margin-top:-4px;
}

input#volume-control::-moz-range-thumb {
   cursor: pointer;
   width: 30px;
   height:70px;
   background-color: #333533;
   border: none;
   border-radius:2px;
}

input#volume-control::-ms-thumb {
  cursor: pointer;
   width: 30px;
   height:70px;
   background-color: #333533;
   border: none;
   border-radius:2px;
}

input#volume-control::-webkit-slider-runnable-track {
  background-color: #d6d6d6;
  border:none;
  margin:-30px; 
}

input#volume-control::-moz-range-track {
  background-color: #333533;
  border:30px solid black;
  outline:2px solid #d6d6d6;
}

Style and animate the headshell:

input#headshell {
  display: none;
}
.headshell {
  width: 30px;
  height: 140px;
  position: absolute;
  border-right: 10px solid #ffffff;
  border-bottom: 10px solid #ffffff;
  border-bottom-right-radius: 50px;
  z-index:15;
  left: 290px;
  top: 80px;
  cursor: pointer;
  transition: .3s;
  transform-origin: top;
}

.headshell:before, .headshell:after {
  content:"";
  position: absolute;
}

.headshell:before {
  background-color: black;
  width:20px;
  height:30px;
  top:-20px;
  left:25px;
}

.headshell:after {
  height:0;
  width:15px;
  border-top: 25px solid #b2aea6;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  top:133px;
  left:-20px;
  transform: rotate(90deg);
}

#headshell:checked + .headshell {
  transform: rotate(35deg);
}

@keyframes play  {
  to {transform: rotate(360deg);}
}

#headshell:checked ~ .vinyl {
  animation: play 2s linear infinite .3s;
}

Step3.

Add JavaScript

To play/ pause the audio on click:

let input = document.getElementById("headshell");
let audio = document.getElementById("player");

input.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    audio.currentTime = 0;
    input.innerHTML = "Pause";
  } else {
    audio.pause();
    input.innerHTML = "Play";
  }
});

To control the volume of the audio:

function audioVolume(amount) {
  let changevolume = document.getElementsByTagName("audio")[0];
  changevolume.volume = amount;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Animation

CSS Spooky House Animation

CSS Coffee Express Animation

Categories
Web development

CSS Music Box (play/ pause audio on click)


CSS Music Box (play/ pause audio on click)

To learn how to create the CSS Music Box follow the steps below.

Demo:

*to see the animation and listen to the audio on the website click here.

*music source: (free music) youtube audio library – Fur Elise (by Beethoven).

Step1.

Add HTML

Use the <audio> and <source> tags to link the audio/ music.

    <div class="music-box">
        <input type="checkbox" id="music">
        <label class="music" for="music"></label>
        <audio id="player">
  <source src="https://lenadesign.org/wp-content/uploads/2022/03/Fur-Elise-by-Beethoven-Beethoven.mp3" type="audio/mpeg"/>
</audio>
      <div class="box-inside">
        <div class="ballerina">
            <div class="head"></div>
            <div class="skirt"></div>
            <div class="legs"></div>
            <div class="right-arm"></div>
            <div class="left-arm"></div>
        </div>
      <div class="inner"></div>
      </div>
      <div class="box"></div>
      <div class="shadow"></div>
    </div>

Step2.

Add CSS

Set the position and colour of the background and elements:

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

.music-box {
  position: relative;
  top:-150px;
}

Style and animate the ballet dancer:

.ballerina {
            position: absolute;
            filter: drop-shadow(1px 0 rgba(0,0,0,.3));
            z-index:2;
            left: 3px;
            top:20px;
            animation: rotate 5s linear infinite reverse;
        }

.ballerina:before {
            content:"";
            position: absolute;
            width:7px;
            height:10px;
            border-radius: 10px 10px 0 0;
            background-color: #3c3f48; 
            top:125px;
            left:4px;
            box-shadow: 0 3px #333;
        }

@keyframes rotate {
            to {transform: rotateY(360deg);}
        }

.head {
            position: absolute;
            background-color: #f8f9fa;
            border-radius:50%;
            width: 20px;
            height: 23px;
        }

.head:before, .head:after {
            position: absolute;
            content:"";
            background-color: #f8f9fa;    
        }
        

.head:before {
            border-radius:50%;
            width:12px;
            height: 12px;
            top:-3px;
        }
        

.head:after {
            width:5px;
            height: 15px;
            top:12px;
            left:7px;
        }

.skirt {
            position: absolute;
            background-color: #f8f9fa;   
            width: 15px;
            height: 40px;
            border-radius: 50px;
            top:25px;
            left:2px;
        }
        

.skirt:before, .skirt:after {
            content:"";
            position: absolute;
            background-color: #f8f9fa; 
            border-radius:50%;
        }

.skirt:before {
            width:60px;
            height:10px;
            top:30px;
            left:-22px;
        }
        

.skirt:after {
            width: 10px;
            height:10px;
            top:33px;
            left:-24px;
            box-shadow: 9px 3px #f8f9fa, 18px 5px #f8f9fa, 27px 7px #f8f9fa, 36px 5px #f8f9fa, 45px 3px #f8f9fa, 54px 0 #f8f9fa, 18px 0 #f8f9fa, 27px 0 #f8f9fa, 24px 0 #f8f9fa, 33px 0 #f8f9fa, 42px 0 #f8f9fa;
        }

.legs {
            position: absolute;
            background-color: #f8f9fa; 
            width:5px;
            border-radius:20px;
            height: 60px;
            top:65px;
            left:5px;
        }

.legs:before, .legs:after {
            content:"";
            position: absolute;
            border-radius:20px;
            background-color: #f8f9fa; 
            width:5px;
        }

.legs:before {
            height:30px;
            transform: rotate(-55deg);
            top:-5px;
            left:15px;
        }

.legs:after {
            transform: rotate(55deg);
            height:30px;
            top: 10px;
            left:15px;
        }

.right-arm, .left-arm {
            position: absolute;
            background-color: #f8f9fa; 
            border-radius: 20px;
            width:5px;
            height: 30px;
            top:7px;
        }

.right-arm {
            left:22px;
            transform: rotate(50deg);
        }

.left-arm {
            transform: rotate(-50deg);
            left:-8px;
        }

.right-arm:before, .left-arm:before {
            content:"";
            position: absolute;
            background-color: #f8f9fa; 
            border-radius: 20px;
            width:5px;
            height:30px;
        }

.right-arm:before {
            transform: rotate(-90deg);
            top:-15px;
            left:-12px;
        }

.left-arm:before {
            transform: rotate(-90deg);
            top:-15px;
            left:12px;
}

Style the box:

.box-inside {
  position: absolute;
  transition: .5s;
  top:110px;
  left:-10px;
}

.inner {
  background-color: #1a232a;
  position: absolute;
  width:200px;
  height:40px;
  border-radius: 20px 20px 0 0;
  top:158px;
  left:-95px;
}

.box {
  position: absolute;
  width: 270px;
  background-color:#7c293d;
  height:140px;
  top:170px;
  left:-145px;
  z-index:3;
  border-radius: 0 0 5px 5px;
}

.box:before {
  content:"Music Box";
  position: absolute;
  font-size: 30px;
  font-family: "Brush Script MT", cursive;
  bottom: 10px;
  right:15px;
}
.music {
  position: absolute;
  width:270px;
  background-color: #8d334d;
  height: 50px;
  border-radius: 10px 10px 0 0;
  z-index:10;
  top:120px;
  left:-145px;
  transform-origin: left;
  transition: .5s;
  cursor: pointer;
}

Add the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,.3);
  width:350px;
  height: 30px;
  border-radius: 50%;
  top:300px;
  left:-185px;
  transition: .5s;
  transform-origin: right;
}

Use the input type=”checkbox” to animate the music box on click:

input#music {
  display: none;
}
#music:checked + .music {
  transform: rotate(-125deg) translateX(-20px) translateY(-30px);
}

#music:checked ~ .box-inside {
  transform: translateY(-115px);
}

#music:checked ~ .shadow {
  transform: scaleX(1.4);
}

Step3.

Add JavaScript

To play/ pause the audio on click:

let input = document.getElementById("music");
let audio = document.getElementById("player");

input.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    audio.currentTime = 0;
    input.innerHTML = "Pause";
  } else {
    audio.pause();
    input.innerHTML = "Play";
  }
});

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

CSS diamond ring (open/ close on click)

CSS & jQuery Calculator

Categories
Web development

CSS Polaroid/ Camera (press the button to take a photo)


CSS Polaroid/ Camera Animation

To learn how to create the CSS & JavaScript Polaroid/ Camera Animation follow the steps below and watch the video tutorial.

Demo:

Press the button to take a photo:

*to see the animation on the website click here.

Step1.

Add HTML

  <div class="polaroid-camera">
  <button id="button"></button>
  <div id="circle"></div>
  <div class="lens">
    <div class="reflection"></div>
  </div>
  <div class="flash"></div>
  <div class="stripes"></div>
  <div class="bottom">
    <div class="bottom-front"></div>
  </div>
  <div class="slot"></div>
  <div class="shadow"></div>
  <div id="photo" class="photo">
    <div class="house">
      <div class="windows"></div>
    </div>
  </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;
  background-color: #04a5b2;
  overflow: hidden;
}

.polaroid-camera {
  position: relative;
  top:-50px;
}

Style the camera:

.polaroid-camera:before, .polaroid-camera:after {
  content:"";
  position: absolute;
  transform: translate(-50%,-50%);
  left:0;
  top:50%;
  background-color: #faedcd;
  width:300px;
}

.polaroid-camera:before {
  border-radius: 30px 30px 0 0;
  box-shadow: inset 0 45px #fefae0;
  height:150px;
}

.polaroid-camera:after {
  height:40px;
  top:-10px;
}

button {
  position: absolute;
  width:50px;
  height:20px;
  transition: .2s;
  border-radius: 10px 10px 0 0;
  background-color: #003049;
  border: none;
  top:-95px;
  left:50px;
  transform-origin: bottom;
  cursor: pointer;
  z-index:125;
}

button:active {
  transform: scaleY(.5);
}

.lens {
  position: absolute;
  border-radius:50%;
  border:5px solid #333;
  background-color: white;
  width:115px;
  height:115px;
  z-index:1;
  transform: translate(-50%,-50%);
  top:50%;
  left:0;
}

.lens:before, .lens:after {
  content:"";
  position: absolute;
  border-radius:50%;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
}

.lens:before {
  border: 10px solid #333;
  width:90px;
  height:90px;
  background-color: #006494;
}

.lens:after {
  border:10px solid #0582ca;
  width: 40px;
  height:40px;
  background-color: #003554;
}

.reflection, .reflection:before, .reflection:after {
  position: absolute;
  border-radius:50%;
}

.reflection {
  background-color: rgba(255,255,255,.8);
  width: 15px;
  height:15px;
  top:50px;
  left:60px;
  z-index:2;
}

.reflection:before {
  content:"";
  width:115px;
  height:115px;
  background-color: rgba(255,255,255,.1);
  top:-50px;
  left:-60px;
}

.reflection:after {
  content:"";
  width:20px;
  height:20px;
  background-color: rgba(255,255,255,.4);
  top:35px;
  left:-30px;
  box-shadow: 40px -73px rgba(255,255,255,.4);
}

.flash {
  position: absolute;
  width:40px;
  height:40px;
  background-color: #333;
  border-radius: 5px;
  z-index:4;
  left:85px;
  top:-40px;
}

.flash:before, .flash:after {
  content:"";
  position: absolute;
  border-radius:50%;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
}

.flash:before {
  border: 5px solid #006494;
  width:20px;
  height:20px;
  background-color: #0582ca;
}

.flash:after {
  background-color: #003554;
  width:8px;
  height:8px;
  box-shadow: 8px -5px rgba(255,255,255,.3);
}

.stripes {
  position: absolute;
  width:14.5px;
  height:20px;
  background-color: #e02846;
  top:55px;
  box-shadow: -14.5px 0 #568760;
}

.stripes:before, .stripes:after {
  content:"";
  position: absolute;
  border-radius: 50%;
}

.stripes:before {
  width: 30px;
  height:30px;
  background-color: #333;
  left:50px;
  top:-20px;
}

.stripes:after {
  border:5px solid #ba181b;
  background-color: #a4161a;
  left:-130px;
  top:-40px;
  width: 30px;
  height: 30px;
}

.bottom {
  position: absolute;
  perspective: 250px;
  z-index:10;
}

.bottom:before, .bottom:after {
  content:"";
  position: absolute;
  height:30px;
  transform: rotateX(45deg);
  top:73px;
}

.bottom:before {
  background-color: #e0d0a6;
  width:314px;
  left:-157px;
}

.bottom:after {
  width: 15px;
  background-color: #a71e34;
  box-shadow: -15px 0 #3a5a40;
}

.bottom-front {
  position: absolute;
  background-color: #ebd9ae;
  width:328px;
  height:15px;
  top:102px;
  left:-164px;
}

.bottom-front:before {
  content:"";
  position: absolute;
  width: 15.5px;
  height: 15px;
  left:164px;
  background-color: #e02846;
  box-shadow: -15.5px 0 #568760;
}

.bottom-front:after {
  content:"";
  position: absolute;
  width:328px;
  height:50px;
  border-radius:0 0 20px 20px;
  background-color: #540b0e;
  top:15px;
}

.slot {
  position: absolute;
  background-color: #220901;
  width: 270px;
  transform: translate(-50%,-50%);
  border-radius: 10px 10px 0 0;
  height:15px;
  z-index:11;
  top:159px;
}

.shadow {
  position: absolute;
  width: 400px;
  height:70px;
  background-color: rgba(0,0,0,.3);
  border-radius:50%;
  top:120px;
  left:-200px;
  z-index:-4;
}

Style the photo:

.photo {
  z-index:-1;
  transform: translate(-50%,-50%);
  top:50px;
  position: absolute;
  border-style: solid;
  border-color: white;
  width:170px;
  height: 160px;
  border-top-width: 10px;
  border-bottom-width: 35px;
  border-left-width:10px;
  border-right-width:10px;
  background-color: #fbb13c;
  overflow: hidden;
}

.photo:before, .photo:after {
  content:"";
  position: absolute;
  border-radius: 50%;
}

.photo:before {
  background-color: #faf0ca;
  width:25px;
  height: 25px;
  top:20px;
  left: 120px;
}

.photo:after {
  background-color: #cc5803;
  width:35px;
  height: 35px;
  top:70px;
  left:30px;
  box-shadow: 20px 20px #cc5803, -20px 25px #cc5803, 0 30px #cc5803, -40px 70px #cc5803;
}

.house {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #faf0ca;
  box-shadow: 40px 0 #f2a65a, 60px 0 #f2a65a;
  top:125px;
  left:70px;
  z-index:101;
}

.house:before {
  content:"";
  position: absolute;
  border-bottom: 25px solid #031926;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  width:0;
  height:0;
  top:-25px;
}

.house:after {
  content:"";
  position: absolute;
  background-color: #cc5803;
  width:60px;
  height: 25px;
  transform: skew(40deg);
  left:30px;
  top:-25px;
}

.windows {
  position: absolute;
  width:15px;
  height:25px;
  border-radius: 10px 10px 0 0;
  background-color: #772f1a;
  top:10px;
  left:10px;
}

.windows:before {
  content:"";
  position: absolute;
  border-radius: 10px 10px 0 0;
  width: 10px;
  height:15px;
  background-color: #031926;
  left:45px;
  box-shadow: 25px 0 #031926;
}

.windows:after {
  content:"";
  position: absolute;
  width:5px;
  height: 60px;
  background-color: #031926;
  left:-35px;
  top:-35px;
  border-radius:10px;
}

Add flash animation (the animation will work after adding JavaScript):

.flash-animation {
  animation: flash-animation .2s ease;
}

#circle {
  position: absolute;
  background-color: rgba(255,255,255,.4);
  width: 100px;
  height:100px;
  border-radius:100%;
  z-index:5;
  top:-70px;
  left:55px;
  opacity:0;
}

Add animation for a photo (the animation will work after adding JavaScript):

@keyframes eject-photo {
  0% {transform: translateY(0);left:-95px;}
  100% {transform: translateY(115px); left:-95px;}
}

.eject-photo {
  animation: eject-photo .6s ease forwards .3s;
}

Step3.

Add JavaScript

let light = document.getElementById('circle');

document.getElementById('button').addEventListener('click', () => {
  light.classList.remove('flash-animation');
  setTimeout(function(){
  light.classList.add('flash-animation');
  },500);
});

let eject = document.getElementById('photo');

document.getElementById('button').addEventListener('click', () => {
  eject.classList.remove('eject-photo');
  setTimeout(function(){
  eject.classList.add('eject-photo');
  },500);
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Sliding Text Effect

CSS Windmill Animation

Pure CSS Valentine’s Day Animation

Categories
Web development

SVG Analog Clock (current time)



SVG Analog Clock (current time)

To create the SVG Analog Clock (current time) follow the steps below.

Demo:

*to see the SVG Clock Animation on the website click here.

Step1.

Draw the Clock

For this tutorial, I had drawn Clock and Clock face in Adobe Illustrator. To see how to draw the analog clock in Adobe Illustrator click here.

Step2.

Add the HTML and paste your SVG code into it (inside the <body> element in your HTML document):

<!doctype html>
<html>
<head>
<title>SVG Analog Clock</title>
</head>

<body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080">
  
  <style>.cls-1{fill:#79c7c6;}.cls-2{fill:#63a49f;}.cls-3{fill:#94d1d7;}.cls-4{fill:#fff;}.cls-5{font-size:36px;font-family:ArialMT, Arial;}.cls-5,.cls-7{fill:#1d1d1b;}.cls-6{letter-spacing:-0.07em;}</style>
  
  <g id="background"><rect class="cls-1" width="1080" height="1080"/></g>
    
    <g id="clock">
      <polygon id="shadow" class="cls-2" points="333.73 764.21 669.9 1080 1080 1080 1080 604.14 731.96 303.4 333.73 764.21"/><circle class="cls-3" cx="540" cy="540" r="304.67"/><circle class="cls-4" cx="540" cy="540" r="270.08"/>
      
            <text class="cls-5" transform="translate(635.58 342.46)"><tspan xml:space="preserve">  1</tspan></text><text class="cls-5" transform="translate(723.14 430.01)"><tspan xml:space="preserve">  2</tspan></text><text class="cls-5" transform="translate(755.18 549.6)"><tspan xml:space="preserve">  3</tspan></text><text class="cls-5" transform="translate(723.14 669.2)"><tspan xml:space="preserve">  4</tspan></text><text class="cls-5" transform="translate(635.58 756.75)"><tspan xml:space="preserve">  5</tspan></text><text class="cls-5" transform="translate(529.99 797.79)">6</text><text class="cls-5" transform="translate(396.39 756.75)">7</text><text class="cls-5" transform="translate(308.84 669.2)">8</text><text class="cls-5" transform="translate(276.8 549.6)">9</text><text class="cls-5" transform="translate(308.84 430.01)">10</text><text class="cls-5" transform="translate(396.39 342.45)"><tspan class="cls-6">1</tspan>
        <tspan x="17.35" y="0">1</tspan></text><text class="cls-5" transform="translate(515.99 310.41)">12</text></g>
      
       <g id="circle">
      <circle id="middle" class="cls-6" cx="540" cy="540" r="20.18"/>
      <circle id="middle-top" class="cls-4" cx="540" cy="540" r="12.3"/></g>
    </svg>
</body>
</html>

Step3.

Draw the clock hands:

<!doctype html>
<html>
<head>
<title>SVG Analog Clock</title>
    <style>
        #hr {
  stroke-width:15px; 
  stroke: #333; 
  stroke-linecap:round;
}

#min {
	stroke-width: 10px;
  fill: #333; 
  stroke: #333;
  stroke-linecap:round;
}
#sec {
  stroke-width: 5px;
  stroke: #f55;
  stroke-linecap:round;
  transform-origin: bottom;
  transform-box: fill-box;
 }
    </style>
</head>

<body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080">
  
  <style>.cls-1{fill:#79c7c6;}.cls-2{fill:#63a49f;}.cls-3{fill:#94d1d7;}.cls-4{fill:#fff;}.cls-5{font-size:36px;font-family:ArialMT, Arial;}.cls-5,.cls-7{fill:#1d1d1b;}.cls-6{letter-spacing:-0.07em;}</style>
  
  <g id="background"><rect class="cls-1" width="1080" height="1080"/></g>
    
    <g id="clock">
      <polygon id="shadow" class="cls-2" points="333.73 764.21 669.9 1080 1080 1080 1080 604.14 731.96 303.4 333.73 764.21"/><circle class="cls-3" cx="540" cy="540" r="304.67"/><circle class="cls-4" cx="540" cy="540" r="270.08"/>
      
            <text class="cls-5" transform="translate(635.58 342.46)"><tspan xml:space="preserve">  1</tspan></text><text class="cls-5" transform="translate(723.14 430.01)"><tspan xml:space="preserve">  2</tspan></text><text class="cls-5" transform="translate(755.18 549.6)"><tspan xml:space="preserve">  3</tspan></text><text class="cls-5" transform="translate(723.14 669.2)"><tspan xml:space="preserve">  4</tspan></text><text class="cls-5" transform="translate(635.58 756.75)"><tspan xml:space="preserve">  5</tspan></text><text class="cls-5" transform="translate(529.99 797.79)">6</text><text class="cls-5" transform="translate(396.39 756.75)">7</text><text class="cls-5" transform="translate(308.84 669.2)">8</text><text class="cls-5" transform="translate(276.8 549.6)">9</text><text class="cls-5" transform="translate(308.84 430.01)">10</text><text class="cls-5" transform="translate(396.39 342.45)"><tspan class="cls-6">1</tspan>
        <tspan x="17.35" y="0">1</tspan></text><text class="cls-5" transform="translate(515.99 310.41)">12</text></g>
        
        <g transform="translate(270, 270)" id="clock-hands">
         <line x1="270" y1="270" x2="270" y2="110" transform="rotate(80 100 100)" id="hr">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="43200s"
                              repeatCount="indefinite"/>
        </line>
                                                      
        <line x1="270" y1="270" x2="270" y2="75" id="min">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="3600s"
                              repeatCount="indefinite"/>
        </line>
      
        <line x1="270" y1="270" x2="270" y2="40" id="sec">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="60s"
							                      calcMode="discrete"
                              values="0;   6;  12;  18;  24;  30;  36;  42;  48;  54; 60;  66;  72;  78;  84;  90;  96; 102; 108; 114; 120; 126; 132; 138; 144; 150; 156; 162; 168; 174; 180; 186; 192; 198; 204; 210; 216; 222; 228; 234; 240; 246; 252; 258; 264; 270; 276; 282; 288; 294; 300; 306; 312; 318; 324; 330; 336; 342; 348; 354; 0"
                              additive="replace"
                              fill="freeze"
                              repeatCount="indefinite"/>
        </line>
    </g>
      
       <g id="circle">
      <circle id="middle" class="cls-6" cx="540" cy="540" r="20.18"/>
      <circle id="middle-top" class="cls-4" cx="540" cy="540" r="12.3"/></g>
    </svg>
</body>
</html>

Step4.

To set the current time and link the clock hands add JavaScript:

<!doctype html>
<html>
<head>
<title>SVG Analog Clock</title>
    <style>
        #hr {
  stroke-width:15px; 
  stroke: #333; 
  stroke-linecap:round;
}

#min {
	stroke-width: 10px;
  fill: #333; 
  stroke: #333;
  stroke-linecap:round;
}
#sec {
  stroke-width: 5px;
  stroke: #f55;
  stroke-linecap:round;
  transform-origin: bottom;
  transform-box: fill-box;
 }
    </style>
</head>

<body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080">
  
  <style>.cls-1{fill:#79c7c6;}.cls-2{fill:#63a49f;}.cls-3{fill:#94d1d7;}.cls-4{fill:#fff;}.cls-5{font-size:36px;font-family:ArialMT, Arial;}.cls-5,.cls-7{fill:#1d1d1b;}.cls-6{letter-spacing:-0.07em;}</style>
  
  <g id="background"><rect class="cls-1" width="1080" height="1080"/></g>
    
    <g id="clock">
      <polygon id="shadow" class="cls-2" points="333.73 764.21 669.9 1080 1080 1080 1080 604.14 731.96 303.4 333.73 764.21"/><circle class="cls-3" cx="540" cy="540" r="304.67"/><circle class="cls-4" cx="540" cy="540" r="270.08"/>
      
            <text class="cls-5" transform="translate(635.58 342.46)"><tspan xml:space="preserve">  1</tspan></text><text class="cls-5" transform="translate(723.14 430.01)"><tspan xml:space="preserve">  2</tspan></text><text class="cls-5" transform="translate(755.18 549.6)"><tspan xml:space="preserve">  3</tspan></text><text class="cls-5" transform="translate(723.14 669.2)"><tspan xml:space="preserve">  4</tspan></text><text class="cls-5" transform="translate(635.58 756.75)"><tspan xml:space="preserve">  5</tspan></text><text class="cls-5" transform="translate(529.99 797.79)">6</text><text class="cls-5" transform="translate(396.39 756.75)">7</text><text class="cls-5" transform="translate(308.84 669.2)">8</text><text class="cls-5" transform="translate(276.8 549.6)">9</text><text class="cls-5" transform="translate(308.84 430.01)">10</text><text class="cls-5" transform="translate(396.39 342.45)"><tspan class="cls-6">1</tspan>
        <tspan x="17.35" y="0">1</tspan></text><text class="cls-5" transform="translate(515.99 310.41)">12</text></g>
        
        <g transform="translate(270, 270)" id="clock-hands">
         <line x1="270" y1="270" x2="270" y2="110" transform="rotate(80 100 100)" id="hr">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="43200s"
                              repeatCount="indefinite"/>
        </line>
                                                      
        <line x1="270" y1="270" x2="270" y2="75" id="min">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="3600s"
                              repeatCount="indefinite"/>
        </line>
      
        <line x1="270" y1="270" x2="270" y2="40" id="sec">
            <animatetransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              dur="60s"
							                calcMode="discrete"
                              values="0;   6;  12;  18;  24;  30;  36;  42;  48;  54;
               60;  66;  72;  78;  84;  90;  96; 102; 108; 114;
              120; 126; 132; 138; 144; 150; 156; 162; 168; 174;
              180; 186; 192; 198; 204; 210; 216; 222; 228; 234;
              240; 246; 252; 258; 264; 270; 276; 282; 288; 294;
              300; 306; 312; 318; 324; 330; 336; 342; 348; 354; 0"
                              additive="replace"
                              fill="freeze"
                              repeatCount="indefinite"/>
        </line>
    </g>
      
       <g id="circle">
      <circle id="middle" class="cls-6" cx="540" cy="540" r="20.18"/>
      <circle id="middle-top" class="cls-4" cx="540" cy="540" r="12.3"/></g>
    </svg>
    <script>
        let clockHands = [];
clockHands[clockHands.length] = document.querySelector("#min > *");
clockHands[clockHands.length] = document.querySelector("#hr > *");

let cy = 270;
let cx = 270;

function link(idx) {
  return [idx, cx, cy].toString();
}

let date = new Date();
let hrHand = 360 * date.getHours() / 12 + date.getMinutes() / 2;
let minHand = 360 * date.getMinutes() / 60;

clockHands[0].setAttribute('from', link(minHand));
clockHands[0].setAttribute('to', link(minHand + 360));
clockHands[1].setAttribute('from', link(hrHand));
clockHands[1].setAttribute('to', link(hrHand + 360));
    </script>
</body>
</html>

Enjoy coding!

Hey, here’s something that might interest you:

SVG Handwriting Animation

Baggage Scan /SVG & JavaScript Animation

CSS Moon orbiting the Earth on the SVG path

Categories
Web development

JavaScript Math Object

The JavaScript Math object allows you to perform mathematical tasks.

All JavaScript methods/properties of Math can be called by using Math as an object (without creating it).

Example:

<!DOCTYPE html>
<html>
<body>

<p><b>Math.PI returns PI:</b></p>
<p id="piExample"></p>

<p><b>Math.sqrt(16) returns the square root of 16:</b></p>
<p id="sqrtExample"></p>

<script>
var x = Math.PI;
var y = Math.sqrt(10);

document.getElementById("piExample").innerHTML = x;
document.getElementById("sqrtExample").innerHTML = y;
</script>

</body>
</html>

Output:

Math.PI returns PI:

Math.sqrt(16) returns the square root of 16:


Math object properties:

E – the JavaScript E property returns the Euler’s number and the base of natural logarithms (approx. 2.718).

LN2 – the JavaScript LN2 property returns the natural logarithm of 2 (approx. 0.693).

LN10 – the JavaScript LN10 property returns the natural logarithm of 10 (approx. 2.302).

LOG2E – the JavaScript LOG2E property returns the base-2 logarithm of E (approx. 1.442).

LOG10E – the JavaScript LOG10E property returns the base-10 logarithm of E (approx. 0.434).

PI – the JavaScript PI property returns the ratio of a circle’s area to the square of its radius (approx.3.14).

SQRT1_2 – the JavaScript SQRT1_2 property returns the square root of 1/2 (approx. 0.707).

SQRT2 – the JavaScript SQRT2 property returns the square root of 2 (approx. 1.414).

Math Object Methods:

abs(x) – the JavaScript abs() method returns the absolute value of a number.

acos(x) – the JavaScript Math.acos() returns the arccosine of a number as a value between 0 and PI radians.

acosh(x) – the JavaScript Math.acosh() returns the hyperbolic arccosine of a number.

asin(x) – the JavaScript Math.asin() returns the arcsine of a number as a value between -PI/2 and PI/2 radians.

asinh(x) – the JavaScript Math.asinh() returns the hyperbolic arcsine of a number.

atan(x) – the JavaScript Math.atan() returns the arctangent of a number as a value between -PI/2 and PI/2 radians.

atan2(y,x) – the JavaScript Math.atan2() returns the arctangent of the quotient of its arguments, as a numeric value between PI and -PI radians.

atanh(x) – the JavaScript Math.atanh() returns the hyperbolic arctangent of a number.

cbrt(x) – the JavaScript Math.cbrt() returns the cubic root of a number.

ceil(x) – the JavaScript Math.ceil() rounds a number upwards to the nearest integer, and returns the result.

clz32(x) – the JavaScript Math.clz32() returns the number of leading zeros in a 32-bit binary representation of a number.

cos(x) – the JavaScript Math.cos() returns the cosine of a number.

cosh(x) – the JavaScript Math.cosh() returns the hyperbolic cosine of a number.

exp(x) – the JavaScript Math.exp() returns the value of Ex, where E is Euler’s number (approx. 2.7183) and x is the number passed to it.

expm1(x) – The JavaScript Math.expm1() returns the value of Ex minus 1, where E is Euler’s number (approx. 2.7183) and x is the number passed to it.

floor(x) – the JavaScript Math.floor() method rounds a number (downwards) to the nearest integer and returns the result.

fround(x) – the JavaScript Math.fround() returns the nearest (32-bit single precision) float representation of a number.

log(x) – the JavaScript Math.log() returns the natural logarithm (base E) of a number.

log10(x) – the JavaScript Math.log10() returns the base-10 logarithm of a number.

log1p(x) – the JavaScript Math.log1p() returns the natural logarithm (base E) of 1 + a defined number.

log2(x) – the JavaScript Math.log2() returns the base-2 logarithm of a number.

max(x,y,z…) – the JavaScript Math.max() returns the number with the highest value.

min(x,y,z…) – the JavaScript Math.min() method returns the number with the lowest value.

pow(x,y) – the JavaScript Math.pow() returns the value of x to the power of y (xʸ).

random(x) – the JavaScript Math.random() returns a random number from 0 (included) up to but not including 1.

round(x) – the JavaScript Math.round() rounds a number to the nearest integer.

sign(x) – the JavaScript Math.sign() returns whether a number is negative, positive or zero.

sin(x) – the JavaScript Math.sin() returns the sine of a number.

sqrt(x) – the JavaScript Math.sqrt() returns the square root of a number.

tan(x) – the JavaScript Math.tan() returns the tangent of a number.

tanh(x) – the JavaScript Math.tanh() returns the hyperbolic tangent of a number.

trunc(x) – the JavaScript Math.trunc() returns the integer part of a number.

Read also:

JavaScript Introduction

JavaScript HTML DOM

Categories
Web development

JavaScript Math.trunc()

JavaScript Math.trunc()

The JavaScript Math.trunc() returns the integer part of a number.

Syntax:

Math.trunc(number)

Note: The JavaScript Math.trunc() won’t round the number up/down to the nearest integer, but simply remove the decimals.

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
document.getElementById("example").innerHTML = Math.trunc(7.57);
</script>

</body>
</html>

Output:

The JavaScript Math.trunc() returns the integer part of a number:


Note: The JavaScript Math.trunc() is not supported in Internet Explorer.

Enjoy coding!

Read also:

JavaScript Math Object

JavaScript Math Object Properties

JavaScript Math.round()

Categories
Web development

JavaScript tan() & tanh() Methods

JavaScript tan() & tanh() Methods

The JavaScript Math.tan() returns the tangent of a number.

Syntax:

Math.tan(number)

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
document.getElementById("example").innerHTML = Math.tan(1);
</script>

</body>
</html>

Output:

The JavaScript Math.tan() returns the tangent of a number:


The JavaScript Math.tanh() returns the hyperbolic tangent of a number.

Syntax:

Math.tanh(number)

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example-1"></p>

<script>
document.getElementById("example-1").innerHTML = Math.tanh(1);
</script>

</body>
</html>

Output:

The JavaScript Math.tanh() returns the hyperbolic tangent of a number:


Note: The JavaScript Math.tanh() is not supported in Internet Explorer.

Enjoy coding!

Read also:

JavaScript Math Object

JavaScript atan(), atan2() & atanh() Methods

JavaScript cos() & cosh() Methods

Categories
Web development

JavaScript Math.sqrt()

JavaScript Math.sqrt()

The JavaScript Math.sqrt() returns the square root of a number.

Syntax:

Math.sqrt(number)

Note: If a number is negative , NaN is returned.

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
let a = Math.sqrt(0);
let b = Math.sqrt(1);
let c = Math.sqrt(7);
let d = Math.sqrt(45);
let e = Math.sqrt(-9);

document.getElementById("example").innerHTML =
a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e;
</script>

</body>
</html>

Output:

The JavaScript Math.sqrt() returns the square root of a number:


Enjoy coding!

Read also:

JavaScript Math Object

JavaScript Math.cbrt()

JavaScript Math.clz32()

Categories
Web development

JavaScript Math.sin()

JavaScript Math.sin()

The JavaScript Math.sin() returns the sine of a number.

Syntax:

Math.sin(number)

Note: JavaScript Math.sin(x) returns a value between -1 and 1, which represents the sine of the parameter x, or NaN if the value is empty.

Example:

<!DOCTYPE html>
<html>
<body>

<p id="example"></p>

<script>
let a = Math.sin(2);
let b = Math.sin(-2);
let c = Math.sin(0);
let d = Math.sin(Math.PI);
let e = Math.sin(Math.PI / 2);
let f = Math.sin();

document.getElementById("example").innerHTML =
a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e + "<br>" + f;
</script>

</body>
</html>

Output:

JavaScript Math.sin() returns the sine of a number:


Enjoy coding!

Read also:

JavaScript Math Object

JavaScript Math.ceil()

JavaScript Math.pow()