A Pen by Aaron Levine
How do I make an a pen by aaron levine?
What is a a pen by aaron levine? How do you make a a pen by aaron levine? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.
A Pen by Aaron Levine - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Aaron Levine</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta content='width=device-width, minimum-scale=1, maximum-scale=1' name='viewport'>
<body class='green'></body>
<div class='container'> <div class='circle white'> <div class='ico ham green'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.2/fastclick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Aaron Levine - Script Codes CSS Codes
.circle, .box { width: 4rem; height: 4rem; cursor: pointer;
}
.circle, .circle:before, .circle:after, .box, .box:before, .box:after { position: relative; display: inline-block; box-sizing: border-box; z-index: 1; -webkit-transition: all 0.3s cubic-bezier(0.19, 0.36, 0.67, 0.97), border-radius 0.5s cubic-bezier(0.46, 0.1, 0.2, 1.51); -moz-transition: all 0.3s cubic-bezier(0.19, 0.36, 0.67, 0.97); -ms-transition: all 0.3s cubic-bezier(0.19, 0.36, 0.67, 0.97); -o-transition: all 0.3s cubic-bezier(0.19, 0.36, 0.67, 0.97); transition: all 0.3s cubic-bezier(0.19, 0.36, 0.67, 0.97), border-radius 0.3s cubic-bezier(0.46, 0.1, 0.2, 1.51);
}
.circle:before, .box:before { content: ''; position: absolute; background: transparent; box-shadow: #FFF 0 0 0 4px; z-index: 0; width: 32rem; height: 32rem; -webkit-transform: translate(-43.75%, -43.75%) scale3d(0, 0, 0); -moz-transform: translate(-43.75%, -43.75%) scale3d(0, 0, 0); -ms-transform: translate(-43.75%, -43.75%) scale3d(0, 0, 0); -o-transform: translate(-43.75%, -43.75%) scale3d(0, 0, 0); transform: translate(-43.75%, -43.75%) scale3d(0, 0, 0);
}
.box, .box:before { border-radius: 50%;
}
.box:before { -webkit-animation: breathe-out 0.75s ease-out;
}
.circle, .circle:before { border-radius: 50%;
}
.circle:before { -webkit-animation: breathe-in 0.75s ease-out;
}
.white { background-color: #FFF;
}
.red, .red:before, .red:after { background-color: #FF4D4D;
}
.red-d25, .red-d25:before, .red-d25:after { background-color: #cd0000;
}
.green, .green:before, .green:after { background-color: #5E91FF;
}
.green-d25, .green-d25:before, .green-d25:after { background-color: #0046de;
}
.ico { position: absolute; top: 50%; left: 50%; margin-left: -1em; margin-top: -1em; display: inline-block; width: 2em; height: 2em;
}
.ico, .ico:before, .ico:after { -webkit-transition: all 0.5s cubic-bezier(0.46, 0.1, 0.2, 1.51); -moz-transition: all 0.5s cubic-bezier(0.46, 0.01, 0.2, 1.51); -ms-transition: all 0.5s cubic-bezier(0.46, 0.01, 0.2, 1.51); -o-transition: all 0.5s cubic-bezier(0.46, 0.01, 0.2, 1.51); transition: all 0.5s cubic-bezier(0.46, 0.1, 0.2, 1.51);
}
.ico.ham { border-radius: 50% / 50%; margin-top: -0.125em; height: 0.25em;
}
.ico.ham:before, .ico.ham:after { content: ''; position: absolute; display: inline-block; border-radius: 50% / 50%; width: 2em; height: 0.25em;
}
.ico.ham:before { top: -0.8em; -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg);
}
.ico.ham:after { top: 0.8em; -webkit-transform: rotate3d(0, 0, 0, 360deg); -moz-transform: rotate3d(0, 0, 0, 360deg); -ms-transform: rotate3d(0, 0, 0, 360deg); -o-transform: rotate3d(0, 0, 0, 360deg); transform: rotate3d(0, 0, 0, 360deg);
}
.ico.x { background-color: transparent; margin-top: -0.125em; height: 0.25em;
}
.ico.x:before, .ico.x:after { content: ''; position: absolute; top: 50%; bottom: 50%; display: inline-block; border-radius: 50% / 100%; width: 2.82843em; height: 0.25em; margin-top: -0.125em; margin-left: -0.33333em;
}
.ico.x:before { -webkit-transform: rotate3d(0, 0, 1, 315deg); -moz-transform: rotate3d(0, 0, 1, 315deg); -ms-transform: rotate3d(0, 0, 1, 315deg); -o-transform: rotate3d(0, 0, 1, 315deg); transform: rotate3d(0, 0, 1, 315deg);
}
.ico.x:after { -webkit-transform: rotate3d(0, 0, 1, 405deg); -moz-transform: rotate3d(0, 0, 1, 405deg); -ms-transform: rotate3d(0, 0, 1, 405deg); -o-transform: rotate3d(0, 0, 1, 405deg); transform: rotate3d(0, 0, 1, 405deg);
}
.container { position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
}
body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; -webkit-transition: all 0.3s cubic-bezier(0.19, 0.36, 0.67, 0.97); -moz-transition: all 0.3s cubic-bezier(0.19, 0.36, 0.67, 0.97); -ms-transition: all 0.3s cubic-bezier(0.19, 0.36, 0.67, 0.97); -o-transition: all 0.3s cubic-bezier(0.19, 0.36, 0.67, 0.97); transition: all 0.3s cubic-bezier(0.19, 0.36, 0.67, 0.97);
}
@-webkit-keyframes breathe-in { 100% { -webkit-transform: translate(-43.75%, -43.75%) scale3d(1, 1, 1); opacity: 0; }
}
@-webkit-keyframes breathe-out { 100% { -webkit-transform: translate(-43.75%, -43.75%) scale3d(1, 1, 1); opacity: 0; }
}
A Pen by Aaron Levine - Script Codes JS Codes
$('.circle, .box').on('click', function(){ var $this = $(this); $this.toggleClass('circle box'); $this.find('.ico').toggleClass('ham x red green'); $('body').toggleClass('red green');
});
//For Responsiveness
FastClick.attach(document.body);
Developer | Aaron Levine |
Username | Aldlevine |
Uploaded | January 30, 2023 |
Rating | 4 |
Size | 4,042 Kb |
Views | 6,072 |
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 |
Custom Scroll with Momentum and Parallax | 8,441 Kb |
Sliding Single Select | 3,968 Kb |
Nav-Bar and Tab-Bar Layout | 3,936 Kb |
Progress | 2,659 Kb |
Canvas Falloff Test | 2,989 Kb |
Blowout Menu | 4,712 Kb |
Touch Hover | 2,764 Kb |
Mobile App Design | 9,243 Kb |
Colorful Slider Graph | 5,199 Kb |
Faceful Cubes | 3,721 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 |
JavaScript constructors | Simboonlong | 2,415 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
A cube | KyleDavidE | 18,627 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
Calendar | Miroot | 2,033 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Materializecss input form | Jasonchan | 1,443 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!