Thing

Developer

Size

4,534 Kb

Views

22,264

Thing Previews
Thing HTML Codes
Thing CSS Codes
Thing JS Codes

How do I make an thing?

What is a thing? How do you make a thing? This script and codes were developed by Anton Kalinin on 28 November 2022, Monday.

Thing Previews

Thing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>thing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="middle"> <div class="glow"></div> <div class="lens-pad"></div> <div class="lens"></div> <div class="flare"></div> <div class="box"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Thing - Script Codes CSS Codes

@-webkit-keyframes glow_spin { from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); background-position: 0px 0px; } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background-position: 230px 0px; }
}
@-moz-keyframes glow_spin { from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); background-position: 0px 0px; } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background-position: 230px 0px; }
}
@-ms-keyframes glow_spin { from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); background-position: 0px 0px; } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background-position: 230px 0px; }
}
@keyframes glow_spin { from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); background-position: 0px 0px; } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background-position: 230px 0px; }
}
@-webkit-keyframes spin { from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); background-position: 0px 0px; } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background-position: 200px 0px; }
}
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); background-position: 0px 0px; } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background-position: 200px 0px; }
}
@-ms-keyframes spin { from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); background-position: 0px 0px; } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background-position: 200px 0px; }
}
@keyframes spin { from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); background-position: 0px 0px; } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background-position: 200px 0px; }
}
body { background-color: #000; background-image: url(https://subtlepatterns.com/patterns/simple_dashed.png);
}
.middle { width: 200px; height: 200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
}
.lens-pad { width: 150px; height: 150px; background: #333; position: absolute; border-radius: 9999px; margin: auto; left: 20px; right: 0; top: 20px; bottom: 0; z-index: 1;
}
.lens-pad:before, .lens-pad:after { border-radius: 9999px; position: absolute; content: ""; width: inherit; height: inherit;
}
.lens-pad:before { box-shadow: 0px 0px 0px 10px #444 inset, 0px 0px 10px 10px #000 inset;
}
.lens { width: 110px; height: 110px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMTYlIiBzdG9wLWNvbG9yPSIjOTkwMGZmIi8+PHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiMwOTAwZmYiLz48c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzAwZGFmNyIvPjxzdG9wIG9mZnNldD0iNjglIiBzdG9wLWNvbG9yPSIjMDBmNTFkIi8+PHN0b3Agb2Zmc2V0PSI4NCUiIHN0b3AtY29sb3I9IiNmNWU5MDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ff0000), color-stop(16%, #9900ff), color-stop(33%, #0900ff), color-stop(51%, #00daf7), color-stop(68%, #00f51d), color-stop(84%, #f5e900), color-stop(100%, #ff0000)); background-image: -moz-linear-gradient(left top, #ff0000 0%, #9900ff 16%, #0900ff 33%, #00daf7 51%, #00f51d 68%, #f5e900 84%, #ff0000 100%); background-image: -webkit-linear-gradient(left top, #ff0000 0%, #9900ff 16%, #0900ff 33%, #00daf7 51%, #00f51d 68%, #f5e900 84%, #ff0000 100%); background-image: linear-gradient(to right bottom, #ff0000 0%, #9900ff 16%, #0900ff 33%, #00daf7 51%, #00f51d 68%, #f5e900 84%, #ff0000 100%); position: absolute; border-radius: 9999px; margin: auto; left: 20px; right: 0; top: 20px; bottom: 0; z-index: 2;
}
.lens:before, .lens:after { border-radius: 9999px; position: absolute; content: ""; width: inherit; height: inherit;
}
.lens:before { box-shadow: 0px 0px 0px 10px #444 inset, 0px 0px 30px 20px #000 inset;
}
.flare { width: 90px; height: 90px; background-size: 100% 80%; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjZmOCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZDhlMWU3IiBzdG9wLW9wYWNpdHk9IjAuNSIvPjxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjYjVjNmQwIiBzdG9wLW9wYWNpdHk9IjAuNDkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlMGVmZjkiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(center, ellipse cover, #f2f6f8 0%, rgba(216, 225, 231, 0.5) 50%, rgba(181, 198, 208, 0.49) 51%, rgba(224, 239, 249, 0) 100%); background-image: -webkit-radial-gradient(center, ellipse cover, #f2f6f8 0%, rgba(216, 225, 231, 0.5) 50%, rgba(181, 198, 208, 0.49) 51%, rgba(224, 239, 249, 0) 100%); background-image: radial-gradient(ellipse cover at center, #f2f6f8 0%, rgba(216, 225, 231, 0.5) 50%, rgba(181, 198, 208, 0.49) 51%, rgba(224, 239, 249, 0) 100%); position: absolute; border-radius: 9999px; margin: auto; left: 20px; right: 0; top: 20px; bottom: 0; z-index: 2; opacity: 0.8;
}
.glow { left: -5px; top: -5px; z-index: -1; position: absolute; width: 230px; height: 230px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMTYlIiBzdG9wLWNvbG9yPSIjOTkwMGZmIi8+PHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiMwOTAwZmYiLz48c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzAwZGFmNyIvPjxzdG9wIG9mZnNldD0iNjglIiBzdG9wLWNvbG9yPSIjMDBmNTFkIi8+PHN0b3Agb2Zmc2V0PSI4NCUiIHN0b3AtY29sb3I9IiNmNWU5MDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ff0000), color-stop(16%, #9900ff), color-stop(33%, #0900ff), color-stop(51%, #00daf7), color-stop(68%, #00f51d), color-stop(84%, #f5e900), color-stop(100%, #ff0000)); background-image: -moz-linear-gradient(left, #ff0000 0%, #9900ff 16%, #0900ff 33%, #00daf7 51%, #00f51d 68%, #f5e900 84%, #ff0000 100%); background-image: -webkit-linear-gradient(left, #ff0000 0%, #9900ff 16%, #0900ff 33%, #00daf7 51%, #00f51d 68%, #f5e900 84%, #ff0000 100%); background-image: linear-gradient(to right, #ff0000 0%, #9900ff 16%, #0900ff 33%, #00daf7 51%, #00f51d 68%, #f5e900 84%, #ff0000 100%); -o-animation: glow_spin 2s infinite linear; -moz-animation: glow_spin 2s infinite linear; -webkit-animation: glow_spin 2s infinite linear; animation: glow_spin 2s infinite linear; border-radius: 9999px; -webkit-filter: blur(10px) grayscale(0.6) opacity(0.6); filter: blur(10px) grayscale(0.6) opacity(0.6);
}
.box { width: inherit; height: inherit; border: 10px solid #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); border-radius: 9999px;
}
.box:before, .box:after { position: absolute; content: ""; width: inherit; height: inherit;
}
.box:before { width: inherit; height: inherit; -o-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; border-radius: 9999px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMTYlIiBzdG9wLWNvbG9yPSIjOTkwMGZmIi8+PHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiMwOTAwZmYiLz48c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzAwZGFmNyIvPjxzdG9wIG9mZnNldD0iNjglIiBzdG9wLWNvbG9yPSIjMDBmNTFkIi8+PHN0b3Agb2Zmc2V0PSI4NCUiIHN0b3AtY29sb3I9IiNmNWU5MDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ff0000), color-stop(16%, #9900ff), color-stop(33%, #0900ff), color-stop(51%, #00daf7), color-stop(68%, #00f51d), color-stop(84%, #f5e900), color-stop(100%, #ff0000)); background-image: -moz-linear-gradient(left, #ff0000 0%, #9900ff 16%, #0900ff 33%, #00daf7 51%, #00f51d 68%, #f5e900 84%, #ff0000 100%); background-image: -webkit-linear-gradient(left, #ff0000 0%, #9900ff 16%, #0900ff 33%, #00daf7 51%, #00f51d 68%, #f5e900 84%, #ff0000 100%); background-image: linear-gradient(to right, #ff0000 0%, #9900ff 16%, #0900ff 33%, #00daf7 51%, #00f51d 68%, #f5e900 84%, #ff0000 100%); -webkit-filter: grayscale(0.3) blur(5px); filter: grayscale(0.3) blur(5px);
}
.box:after { border-radius: 9999px; width: 165px; height: 165px; background: #fff; border: 10px solid #fff; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3) inset; margin-top: 8px; margin-left: 8px;
}

Thing - Script Codes JS Codes

(function() {
}).call(this);

Home Page	Home
Developer	Anton Kalinin
Username	ssh
Uploaded	November 28, 2022
Rating	4
Size	4,534 Kb
Views	22,264

Do you need developer help for Thing?

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!

Anton Kalinin (ssh) Script Codes

Name	Size
Battlefield 4	2,888 Kb
Schulte Table	4,555 Kb
Memo	1,984 Kb
Octagon load animation	4,778 Kb
A Pen by Anton Kalinin	5,156 Kb
Thermostat	5,307 Kb
Aurora	2,695 Kb
Magic 8-ball	8,040 Kb

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!

Similar Scripts & Codes

Name	Username	Size
Tab Menus	Zephyr	3,180 Kb
Form Labels	Bartuc	2,717 Kb
Responsive Minimal Blog Layout	Hackthevoid	5,261 Kb
Importable Clearfix	Corysimmons	1,411 Kb
Javascript Welcome	Peterlewicki	1,573 Kb
PNotify Demo	Adittmar	1,731 Kb
Toggling Divs with jQuery	Yying6	1,967 Kb
Lightrays v2	Sinthetyc	2,903 Kb
Update CSS Variables with JS	Wesbos	2,335 Kb
A Different Type of Gallery	DonPage	2,950 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!