{"id":25091374,"url":"https://github.com/tuyangjs/hiveweb_denlong","last_synced_at":"2026-02-25T18:37:11.955Z","repository":{"id":154354997,"uuid":"586157890","full_name":"tuyangJs/hiveweb_denlong","owner":"tuyangJs","description":"蜂巢官网的灯笼，使用css绘制","archived":false,"fork":false,"pushed_at":"2023-01-07T06:43:15.000Z","size":314,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-16T15:00:32.570Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://sns.hiveai.cc/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tuyangJs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-07T06:09:53.000Z","updated_at":"2023-01-10T19:52:07.000Z","dependencies_parsed_at":"2024-06-10T12:35:36.966Z","dependency_job_id":"5814eb97-32d4-4853-adcd-66cd648c751b","html_url":"https://github.com/tuyangJs/hiveweb_denlong","commit_stats":null,"previous_names":["tuyangjs/hiveweb_denlong","iyuli/hiveweb_denlong"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tuyangJs/hiveweb_denlong","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuyangJs%2Fhiveweb_denlong","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuyangJs%2Fhiveweb_denlong/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuyangJs%2Fhiveweb_denlong/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuyangJs%2Fhiveweb_denlong/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tuyangJs","download_url":"https://codeload.github.com/tuyangJs/hiveweb_denlong/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuyangJs%2Fhiveweb_denlong/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29834631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T17:57:15.019Z","status":"ssl_error","status_checked_at":"2026-02-25T17:56:11.472Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-07T13:20:02.976Z","updated_at":"2026-02-25T18:37:11.927Z","avatar_url":"https://github.com/tuyangJs.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 蜂巢官网的灯笼效果\n复制其中的style样式和div即可，已优化移动端观感。\n\n![](https://github.com/iyuli/hiveweb_denlong/blob/main/pern.png?raw=true)\n## 查看实际效果：\n[蜂巢官网](https://sns.hiveai.cc/)\n\n## 样式代码\n\n\n```HTML\n\u003cstyle\u003e[class^=lantern],[class^=lantern]:before,[class^=lantern]:after{-webkit-box-sizing:border-box;box-sizing:border-box}.lantern-left,.lantern-right{position:fixed;top:0;z-index:9999;pointer-events:none}.lantern-left{left: 150px;}.lantern-right{right: 150px;}.lantern-container{width:150px;height:100px;position:relative;line-height:0;-webkit-animation:lantern 5s infinite ease-in-out;animation:lantern 5s infinite ease-in-out;-webkit-transform-origin:50% -100px;transform-origin:50% -100px}.lantern-center{position:relative;height:100%;background-color:red;border-radius:120px;-webkit-box-shadow:0 0 80px -10px #f00;box-shadow:0 0 80px -10px red}.lantern-line{height:100%;text-align:center}.lantern-line:before,.lantern-line:after{content:\"\";position:absolute;top:0;left:50%;border:2px solid #ecaa2f;border-radius:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%)}.lantern-line:before{width:75%;height:100%}.lantern-line:after{width:35%;height:100%}.lantern-text-wrap{display:inline-block;vertical-align:top;height:100%}.lantern-text{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:28px;font-weight:700;color:#ecaa2f;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;text-align:center;letter-spacing:5px}.lantern-top,.lantern-bottom{width:40%;height:8px;background-color:#ecaa2f;position:relative;z-index:1}.lantern-top{margin:0 auto -2px;border-radius:5px 5px 0 0}.lantern-bottom{margin:-2px auto 0;border-radius:0 0 5px 5px}.lantern-top-rope,.lantern-bottom-rope{width:4px;background-color:#ecaa2f;margin:0 auto}.lantern-top-rope{height: 65px;}.lantern-bottom-rope{position:relative;height:20px;-webkit-animation:lantern 3s infinite ease-in-out;animation:lantern 3s infinite ease-in-out;-webkit-transform-origin:50% -45px;transform-origin:50% -45px}.lantern-bottom-rope:after{content:\"\";position:absolute;top:100%;left:-4px;width:12px;height:50px;background:linear-gradient(#f00,#e36d00 3px,#fbd342 5px,#e36d00 8px,#e36d00 12px,#f00 16px,rgba(255,0,0,.8) 26px,rgba(255,0,0,.6));border-radius:5px 5px 0 0}@-webkit-keyframes lantern{0%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}}@keyframes lantern{0%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}}@media screen and (max-width: 720px){.lantern-left{left:30px}.lantern-right{right:30px}.lantern-container{width:100px;height:60px}.lantern-top-rope{width:3px;height: 45px;}.lantern-center{-webkit-box-shadow:0 0 40px -10px #f00;box-shadow:0 0 40px -10px red}.lantern-top,.lantern-bottom{width:35%;height:6px}.lantern-top{margin-bottom:-.5px}.lantern-bottom{margin-top:-.5px}.lantern-bottom-rope{width:2px}.lantern-bottom-rope:after{left:-2px;width:6px;height:25px}.lantern-text{font-size:14px;letter-spacing:2px}}@media screen and (max-width: 420px){.lantern-left{left:30px}.lantern-right{right:30px}.lantern-container{width:80px;height:50px}.lantern-top-rope{width:3px;height: 42px;}.lantern-center{-webkit-box-shadow:0 0 40px -10px #f00;box-shadow:0 0 40px -10px red}.lantern-top,.lantern-bottom{width:35%;height:4px}.lantern-top{margin-bottom:0}.lantern-bottom{margin-top:0}.lantern-bottom-rope{width:2px}.lantern-bottom-rope:after{left:-2px;width:6px;height:25px}.lantern-text{font-size:14px;letter-spacing:2px}.lantern-line:before,.lantern-line:after{border-width:1px}}\u003c/style\u003e\n   ```\n\n## DIV代码\n\n```HTML\n\u003cdiv class=\"lantern\"\u003e\u003cdiv class=\"lantern-left\"\u003e\u003cdiv class=\"lantern-container\"\u003e\n          \u003cdiv class=\"lantern-top-rope\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"lantern-top\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"lantern-center\"\u003e\n            \u003cdiv class=\"lantern-line\"\u003e\n              \u003cdiv class=\"lantern-text-wrap\"\u003e\n                \u003cdiv class=\"lantern-text\"\u003e新年\u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"lantern-bottom\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"lantern-bottom-rope\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"lantern-right\"\u003e\u003cdiv class=\"lantern-container\"\u003e\n          \u003cdiv class=\"lantern-top-rope\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"lantern-top\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"lantern-center\"\u003e\n            \u003cdiv class=\"lantern-line\"\u003e\n              \u003cdiv class=\"lantern-text-wrap\"\u003e\n                \u003cdiv class=\"lantern-text\"\u003e快乐\u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"lantern-bottom\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"lantern-bottom-rope\"\u003e\u003c/div\u003e\n   ```\n  \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuyangjs%2Fhiveweb_denlong","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftuyangjs%2Fhiveweb_denlong","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuyangjs%2Fhiveweb_denlong/lists"}