Maple Blossom

Developer
Anya Craig
Size
4,588 Kb
Views
56,672
  1. Maple Blossom Previews
  2. Maple Blossom HTML Codes
  3. Maple Blossom CSS Codes
  4. Maple Blossom JS Codes

How do I make an maple blossom?

A silly maple leaf thing made with CSS shapes and transforms. I made this!. What is a maple blossom? How do you make a maple blossom? This script and codes were developed by Anya Craig on 27 October 2022, Thursday.

Maple Blossom Previews
IQ Test

Maple Blossom - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Maple Blossom</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button id="button">do the thing</button>
<div class="wrapper"> <div class="container initial"> <div class="leaf stem"></div> <!-- the four left leaf points - bottom to top --> <div class="leaf left-1"></div> <div class="leaf left-2"></div> <div class="leaf left-3"></div> <div class="leaf left-4"></div> <!-- the three top leaf points - left to right --> <div class="leaf top-1"></div> <div class="leaf top-2"></div> <div class="leaf top-3"></div> <!-- the four right leaf points - bottom to top --> <div class="leaf right-1"></div> <div class="leaf right-2"></div> <div class="leaf right-3"></div> <div class="leaf right-4"></div> </div> <h1 class="message initial">o canada</h1>
</div> <script src='js/https___codepen_io_steveg.js'></script> <script src="js/index.js"></script>
</body>
</html>

Maple Blossom - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Fresca');
body { position: relative; background-color: #130028;
}
.wrapper { position: relative; overflow: hidden;
}
.message { font-family: 'Fresca', sans-serif; font-size: 80px; color: #fff9f9; text-align: center; text-transform: uppercase; letter-spacing: 6px; position: absolute; top: 280px; right: 0; left: 0; margin: auto; opacity: 0; transition: 1s all cubic-bezier(.86,.11,.48,1.25); transform: scale(2.0);
}
.message.initial { opacity: 1; transform: scale(1);
}
.container { width: 600px; height: 600px; margin: 0 auto; position: relative; transform: rotate(0deg); transition: all 1s ease-in-out; pointer-events: none;
}
.container.initial { opacity: 0; transform: rotate(180deg);
}
#button { position: absolute; padding: 15px 20px; width: 230px; background: #ed0000; border: 0; text-transform: uppercase; font-family: 'Fresca', sans-serif; font-size: 24px; color: #130028; letter-spacing: 1px; margin: 15px; transition: all 0.5s ease-in-out; cursor: pointer; z-index: 1000;
}
#button:hover { background: #ff4016; transform: scale(1.05);
}
.leaf { position: absolute; transition: all 1s cubic-bezier(.86,.11,.46,1.53);
}
.stem { width: 0; height: 0; border-bottom: 250px solid #ef0000; border-right: 10px solid transparent; border-left: 10px solid transparent; margin: 0 auto; top: 300px; right: 0; left: 0;
}
.initial .stem { transform: translateY(-200px);
}
.left-1 {	width: 0;	height: 0;	border-bottom: 150px solid #ff2d16;	border-left: 190px solid transparent; top: 315px; left: 140px; transform: rotate(-10deg);
}
.initial .left-1 { transform: rotate(0deg) translateX(50px);
}
.left-2 {	width: 0;	height: 0;	border-top: 70px solid transparent;	border-right: 250px solid #ff2d16;	border-bottom: 70px solid transparent; top: 310px; left: 50px; transform: rotate(3deg);
}
.initial .left-2 { transform: rotate(90deg) translateX(-40px) translateY(-100px);
}
.left-3 { width: 0;	height: 0;	border-top: 90px solid transparent;	border-right: 300px solid #ff2d16;	border-bottom: 90px solid transparent; top: 230px; left: 0px; transform: rotate(25deg);
}
.initial .left-3 { transform: rotate(90deg) translateY(-140px) translateX(-10px);
}
.left-4 { width: 0;	height: 0;	border-top: 70px solid transparent;	border-right: 250px solid #ff2d16;	border-bottom: 70px solid transparent; top: 230px; left: 70px; transform: rotate(40deg);
}
.initial .left-4 { transform: rotate(90deg) translateY(-90px);
}
.top-1 { width: 0; height: 0; border-bottom: 290px solid #ff2d16; border-left: 70px solid transparent; border-right: 70px solid transparent; left: 170px; top: 80px; transform: rotate(-20deg);
}
.initial .top-1 { transform: rotate(0deg) translateX(50px);
}
.top-2 { width: 0; height: 0; border-bottom: 350px solid #ed0000; border-left: 100px solid transparent; border-right: 100px solid transparent; margin: 0 auto; top: 20px; left: 0; right: 0;
}
.initial .top-2 { transform: translateY(50px) scale(1.3);
}
.top-3 { width: 0; height: 0; border-bottom: 290px solid #ed0000; border-left: 70px solid transparent; border-right: 70px solid transparent; top: 80px; right: 170px; transform: rotate(20deg);
}
.initial .top-3 { transform: rotate(0deg) translateX(-50px);
}
.right-1 {	width: 0;	height: 0;	border-bottom: 150px solid #ed0000;	border-right: 190px solid transparent; top: 315px; right: 140px; transform: rotate(10deg);
}
.initial .right-1{ transform: rotate(0deg) translateX(-50px);
}
.right-2 {	width: 0;	height: 0;	border-top: 70px solid transparent;	border-left: 250px solid #ed0000;	border-bottom: 70px solid transparent; top: 310px; right: 50px; transform: rotate(-3deg);
}
.initial .right-2 { transform: rotate(-90deg) translateX(40px) translateY(-100px);
}
.right-3 { width: 0;	height: 0;	border-top: 90px solid transparent;	border-left: 300px solid #ed0000;	border-bottom: 90px solid transparent; top: 230px; right: 0px; transform: rotate(-25deg);
}
.initial .right-3 { transform: rotate(-90deg) translateY(-140px) translateX(10px);
}
.right-4 { width: 0;	height: 0;	border-top: 70px solid transparent;	border-left: 250px solid #ed0000;	border-bottom: 70px solid transparent; top: 230px; right: 70px; transform: rotate(-40deg);
}
.initial .right-4 { transform: rotate(-90deg) translateY(-90px);
}

Maple Blossom - Script Codes JS Codes

var container = document.querySelector(".container");
var button = document.querySelector("#button");
var messageEl = document.querySelector(".message");
var messageInitial = "Do the thing";
var messageAfter = "Undo the thing";
// listen for click on button and toggle stuff
button.addEventListener("click", function() { if (container.classList.contains("initial")){ container.classList.remove("initial"); messageEl.classList.remove("initial"); button.innerHTML = messageAfter; } else { container.classList.add("initial"); messageEl.classList.add("initial"); button.innerHTML = messageInitial; }
});
Maple Blossom - Script Codes
Maple Blossom - Script Codes
Home Page Home
Developer Anya Craig
Username AnyaCraig
Uploaded October 27, 2022
Rating 3
Size 4,588 Kb
Views 56,672
Do you need developer help for Maple Blossom?

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!

Anya Craig (AnyaCraig) Script Codes
Name
Flex Baseline Test
Text with Background Gradients and Text-Shadows
Hover Effect Hodge-Podge
Fair to Foul
Bee flight animation using Snap.svg
Responsive Square with Background Image
Animating background foofs
Rainbow Pride Slide
Pawprints animation
Overlay Hover Effect
Create amazing SEO content 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!