Hypnoring thing 2.5D

Developer
Sabin Tudor
Size
5,907 Kb
Views
12,144
  1. Hypnoring thing 2.5D Previews
  2. Hypnoring thing 2.5D HTML Codes
  3. Hypnoring thing 2.5D CSS Codes

How do I make an hypnoring thing 2.5d?

Random hypno ring thing.. What is a hypnoring thing 2.5d? How do you make a hypnoring thing 2.5d? This script and codes were developed by Sabin Tudor on 03 January 2023, Tuesday.

Hypnoring thing 2.5D Previews
IQ Test

Hypnoring thing 2.5D - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hypnoring thing 2.5D</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/aykgj.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="frame"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> <div class="circle circle-4"></div> <div class="circle circle-5"></div> <div class="circle circle-6"></div> <div class="circle circle-7"></div> <div class="circle circle-8"></div> <div class="circle circle-9"></div> <div class="circle circle-10"></div> <div class="circle circle-11"></div> <div class="circle circle-12"></div> <div class="circle circle-13"></div> <div class="circle circle-14"></div> <div class="circle circle-15"></div> <div class="circle circle-16"></div> <div class="circle circle-17"></div> <div class="circle circle-18"></div> <div class="circle circle-19"></div> <div class="circle circle-20"></div> <div class="circle circle-21"></div> <div class="circle circle-22"></div> <div class="circle circle-23"></div> <div class="circle circle-24"></div> <div class="circle circle-25"></div> <div class="circle circle-26"></div> <div class="circle circle-27"></div> <div class="circle circle-28"></div> <div class="circle circle-29"></div> <div class="circle circle-30"></div> <div class="circle circle-31"></div> <div class="circle circle-32"></div> <div class="circle circle-33"></div> <div class="circle circle-34"></div> <div class="circle circle-35"></div> <div class="circle circle-36"></div> <div class="circle circle-37"></div> <div class="circle circle-38"></div> <div class="circle circle-39"></div> <div class="circle circle-40"></div> <div class="circle circle-41"></div> <div class="circle circle-42"></div> <div class="circle circle-43"></div> <div class="circle circle-44"></div> <div class="circle circle-45"></div> <div class="circle circle-46"></div> <div class="circle circle-47"></div> <div class="circle circle-48"></div> <div class="circle circle-49"></div> <div class="circle circle-50"></div>
</div>
</body>
</html>

Hypnoring thing 2.5D - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
// settings
$frame-size: 500px;
body {	position: relative;	background: #8D19BD;	overflow: hidden;
}
.frame {	@include translateCenter; width: $frame-size; height: $frame-size;	background: #9b59b6;	overflow: hidden;	border-radius: 50%;	box-shadow: 1px 100px 40px -10px rgba(0, 0, 0, 0.12); color: #fff;	font-family: 'Open Sans', Helvetica, sans-serif;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale;	@include noflicker;	transform: translate(-50%, -50%) rotateX(10deg);	animation: hover 16s ease-in-out 3s infinite alternate;	&:after {	content: '';	@include positionCenter;	width: 100%;	height: 100%;	}
}
.circle {	@include positionCenter;	width: 50%;	height: 50%;	border-radius: 50%;	border: 2px dotted #fff;	// force HA	@include noflicker;	transform-origin: 50% 50%;
}
@for $i from 1 through 50 {	.circle-#{$i} {	animation: circle 10s ease-in-out ($i / -5)+s infinite both;	z-index: $i;	}
}
@keyframes circle {	0% {	transform: scale(0) translate(0px, -200px);	opacity: 0.4;	}	100% {	transform: scale(2.5) translate(0, 0);	opacity: 1;	}
}
@keyframes hover {	0% {	transform: translate(-50%, -50%) rotateX(10deg);	box-shadow: 1px 100px 40px -10px rgba(0, 0, 0, 0.12);	}	30% {	transform: translate(-50%, -50%) rotateX(60deg);	box-shadow: 1px 120px 30px -20px rgba(0, 0, 0, 0.2);	}	100% {	transform: translate(-50%, -70%) rotateX(80deg) scale(1.1);	box-shadow: 1px 100px 50px 0px rgba(0, 0, 0, 0.3);	}
}
Hypnoring thing 2.5D - Script Codes
Hypnoring thing 2.5D - Script Codes
Home Page Home
Developer Sabin Tudor
Username NyX
Uploaded January 03, 2023
Rating 3
Size 5,907 Kb
Views 12,144
Do you need developer help for Hypnoring thing 2.5D?

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!

Sabin Tudor (NyX) Script Codes
Name
Parallax landing test
Strings
Animated skewed panes
Meet Squiggly - a SVG goo guy
SVG low-poly background anim
Round Calendar
Infiniti circlez
SCSS test
Bits particle
BBQ
Create amazing captions 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!