How can I add confetti to my Webflow site using CodePen and CSS?
To add confetti to your Webflow site using CodePen and CSS, follow these steps:
1. Go to CodePen (codepen.io) and sign up for an account if you don't already have one.
2. Create a new Pen by clicking on the "New Pen" button.
3. In the HTML section of the Pen, add a container element where you want the confetti to appear. For example, you can use a `
```html
\`\`\`4. In the CSS section of the Pen, add the following CSS code to create the confetti effect:
```css
.confetti-container {
position: relative;
height: 100vh;
background-color: #000;
overflow: hidden;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #f00;
border-radius: 50%;
animation: confetti-anim 6s infinite;
}
@keyframes confetti-anim {
0% {
top: -10px;
opacity: 0.5;
transform: rotate(0deg) translateX(0);
}
100% {
top: 100vh;
opacity: 0;
transform: rotate(360deg) translateX(200px);
}
}
```
This CSS code sets up a confetti-container element that acts as a container for the confetti. The confetti elements themselves have a circular shape and move from top to bottom in a rotating and translating motion.
5. Now, click on the "Save" button to save your Pen.
6. To embed the confetti in your Webflow site, copy the embed code available in the CodePen interface. It will look something like this:
```html
\`\`\`7. In your Webflow site, open the page or element where you want to add the confetti.
8. Add an embed component to that page or element by drag-and-dropping it from the Add panel or using the shortcut `CMD/CTRL + E`.
9. Paste the embed code from CodePen into the embed component in Webflow.
10. Adjust the height and width of the embed component to fit the confetti container if needed.
11. Save and publish your Webflow site to see the confetti effect in action.
By following these steps, you can add confetti to your Webflow site using CodePen and CSS. Feel free to customize the CSS code to match your desired style and adjust the confetti animation as per your preferences.