Animated World Map With Round Circle In Css

Animation
File Size: 44.98 KB
Views Total: 2358 views
Last Update:February 21, 2021
Publish Date: August 26, 2020
Official Website: Go to website
License: MIT
Plugin Author: andymc1
Demo    Download

A light weight Animated World Map With Round Circle In Css. animated earth in your website with use html and css3. simple use css with animation . A global round circle animation with css.

How to used :

Add with html code

<div style="margin: 10% auto;max-width: 50%;">
	<h1><center> Global Map Circle Animation In Css</center></h1>
<div class="stage">
	<div class="ball"></div>
</div>
</div>

Add with css code

body {
	background-color: #75cfe5;
}
.stage{
	height: 200px;
	width: 200px;
    margin: 0 auto;
}
.ball {
	-webkit-animation: move-map 35s infinite cubic-bezier(.5,.5,.5,.5);
	animation: move-map 35s infinite cubic-bezier(.5,.5,.5,.5);
}

.ball {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    background-image: url('http://www.jquerypost.com/demo/animated-world-map-with-round-circle-in-css-847/earth.jpg');
    background-repeat: repeat-x;
    background-size: auto 200px;
    box-shadow: 0 2px 2px rgba(0,0,0,.18), 0 4px 4px rgba(0,0,0,.18), 0 8px 8px rgba(0,0,0,.18), 0 16px 16px rgba(0,0,0,.15), 0 32px 32px rgba(0,0,0,.15);
}
.ball:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: -40px 10px 70px 10px rgba(0,0,0,.5) inset;
    z-index: 2;
}
.ball:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .3;
    background: radial-gradient(circle at 50% 80%,ligthen(#75cfe5,5),#75cfe5 10%,#020409 66%,#13265e 100%);
}

@keyframes move-map {
	0% {
    background-position: -800px 40%;
}
100% {
    background-position: 0 40%;
}
}

Done

Thanks for make jQuery plugin is developed by andymc1 For more Helpfull for users, please check the demo page or visit the official website.

Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.

Related jQuery Plugins

You Might Also Like