Sharecodepoint App Download Qrcode Sharecodepoint Android App Banner
Now You can search anything in sharecodepoint using your voice. Click on mic button. Sharecodepoint Voice Sharecodepoint Youtube Channel



Sharecodepoint popular queries
Search results for Animations
Showing posts with label Animations. Show all posts

Tuesday, 3 May 2016

Display Battery Status using HTML and CSS

In this tutorial, we'll design and display battery status using HTML , CSS , animations and show effects.  Today, we will start by crea...
In this tutorial, we'll design and display battery status using HTML , CSS , animations and show effects.  Today, we will start by creating a very cool and realistic battery levels with CSS3 properties, and add a CSS3 animations for giving the battery levels effects.
This tutorial only explains how to design and display battery status from your web page. It does not retrieve and display current status of your device battery.

HTML CODE
First we’ll create the HTML in order to get an empty battery display
<html>
  <head>
  <title>Display Battery Status using HTML and CSS</title>
      <link href="battery.css" rel="stylesheet" type="text/css">
      <body>
      <div class="battery-level-control-eq">
<div class="levels-eq">
<div class="eq">
</div>
</div>
<div class="status">
<div class="status-info">
<div>
0 %</div>
<div>
20 %</div>
<div>
40 %</div>
<div>
60 %</div>
<div>
80 %</div>
<div>
100 %</div>
<div>
Empty</div>
</div>
</div>
</div>
<button class="charge-btn" onclick="charge()"></button>
  </body>
</html>

CSS CODE
Now, we need to display a border around the div and a small rectangle. This CSS code is  to make the structure design and control the layout of battery.
.battery-level-control-eq { 
  margin-left:200px;
  margin-top:60px;
}
.levels-eq{
  margin-top:50px;
  border:5px solid #666;
  border-radius:2px;
  background-color:#CC3333;
  height:450px; 
  width:200px; 
  float:left;
  animation:mp-eq1-bg 10.5s;
  -webkit-animation:mp-eq1-bg 10.5s;
  -moz-animation:mp-eq1-bg 10.5s;
 
}
.eq{
  width:200px;
  height:450px;
  background-color:#fff;
  animation:mp-eq1 10.5s ;
  -webkit-animation:mp-eq1 10.5s;
  -moz-animation:mp-eq1 10.5s;
}
Class ".battery-level-control-eq" used to control the layout of battery. Class ".levels-eq" used  to make the layout of battery and it also controls the battery levels background (means changing the background color automatically with the help of animation:mp-eq1-bg 10.5s;).  Class ".eq" used for changing the height of levels automatically using the animations css property.

CSS code for changing the background color of battery levels
The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.
@keyframes mp-eq1-bg{
 20%{
    transition:all 16s ease-in-out;
    background-color:#CC3333;
   }
 40%{
   transition:all 16s ease-in-out;
   background-color:#CC3366;
  }
60%{
   transition:all 16s ease-in-out;
   background-color:#FFCC66;
   }
80%{
   transition:all 16s ease-in-out;
   background-color:#FFCC00;
   }
95%{
   transition:all 16s ease-in-out;
   background-color:#66CC33;
  }}

CSS code for changing the height of battery levels
Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
@keyframes mp-eq1{
 20%{
    transition:all 16s ease-in-out; 
    height:400px;
   }
 40%{
   transition:all 16s ease-in-out;
   height:300px;
   }
 60%{
   transition:all 16s ease-in-out;
   height:200px;
   }
 80%{
   transition:all 16s ease-in-out; 
   height:100px
   }
95%{
   transition:all 16s ease-in-out; 
   height:0px;
  }}

CSS code to display the battery levels status
When levels are automatically incremented then display the battery status (how much battery charged).
.status {
    width:100px;
    height:100px;
    overflow:hidden;
 float:left;
 margin-left:100px;
 margin-top:200px;
}
.status-info{
    width:auto;
    animation: info 18s infinite;
    animation-fill-mode: backwards;
    animation-timing-function: steps(10);
 animation-iteration-count: 1;
}
.status-info div {
    float:right;
    text-align:center;
    width:100px;
    height:100px;
 font-size:25px;
 font-weight:300;
    line-height:100px;
    display:inline-block;
}
 
@-webkit-keyframes info {
    0% {
        margin-right:0px
    }
    100% {
        margin-right:-1000px;
    }
}

CSS code of charge button
Class ".charge-btn" is used  to design the button and also to change the background color of button using animation:btn 10.5s; css property.
.charge-btn{
 animation:btn 10.5s ;
 -webkit-animation:btn 10.5s;
 -moz-animation:btn 10.5s;
 border:2px solid rgba(255,255,255,0.4);
 padding:10px;
 font-size:17px;
 color:#f5f5f5;
 cursor:pointer;
 border-radius:2px;
}
.charge-btn::before{
 content: "click to charge battery";
}
@keyframes btn{
20%{
 transition:all 16s ease-in-out;
 background-color:#CC3333;
}
40%{
 transition:all 16s ease-in-out;
 background-color:#CC3366;
}
60%{
 transition:all 16s ease-in-out;
 background-color:#FFCC66;
}
80%{
 transition:all 16s ease-in-out;
 background-color:#FFCC00;
}
95%{
 transition:all 16s ease-in-out;
 background-color:#66CC33;
}}

JAVASCRIPT CODE To reload the page.
<script>
  function charge() {
    location.reload(); 
   }
</script>
Finally Display Battery Status Done !
If you want to make real display battery status application then use JavaScript APIs that allow developers to communicate with the device system including retrieving battery status. That’s all, head over to the demo page to see it in action.


Saturday, 30 April 2016

Animated Bouncing Balls Using HTML and CSS3

In this tutorial, we'll create the animated bouncing  balls using only CSS3 transition , animations and show effects.  Today, we will ...
In this tutorial, we'll create the animated bouncing  balls using only CSS3 transition , animations and show effects.  Today, we will start by creating a very cool and realistic ball with CSS3 properties and add a CSS3 animations for giving  bouncing and jumping effects to the ball.

CSS3 animation make it possible to animate transitions from one CSS3 style configuration to another.  Previously it  was possible only with the use of javascript or jquery  for animations but now the CSS3 animation properties enables us to do animations easily. Don't write the big code for small animation just write the only one word "animation". 

Today, I  am going to give an example of bouncing and Jumping balls using CSS3 animations and transitions effects.

HTML CODE 
Let's start with some very basic html. We have here 4 simple DIV elements . "class="main" " is the main DIV which controls the balls. This Div will determine the balls margin from top of the screen. First div is used for ball 1 , Second div used for ball 2 and third div used for ball 3. 
<html>
  <head>
      <title>Animated Bouncing Ball's Using HTML  and CSS3 </title>
      <link href="balls.css" rel="stylesheet" type="text/css">
      <body>
       
     <div class="main">
<div class="ball1">
</div>
<div class="ball2">
</div>
<div class="ball3">
</div>
</div>
</body>
</html>

CSS CODE
I'll start by adding the animation property to our ball "animation: animation:ball1 3s infinite ".
  animation:ball1 3s infinite;
All I did was to define the animation name (ball1 , ball2 or ball3 ), the animation's duration (3 second ) and how many times the animation will happen - in our case we use ( infinite ) which means that it will run  forever.

Animation itself:
So, basically what I’m doing here is to play with the ‘top’ position property of the ball.
<html>
  <head>
      <title>Animated Bouncing Ball's Using HTML  and CSS3 </title>
      <link href="balls.css" rel="stylesheet" type="text/css">
      <body>
       
     <div class="main">
<div class="ball1">
</div>
<div class="ball2">
</div>
<div class="ball3">
</div>
</div>
</body>
</html>

MAIN CSS CODE 
We are giving the balls equal width and height and a value of 100% to border-radius property.So, it will be a ball and not an oval shape. All balls transition delay times are equal.
.main{ margin-top:100px;}
This CSS for Ball 1
.ball1{
 float:left;
 width:100px;
 height:100px;
 background-color:#999999;
 border-radius:100%;
 transition:all 0.5s ease-in-out;
 -webkite-transition:all 0.5s ease-in-out;
 -moz-transition:all 0.5s ease-in-out;
 animation:ball1 3s infinite;
 -webkit-animation:ball1 3s infinite;
 -moz-animation:ball1 3s infinite;
 border:5px solid #222;
}
@keyframes ball1{
20%{
 background-color:#FF66CC;
 transition:all 0.5s ease-in-out;
}
40%{
 background-color:#66CC33;
 margin-left:800px;
 margin-top:100px;
 width:150px;
 height:150px;
 transition:all 0.5s ease-in-out;
}
60%{
 background-color:#CC33FF;
 margin-left:500px;
 margin-top:300px;
 width:150px;
 height:150px;
 transition:all 0.5s ease-in-out;
}
80%{
 background-color:#FFFF00;
 margin-left:300px;
 margin-top:100px;
 width:100px;
 height:100px;
 transition:all 0.5s ease-in-out;
}
95%{
 width:200px;
 height:200px;
 background-color:#FF9933;
 transition:all 0.5s ease-in-out;
}
}
 
This CSS for Ball 2
/* This CSS for Ball 2 */
.ball2{
 float:left;
 width:100px;
 height:100px;
 margin-top:100px;
 background-color:#66CCCC;
 border-radius:100%;
 transition:all 10s ease-in-out;
 -webkite-transition:all 10s ease-in-out;
 -moz-transition:all 10s ease-in-out;
 animation:ball2 2s infinite;
 -webkit-animation:ball2 2s infinite;
 -moz-animation:ball2 2s infinite;
 border:5px solid #222;
}
@keyframes ball2{
20%{
 background-color:#FFFF66;
 margin-top:200px;
 transition:all 0.5s ease-in-out;
}
40%{
 background-color:#CC66FF;
 margin-top:-50px;
 width:150px;
 height:150px;
 transition:all 0.5s ease-in-out;
}
60%{
 background-color:#FF3366;
 margin-top:200px;
 transition:all 0.5s ease-in-out;
}
80%{
 background-color:#FF9966;
 margin-top:-100px;
 width:100px;
 height:100px;
 transition:all 0.5s ease-in-out;
}
95%{
 width:150px;
 height:150px;
 margin-top:250px;
 background-color:#000000;
 transition:all 0.5s ease-in-out;
}
}
 
This CSS for Ball 3
/* This CSS for Ball 3 */
.ball3{
 float:left;
 width:100px;
 height:100px;
 margin-top:100px;
 background-color:#6666CC;
 border-radius:100%;
 transition:all 10s ease-in-out;
 -webkite-transition:all 10s ease-in-out;
 -moz-transition:all 10s ease-in-out;
 animation:ball2 2s infinite;
 -webkit-animation:ball3 2s infinite;
 -moz-animation:ball3 2s infinite;
 border:5px solid #222;
}
@keyframes ball3{
25%{
 background-color:#FF6633;
 margin-top:50px;
 transition:all 0.5s ease-in-out;
}
40%{
 background-color:#0066FF;
 margin-top:300px;
 width:150px;
 height:150px;
 transition:all 0.5s ease-in-out;
}
60%{
 background-color:#333333;
 margin-top:-200px;
 transition:all 0.5s ease-in-out;
}
80%{
 background-color:#663333;
 margin-top:100px;
 width:100px;
 height:100px;
 transition:all 0.5s ease-in-out;
}
95%{
 width:200px;
 height:200px;
 margin-top:300px;
 transition:all 0.5s ease-in-out;
}
}

Finally Animated Bouncing and Jumping Balls Done !
Now, you can create your own animation using CSS3 properties without writing any javascript and jquey code.



 Animated Bouncing Balls Using HTML and CSS3  Live Demo Animated Bouncing Balls Using HTML and CSS3

 

Version 23.2.3.4 - 2016 - 2019 - © Sharecodepoint | Made in India. | Copyright Content