Psychedelic Slice
How do I make an psychedelic slice?
One third slice. Takes advantage of border-radius and overflow influencing pseudo-elements. Hover to see how it works.. What is a psychedelic slice? How do you make a psychedelic slice? This script and codes were developed by Chris Burnell on 16 September 2022, Friday.
Psychedelic Slice - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Psychedelic Slice</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Hover the slice! -->
<div class="curvy-arrow"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Psychedelic Slice - Script Codes CSS Codes
html,
body { background-color: cornsilk; height: 100%; position: relative;
}
.curvy-arrow { width: 300px; height: 300px; overflow: hidden; position: absolute; top: 50%; left: 50%; cursor: help; border-radius: 50%; -webkit-transform: translate3d(-50%, -75%, 0); transform: translate3d(-50%, -75%, 0); -webkit-transition: border-radius .5s 1s, background-color .5s 2s, -webkit-transform .5s 4s; transition: border-radius .5s 1s, background-color .5s 2s, -webkit-transform .5s 4s; transition: border-radius .5s 1s, background-color .5s 2s, transform .5s 4s; transition: border-radius .5s 1s, background-color .5s 2s, transform .5s 4s, -webkit-transform .5s 4s;
}
@media (max-width: 500px) { .curvy-arrow { width: 250px; height: 250px; }
}
.curvy-arrow:hover { background-color: rgba(0, 0, 0, 0.2); border-radius: 0; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-transition: background-color .5s 2s, border-radius .5s 3s, -webkit-transform .5s; transition: background-color .5s 2s, border-radius .5s 3s, -webkit-transform .5s; transition: transform .5s, background-color .5s 2s, border-radius .5s 3s; transition: transform .5s, background-color .5s 2s, border-radius .5s 3s, -webkit-transform .5s;
}
.curvy-arrow:before, .curvy-arrow:after { content: ""; background-color: purple; background-color: rebeccapurple; width: 50%; height: 50%; position: absolute; top: 50%; left: 50%; border-radius: 0 0 50% 0; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transition: border-radius .5s 1s, background-color .5s 3s, -webkit-transform .5s; transition: border-radius .5s 1s, background-color .5s 3s, -webkit-transform .5s; transition: transform .5s, border-radius .5s 1s, background-color .5s 3s; transition: transform .5s, border-radius .5s 1s, background-color .5s 3s, -webkit-transform .5s;
}
.curvy-arrow:before { -webkit-transform: rotate(60deg); transform: rotate(60deg);
}
.curvy-arrow:after { -webkit-transform: rotate(30deg); transform: rotate(30deg);
}
.curvy-arrow:hover:before, .curvy-arrow:hover:after { -webkit-transition: background-color .5s 1s, border-radius .5s 3s, -webkit-transform .5s 4s; transition: background-color .5s 1s, border-radius .5s 3s, -webkit-transform .5s 4s; transition: background-color .5s 1s, border-radius .5s 3s, transform .5s 4s; transition: background-color .5s 1s, border-radius .5s 3s, transform .5s 4s, -webkit-transform .5s 4s; -webkit-transform: none; transform: none; border-radius: 0;
}
.curvy-arrow:hover:before { background-color: rgba(30, 144, 255, 0.8);
}
.curvy-arrow:hover:after { background-color: rgba(205, 92, 92, 0.8);
}
Developer | Chris Burnell |
Username | chrisburnell |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 2,681 Kb |
Views | 26,312 |
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 |
Infinite Square | 2,937 Kb |
Globule Bleu Jobs Page Anchor Rollover Effect | 2,533 Kb |
Clock Face Idea | 3,196 Kb |
The Importance of Proper Navigational CSS | 3,165 Kb |
New Brandings | 5,617 Kb |
Interesting Hover Animation | 2,686 Kb |
Modal Container without JS | 3,272 Kb |
Stupid RTL Demo | 3,075 Kb |
Simple CSS Checkbox | 2,797 Kb |
Square Illusion | 3,295 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 |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Vue.js Starter | Andymerskin | 1,268 Kb |
Pagepilling.js | Blossk | 6,554 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!