项目介绍

FIQTOR/flowers-for-someone 是一个托管在 GitHub 上的开源项目,主要使用 SCSS 编写,目前获得 283 个 Star、845 次 Fork。

仓库全名
FIQTOR/flowers-for-someone
Star 数
283
Fork 数
845

README 摘要

🌸 Flowers for Someone A charming, animated web experience for gifting flowers to someone you love. Pure HTML, CSS & JavaScript — no frameworks, no build step. Landing page → click Open → a CSS-animated bouquet blooms and types out I LOVE U. ✨ What is this? Flowers for Someone is a tiny, self-contained website you can send to someone special. It opens on a quiet, starry night scene with a single glowing button. One…

完整内容见 GitHub 原始 README 或本页 。

常见问题

flowers-for-someone 用什么语言开发?

主要使用 SCSS 编写,目前有 283 个 Star。

如何获取 flowers-for-someone 的源码?

可以直接克隆仓库:git clone https://github.com/FIQTOR/flowers-for-someone.git,默认分支为 main;安装与运行步骤见仓库 README。

flowers-for-someone 最近还在维护吗?

仓库最近一次更新为 10月8日,当前没有未关闭的 Issue;Star 数为 283,可作为社区活跃度的参考。

关于

💐Resource flowers gift website for someone

描述取自 GitHub 官方 API,中文内容由 GitRead 中文社区 编辑团队整理。

简要分析

热度分
2018
价值分
427
活跃状态
活跃
暂无主题

语言占比

CSS
HTML
JavaScript
SCSS

Release

贡献者

README

🌸 Flowers for Someone

A charming, animated web experience for gifting flowers to someone you love.

Pure HTML, CSS & JavaScript — no frameworks, no build step.

Live Demo License Stars


Landing page Flower animation

Landing page → click Open → a CSS-animated bouquet blooms and types out I LOVE U.


✨ What is this?

Flowers for Someone is a tiny, self-contained website you can send to someone special. It opens on a quiet, starry night scene with a single glowing button. One click reveals a bouquet built entirely from CSS — petals, stems, leaves and lights — while a message types itself out letter by letter.

No backend. No dependencies. No build tools. Just open it and it works.

🎬 How it works

Step Page What happens
1 index.html Starry night background, glowing “I Have Something” title with staggered fade-in, and an Open button.
2 flower.html A bouquet animates into bloom (pure CSS @keyframes), then “I LOVE U” types out one character at a time.

🛠️ Tech Stack

HTML5 CSS3 Sass JavaScript

  • HTML5 — semantic markup
  • CSS3 / SCSS — all animation, gradients and the flower itself
  • JavaScript — the title/typing effects (js/index.js, js/main.js)

🚀 Run locally

# 1. Clone
git clone https://github.com/FIQTOR/flowers-for-someone.git
cd flowers-for-someone

# 2. Serve (any static server works)
npx serve .
# or: python3 -m http.server 8000

Then open http://localhost:8000 and click Open.

💡 A local server is recommended over opening index.html directly, so the SCSS/CSS and relative asset paths resolve cleanly.

📁 Project structure

flowers-for-someone/
├── index.html            # landing page ("I Have Something")
├── flower.html           # the animated bouquet + "I LOVE U"
├── css/
│   ├── index.css         # landing page styles
│   └── style.css         # flower animation styles
├── scss/
│   └── style.scss        # source for style.css
├── js/
│   ├── index.js          # staggered title animation
│   └── main.js           # typing effect for the message
├── images/
│   └── gift.png          # favicon
└── docs/                 # README screenshots

🎨 Customize it

Want to make it yours? A few one-line tweaks:

What Where Change
The message js/main.js ('I LOVE U') → your own text
The intro line js/index.js I Have Something → your own text
Typing speed js/main.js the setTimeout(..., 300) delay
Colors scss/style.scss recompile to css/style.css

💬 Have a message to send?

This repo gets a lot of love letters 🙂 — and that’s wonderful! To keep the issue tracker focused on bugs and features, personal messages and customisation requests go to Discussions.

Issue tracker = 🐛 bugs & ✨ feature requests only.

🤝 Contributing

Contributions, ideas and forks are welcome! Please open an issue (bug/feature) or submit a pull request.

  1. Fork the project
  2. Create your branch (git checkout -b feature/amazing-idea)
  3. Commit your changes (git commit -m 'feat: add amazing idea')
  4. Push and open a Pull Request

☕ Support this project

If this template helped you make someone smile, you can buy me a coffee — it keeps the flowers blooming 🌸

Buy Me A Coffee

📄 License

Released under the MIT License — free to use, modify and share.

Made with ❤️ and a little CSS magic by FIQTOR

评论

暂无评论