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 |
C.Rowe Button | 2,473 Kb |
Love for Paris | 3,200 Kb |
Potted pastel flowers | 4,415 Kb |
Lego Ziggy Stardust RIP David Bowie | 2,963 Kb |
3 rad blend-mode techniques | 8,214 Kb |
Cool Beans Button 60fps | 2,912 Kb |
The 4 grid techniques | 6,969 Kb |
Circle | 11,842 Kb |
FCC Tribute page | 6,871 Kb |
Chunky Nav buttons, centered, no floats | 2,456 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 |
Simple Accordion | Wearebold | 3,683 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Three js | Paulq | 2,353 Kb |
Website Concept | Sagoza | 3,104 Kb |
Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 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!