Circle bubble with CSS and HTML5 – part 001. – free-tutorials.org with free tutorials and source code

This is a simple example of circle bubble with CSS and HTML 5.
It is a circle with a blue color that raises similar to where on the surface of a liquid.
The visual effect is very pleasant and the source code is simple.
You need to create an index.html file with this source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="animation">
        <div class="round round-circle"></div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</body>

</html>

The next step is to make a style.css file in same folder with the HTML 5 file.
The source code of this file is this:

body {background:#000;}

.animation {position:absolute;top:0;left:0;width:500px;height:500px;background-size:4px;}

.round {position:absolute;width:200px;height:200px;border-radius:100px;border:2px solid #00CCFF;
animation:shock-wave 1s ease 0s infinite;transform:translateX(-50%) translateY(-50%);}
.round-circle {top:200px;left:200px;animation-delay:0.0s;animation-duration:1.0s;}

@keyframes shock-wave {
    0%   {width:0;height:0;opacity:1;}
    60%  {opacity:1;}
    100% {width:200px;height:200px;opacity:0;}
}

body {background:#000;}

.animation {position:absolute;top:0;left:0;width:500px;height:500px;background-size:4px;}

.round {position:absolute;width:200px;height:200px;border-radius:100px;border:2px solid #00CCFF;

animation:shock-wave 1s ease 0s infinite;transform:translateX(-50%) translateY(-50%);}

.round-circle {top:200px;left:200px;animation-delay:0.0s;animation-duration:1.0s;}

@keyframes shock-wave {

0% {width:0;height:0;opacity:1;}

60% {opacity:1;}

100% {width:200px;height:200px;opacity:0;}

}

The result of this example can be found here.

Leave a Reply Cancel reply