CSS Radar, variable speed

Developer
Size
4,382 Kb
Views
14,168

How do I make an css radar, variable speed?

What is a css radar, variable speed? How do you make a css radar, variable speed? This script and codes were developed by Jesper Hills on 13 October 2022, Thursday.

CSS Radar, variable speed Previews

CSS Radar, variable speed - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Radar, variable speed</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
/* Radar */
#radar { position: relative; z-index: 2; width: 200px; height: 200px; margin: 50px;
}
#radar:before { content: ""; width: 350px; height: 250px; position: absolute; border-radius: 3px; top: -25px; left: -25px; background: linear-gradient(#333 0%,#111 100%);
}
#radar:after { content: ""; width: 200px; height: 200px; position: absolute; border-radius: 100%; overflow: hidden; top: -5px; left: -5px; background: linear-gradient(135deg, #073156 0%,#041c2f 100%); box-shadow: inset 0px 0px 25px rgba(0,0,0,0.85); border: 5px solid #333;
}
/* Turn knob */
tt { position: absolute; top: 25px; right: -90px; background: linear-gradient(#CCC 0%,#666 100%); z-index: 2; width: 40px; height: 40px; border-radius: 100%; border: 5px outset #999; transform: rotate(45deg); cursor: pointer; transition: transform 1s;
}
tt:after { content: ""; position: absolute; top: -13px; left: -13px; border-style: solid; border-width: 10px; border-color: transparent #999 transparent transparent; transform: rotate(45deg);
}
pre { position: absolute; top: -6px; right: -105px; width: 60px; height: 60px; opacity: 0.3; border-width: 10px; border-style: solid; border-color: green yellow red transparent; border-radius: 100%; transform: rotate(-90deg);
}
/* Sweep */
s { width: 0px; height: 0px; position: absolute; z-index: 4; opacity: 1; border-radius: 100%; border-width: 100px 100px 100px 100px; border-style: solid; border-color: rgba(148, 209, 255, 0.1) transparent transparent transparent;
}
s:after { content: ""; position: absolute; bottom: 0; left: -1px; height: 100px; width: 2px; background: #94d1ff; transform-origin: bottom center; transform: rotate(-45deg);
}
/* Blip */
b { width: 6px; height: 6px; position: absolute; z-index: 3; background: #94d1ff; border-radius: 100%; box-shadow: 0 0 5px rgba(255, 255, 255, 0.7); opacity: 0; top: 60%; left: 30%;
}
b:nth-of-type(1){ top: 20%; left: 70%;
}
b:nth-of-type(2){ top: 60%; left: 30%;
}
b:nth-of-type(3){ top: 80%; left: 70%;
}
b:nth-of-type(4){ top: 60%; left: 10%;
}
b:nth-of-type(5){ top: 30%; left: 50%;
}
/* Lines */
u { background: #94d1ff; opacity: 0.08; width: 1px; height: 200px; position: absolute; z-index: 2; top: 0;
}
/* Vertical Lines */
u:nth-of-type(1){ left: 20%; height: 80%; top: 10%; }
u:nth-of-type(2){ left: 40%; height: 100%; top: 0%; }
u:nth-of-type(3){ left: 60%; height: 100%; top: 0%; }
u:nth-of-type(4){ left: 80%; height: 80%; top: 10%; }
/* Horizontal Lines */
u:nth-of-type(n+5){ transform: rotate(-90deg); transform-origin: top center; left: 0;
}
u:nth-of-type(5){ top: 20%; height: 80%; left: 10%; }
u:nth-of-type(6){ top: 40%; height: 100%; left: 00%; }
u:nth-of-type(7){ top: 60%; height: 100%; left: 00%; }
u:nth-of-type(8){ top: 80%; height: 80%; left: 10%; }
/* Animation (Fast) */
@keyframes blip3 { 0% { opacity: 0; } 1% { opacity: 1; } 75% { opacity: 0; }
}
@keyframes sweep3 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); }
}
/* Animation (Med) */
@keyframes blip2 { 0% { opacity: 0; } 1% { opacity: 1; } 75% { opacity: 0; }
}
@keyframes sweep2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); }
}
/* Animation (Slow) */
@keyframes blip1 { 0% { opacity: 0; } 1% { opacity: 1; } 75% { opacity: 0; }
}
@keyframes sweep1 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); }
}
/* SPEEDS */
.slow tt { transform: rotate(-45deg); }
.slow s { animation-timing-function: linear; animation-duration: 4s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: sweep1;
}
.slow b { animation-timing-function: linear; animation-duration: 4s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: blip1;
}
.slow b:nth-of-type(1){ top: 20%; left: 70%; animation-delay: 3.1s;
}
.slow b:nth-of-type(2){ top: 60%; left: 30%; animation-delay: 0.8s;
}
.slow b:nth-of-type(3){ top: 80%; left: 70%; animation-delay: 1.8s;
}
.slow b:nth-of-type(4){ top: 60%; left: 10%; animation-delay: 0.7s;
}
.slow b:nth-of-type(5){ top: 30%; left: 50%; animation-delay: 3.35s;
}
.medium tt { transform: rotate(45deg); }
.medium s { animation-timing-function: linear; animation-duration: 2s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: sweep2;
}
.medium b { animation-timing-function: linear; animation-duration: 2s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: blip2;
}
.medium b:nth-of-type(1){ top: 20%; left: 70%; animation-delay: 1.5s;
}
.medium b:nth-of-type(2){ top: 60%; left: 30%; animation-delay: 0.4s;
}
.medium b:nth-of-type(3){ top: 80%; left: 70%; animation-delay: 0.9s;
}
.medium b:nth-of-type(4){ top: 60%; left: 10%; animation-delay: 0.35s;
}
.medium b:nth-of-type(5){ top: 30%; left: 50%; animation-delay: 1.7s;
}
.fast tt { transform: rotate(135deg); }
.fast s { animation-timing-function: linear; animation-duration: 1s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: sweep3;
}
.fast b { animation-timing-function: linear; animation-duration: 1s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: blip3;
}
.fast b:nth-of-type(1){ top: 20%; left: 70%; animation-delay: 0.77s;
}
.fast b:nth-of-type(2){ top: 60%; left: 30%; animation-delay: 0.2s;
}
.fast b:nth-of-type(3){ top: 80%; left: 70%; animation-delay: 0.45s;
}
.fast b:nth-of-type(4){ top: 60%; left: 10%; animation-delay: 0.17s;
}
.fast b:nth-of-type(5){ top: 30%; left: 50%; animation-delay: 0.83s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="radar" class="slow"> <!-- Turn knob --> <tt></tt> <!-- Speed Presets --> <pre></pre> <!-- Sweep --> <s></s> <!-- Blips --> <b></b> <b></b> <b></b> <b></b> <b></b> <!-- Lines --> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Radar, variable speed - Script Codes CSS Codes

/* Radar */
#radar { position: relative; z-index: 2; width: 200px; height: 200px; margin: 50px;
}
#radar:before { content: ""; width: 350px; height: 250px; position: absolute; border-radius: 3px; top: -25px; left: -25px; background: linear-gradient(#333 0%,#111 100%);
}
#radar:after { content: ""; width: 200px; height: 200px; position: absolute; border-radius: 100%; overflow: hidden; top: -5px; left: -5px; background: linear-gradient(135deg, #073156 0%,#041c2f 100%); box-shadow: inset 0px 0px 25px rgba(0,0,0,0.85); border: 5px solid #333;
}
/* Turn knob */
tt { position: absolute; top: 25px; right: -90px; background: linear-gradient(#CCC 0%,#666 100%); z-index: 2; width: 40px; height: 40px; border-radius: 100%; border: 5px outset #999; transform: rotate(45deg); cursor: pointer; transition: transform 1s;
}
tt:after { content: ""; position: absolute; top: -13px; left: -13px; border-style: solid; border-width: 10px; border-color: transparent #999 transparent transparent; transform: rotate(45deg);
}
pre { position: absolute; top: -6px; right: -105px; width: 60px; height: 60px; opacity: 0.3; border-width: 10px; border-style: solid; border-color: green yellow red transparent; border-radius: 100%; transform: rotate(-90deg);
}
/* Sweep */
s { width: 0px; height: 0px; position: absolute; z-index: 4; opacity: 1; border-radius: 100%; border-width: 100px 100px 100px 100px; border-style: solid; border-color: rgba(148, 209, 255, 0.1) transparent transparent transparent;
}
s:after { content: ""; position: absolute; bottom: 0; left: -1px; height: 100px; width: 2px; background: #94d1ff; transform-origin: bottom center; transform: rotate(-45deg);
}
/* Blip */
b { width: 6px; height: 6px; position: absolute; z-index: 3; background: #94d1ff; border-radius: 100%; box-shadow: 0 0 5px rgba(255, 255, 255, 0.7); opacity: 0; top: 60%; left: 30%;
}
b:nth-of-type(1){ top: 20%; left: 70%;
}
b:nth-of-type(2){ top: 60%; left: 30%;
}
b:nth-of-type(3){ top: 80%; left: 70%;
}
b:nth-of-type(4){ top: 60%; left: 10%;
}
b:nth-of-type(5){ top: 30%; left: 50%;
}
/* Lines */
u { background: #94d1ff; opacity: 0.08; width: 1px; height: 200px; position: absolute; z-index: 2; top: 0;
}
/* Vertical Lines */
u:nth-of-type(1){ left: 20%; height: 80%; top: 10%; }
u:nth-of-type(2){ left: 40%; height: 100%; top: 0%; }
u:nth-of-type(3){ left: 60%; height: 100%; top: 0%; }
u:nth-of-type(4){ left: 80%; height: 80%; top: 10%; }
/* Horizontal Lines */
u:nth-of-type(n+5){ transform: rotate(-90deg); transform-origin: top center; left: 0;
}
u:nth-of-type(5){ top: 20%; height: 80%; left: 10%; }
u:nth-of-type(6){ top: 40%; height: 100%; left: 00%; }
u:nth-of-type(7){ top: 60%; height: 100%; left: 00%; }
u:nth-of-type(8){ top: 80%; height: 80%; left: 10%; }
/* Animation (Fast) */
@keyframes blip3 { 0% { opacity: 0; } 1% { opacity: 1; } 75% { opacity: 0; }
}
@keyframes sweep3 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); }
}
/* Animation (Med) */
@keyframes blip2 { 0% { opacity: 0; } 1% { opacity: 1; } 75% { opacity: 0; }
}
@keyframes sweep2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); }
}
/* Animation (Slow) */
@keyframes blip1 { 0% { opacity: 0; } 1% { opacity: 1; } 75% { opacity: 0; }
}
@keyframes sweep1 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); }
}
/* SPEEDS */
.slow tt { transform: rotate(-45deg); }
.slow s { animation-timing-function: linear; animation-duration: 4s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: sweep1;
}
.slow b { animation-timing-function: linear; animation-duration: 4s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: blip1;
}
.slow b:nth-of-type(1){ top: 20%; left: 70%; animation-delay: 3.1s;
}
.slow b:nth-of-type(2){ top: 60%; left: 30%; animation-delay: 0.8s;
}
.slow b:nth-of-type(3){ top: 80%; left: 70%; animation-delay: 1.8s;
}
.slow b:nth-of-type(4){ top: 60%; left: 10%; animation-delay: 0.7s;
}
.slow b:nth-of-type(5){ top: 30%; left: 50%; animation-delay: 3.35s;
}
.medium tt { transform: rotate(45deg); }
.medium s { animation-timing-function: linear; animation-duration: 2s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: sweep2;
}
.medium b { animation-timing-function: linear; animation-duration: 2s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: blip2;
}
.medium b:nth-of-type(1){ top: 20%; left: 70%; animation-delay: 1.5s;
}
.medium b:nth-of-type(2){ top: 60%; left: 30%; animation-delay: 0.4s;
}
.medium b:nth-of-type(3){ top: 80%; left: 70%; animation-delay: 0.9s;
}
.medium b:nth-of-type(4){ top: 60%; left: 10%; animation-delay: 0.35s;
}
.medium b:nth-of-type(5){ top: 30%; left: 50%; animation-delay: 1.7s;
}
.fast tt { transform: rotate(135deg); }
.fast s { animation-timing-function: linear; animation-duration: 1s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: sweep3;
}
.fast b { animation-timing-function: linear; animation-duration: 1s; animation-fill-mode: none; animation-iteration-count: infinite; animation-name: blip3;
}
.fast b:nth-of-type(1){ top: 20%; left: 70%; animation-delay: 0.77s;
}
.fast b:nth-of-type(2){ top: 60%; left: 30%; animation-delay: 0.2s;
}
.fast b:nth-of-type(3){ top: 80%; left: 70%; animation-delay: 0.45s;
}
.fast b:nth-of-type(4){ top: 60%; left: 10%; animation-delay: 0.17s;
}
.fast b:nth-of-type(5){ top: 30%; left: 50%; animation-delay: 0.83s;
}

CSS Radar, variable speed - Script Codes JS Codes

var knob = $("tt"), radar = $("#radar"), speed = ["slow", "medium", "fast"], count = 0;
knob.on("click", function(){ radar.removeClass(); count++; if(count != 3){ radar.addClass(speed[count]); }else{ count = 0; radar.addClass(speed[0]); }
});
CSS Radar, variable speed - Script Codes
CSS Radar, variable speed - Script Codes
Home Page Home
Developer Jesper Hills
Username nopr
Uploaded October 13, 2022
Rating 3
Size 4,382 Kb
Views 14,168
Do you need developer help for CSS Radar, variable speed?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jesper Hills (nopr) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!