<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="earth"></div>
<div class="earth-shadow"></div>
<a onclick="window.open('http://fm.tc/live-broadcast-fm-1372.html','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1560459863/mdialogo_dckk4m.ico" title="7/24 ONLİNE KESİNTİSİZ MÜZİK YAYINI" border="0"></a>
<a onclick="window.open('http://fm.tc/live-broadcast-tv-1845.html','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1560460160/ttgrtlogo_eqthwz.ico" title="LİVE BROADCAST TV" border="0"></a>
2013 TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU <a target="_blank" href="http://harunpehlivan.fm.tc">TTGRT</a>
<div class="ground-shadow"></div>
html,body {
height:100%;
min-height:100%;
}
body {
background-image:linear-gradient(transparent,transparent 350px,rgba(white,.9) 350px,rgba(black,.8)), url(https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1571160809/earthmap_pkboiq.jpg);
background-position:0 0;
background-size:2000px auto;
animation:backgroundCrawl 50s linear infinite;
}
.earth {
width:125px;
height:125px;
margin:250px auto 0 auto;
border-radius:100%;
background: url(http://onepagerapp.com/uploads/gallery_image/81381/medium_genellogo.png) 0 0 repeat;
background-size:cover;
position:relative;
animation:earthBounce .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) alternate infinite, slowSpin 6s linear infinite, earthRotate 12s linear infinite;
z-index:1;
}
.earth-shadow {
width:125px;
height:125px;
margin:250px auto 0 auto;
border-radius:100%;
box-shadow:0 0 60px 0 rgba(#0085ff,.6);
background-image:linear-gradient( transparent,rgba(black,.9)), radial-gradient(circle at top, transparent 0, rgba(white,.09) 90px, transparent 90px, transparent);
position:absolute;
animation:earthBounce .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) alternate infinite;
left:50%;
margin-left:-62.5px;
z-index:1;
}
.ground-shadow {
margin:-10px auto 0;
width:100px;
height:20px;
background:rgba(0,0,0,.1);
border-radius:100%;
animation: shadow .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
position:relative;
z-index:0;
}
@keyframes earthBounce {
0% {
top:0;
}
100% {
top:-200px;
}
}
@keyframes shadow {
0% {
transform: scale(.5);
background-color:rgba(0,0,0,.2);
}
100% {
transform: scale(1.1);
background-color:rgba(0,0,0,.05);
}
}
@keyframes slowSpin {
0% {
transform:rotate(0);
}
100% {
transform:rotate(360deg);
}
}
@keyframes backgroundCrawl {
0% {
background-position:0 0;
}
100%{
background-position:-2000px 0;
}
}
@keyframes earthRotate {
0% {
background-position:0 0;
}
100%{
background-position:-500px 0;
}
}
