Meditation bean
How do I make an meditation bean?
What is a meditation bean? How do you make a meditation bean? This script and codes were developed by BROWNERD on 14 December 2022, Wednesday.
Meditation bean - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Meditation bean</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="track"> <div class="spin"></div>
</div>
</body>
</html>
Meditation bean - Script Codes CSS Codes
body { background-color: #a0f; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; width: 100vw; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.track { height: 20vw; width: 20vw; border-radius: 50%; border: 20vw solid #333; position: relative;
}
.spin { height: 20vw; width: 20vw; border-radius: 50%; border-top: 20vw solid #f00; border-right: 20vw solid transparent; border-bottom: 20vw solid transparent; border-left: 20vw solid transparent; position: relative; -webkit-transform: translate(-33.3%, -33.3%) rotate(40deg); transform: translate(-33.3%, -33.3%) rotate(40deg); will-change: transform; -webkit-animation: spin 5s infinite ease-in-out; animation: spin 5s infinite ease-in-out;
}
.spin::after { content: ''; height: 20vw; width: 20vw; background-color: #f00; position: absolute; border-radius: 50%; -webkit-transform: translate(-71%, -71%); transform: translate(-71%, -71%);
}
.spin::before { content: ''; height: 20vw; width: 20vw; background-color: #f00; position: absolute; border-radius: 50%; -webkit-transform: translate(71%, -71%); transform: translate(71%, -71%);
}
@-webkit-keyframes spin { 50% { -webkit-transform: translate(-33.3%, -33.3%) rotate(320deg); transform: translate(-33.3%, -33.3%) rotate(320deg); }
}
@keyframes spin { 50% { -webkit-transform: translate(-33.3%, -33.3%) rotate(320deg); transform: translate(-33.3%, -33.3%) rotate(320deg); }
}
Developer | BROWNERD |
Username | brownerd |
Uploaded | December 14, 2022 |
Rating | 4 |
Size | 2,385 Kb |
Views | 20,240 |
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!
Name | Size |
Apple Cords | 5,941 Kb |
Always be... | 3,315 Kb |
Parellogram button | 2,021 Kb |
Book | 2,708 Kb |
Orlando Strong | 2,552 Kb |
Venn diagram animation | 2,827 Kb |
R EVOL UTION | 2,574 Kb |
C.Rowe Button | 2,473 Kb |
Lego Ziggy Stardust RIP David Bowie | 2,963 Kb |
Pacman 60fps study | 2,836 Kb |
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!
Name | Username | Size |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
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!