{"id":13669858,"url":"https://github.com/chokcoco/css3-","last_synced_at":"2025-04-04T06:06:34.212Z","repository":{"id":50547875,"uuid":"56507202","full_name":"chokcoco/css3-","owner":"chokcoco","description":"CSS3 实现各类 3D \u0026\u0026 3D 行星动画效果","archived":false,"fork":false,"pushed_at":"2018-10-08T11:51:41.000Z","size":10543,"stargazers_count":1025,"open_issues_count":2,"forks_count":269,"subscribers_count":47,"default_branch":"master","last_synced_at":"2025-03-28T05:08:55.700Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","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/chokcoco.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}},"created_at":"2016-04-18T12:47:08.000Z","updated_at":"2025-03-12T05:25:47.000Z","dependencies_parsed_at":"2022-08-31T13:54:10.519Z","dependency_job_id":null,"html_url":"https://github.com/chokcoco/css3-","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chokcoco%2Fcss3-","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chokcoco%2Fcss3-/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chokcoco%2Fcss3-/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chokcoco%2Fcss3-/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chokcoco","download_url":"https://codeload.github.com/chokcoco/css3-/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247128744,"owners_count":20888235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-08-02T09:00:23.776Z","updated_at":"2025-04-04T06:06:34.192Z","avatar_url":"https://github.com/chokcoco.png","language":"CSS","readme":"# css3-\n使用 `CSS` 实现的一些酷炫效果。\n\n自己学习 `CSS3` 的一个过程，有一些效果写的比较早，可能没有用到 `autoprefixer`，如果打开页面出现错位无法正常浏览，请使用最新版 `Chrome` 浏览器浏览打开。\n\n\n## 个人博客园相关博文：\n\n[【CSS3进阶】酷炫的3D旋转透视](http://www.cnblogs.com/coco1s/p/5414153.html)\n\n[【Web动画】CSS3 3D 行星运转 \u0026\u0026 浏览器渲染原理](http://www.cnblogs.com/coco1s/p/5439619.html)\n\n## css3 3d 行星，实现简单的太阳系旋转\n\n#### 效果示意图\n\n[太阳系运转demo戳我, 请用chrome打开](http://chokcoco.github.io/demo/css3demo/html/exampleSolarSystem.html)\n\n![](https://github.com/chokcoco/css3-/blob/master/images/solarSystem.gif)\n\n## 下面这些是纯 CSS 实现不带任何 Javascript\n\n[3D透视立方体照片墙等demo地址戳我](http://chokcoco.github.io/demo/css3demo/html/index.html)\n\n#### 立方体 3D 旋转\n![](https://github.com/chokcoco/css3-/blob/master/images/example1.gif)\n\n#### 3D 透视照片墙\n![](https://github.com/chokcoco/css3-/blob/master/images/example2.gif)\n\n#### 跳跃的音符\n![](https://github.com/chokcoco/css3-/blob/master/images/example3.gif)\n\n#### 纯 css3 loading 图\n![](https://github.com/chokcoco/css3-/blob/master/images/example4.gif)\n\n## web 动画作品集合\n\n[BOOMJS 图片爆炸](http://sbco.cc/demo/boom/demo.html)\n\n[CSS3 3D 行星运转](http://chokcoco.github.io/demo/css3demo/html/exampleSolarSystem.html)\n\n[CSS3 3D 透视立方体照片墙](http://chokcoco.github.io/demo/css3demo/html/index.html)\n\n[CSS3 3D 视角 -- 试试酷炫的 3D 视角](http://sbco.cc/demo/3dview/html/index.html)\n\n[CSS3 奇思妙想 -- 使用单标签完成各种图案](http://chokcoco.github.io/magicCss/html/index.html)\n\n[SVG奇思妙想](http://sbco.cc/demo/svg/html/index.html)\n\n[Web 动画曲线运动](http://chokcoco.github.io/demo/curveJS/html/index.html)\n\n[tweenmax动画](http://chokcoco.github.io/demo/homepage/html/index.html)\n\n## 其他 CSS 效果\n\n[CSS3 3D 行星运转](http://chokcoco.github.io/demo/css3demo/html/exampleSolarSystem.html)\n\n[CSS3 3D 透视立方体照片墙](http://chokcoco.github.io/demo/css3demo/html/index.html)\n\n[CSS3 3D 视角 -- 试试酷炫的 3D 视角](sbco.cc/demo/3dview/html/index.html)\n\n[纯 CSS 3D 数字计数动画](https://codepen.io/Chokcoco/pen/qXVxyw)\n\n[PURE CSS WAVE](https://codepen.io/Chokcoco/pen/awxYWZ)\n\n[纯 CSS 实现波浪百分比 loading](https://codepen.io/Chokcoco/pen/EXJrdB)\n\n[纯 CSS 实现火焰效果 || PURE CSS FIRE](https://codepen.io/Chokcoco/pen/GvbMmE)\n\n[纯 CSS 实现文字融合效果](https://codepen.io/Chokcoco/pen/jLjNRj)\n\n[纯 CSS 实现复杂颜色阴影](https://codepen.io/Chokcoco/pen/eGYYpo)\n\n[使用颜色混合模式实现 loading 效果](https://codepen.io/Chokcoco/pen/zwPyWj)\n \n[颜色混合模式实现花纹变换图形动画](https://codepen.io/Chokcoco/pen/VbMrKX)\n\n[颜色混合模式制作文字故障效果](https://codepen.io/Chokcoco/pen/RVxbWW)\n\n[clip-path 实现爆炸动画](https://codepen.io/Chokcoco/pen/XgJRzO)\n\n[clip-path 实现任意多边形](https://codepen.io/Chokcoco/pen/NgqGOo?limit=mine\u0026page=2\u0026q=clip)\n\n[圆锥渐变背景版](https://codepen.io/Chokcoco/pens/popular/9/)\n\n[纯 CSS 实现文字输入效果](https://codepen.io/Chokcoco/pen/WXGoGB)\n\n[CSS 实现意想不到的按钮效果](https://codepen.io/Chokcoco/pen/MGPwLg)\n\n[Magic filter](https://codepen.io/Chokcoco/pen/pLKmZQ)\n\n[CSS 滚动视差](https://codepen.io/Chokcoco/pen/XBgBBp)\n\n[3D Spiral Number](https://codepen.io/Chokcoco/pen/LeWbaB)\n\n[3d Number Count](https://codepen.io/Chokcoco/pen/qXVxyw)\n\n[纯 CSS 实现文字输入效果](https://codepen.io/Chokcoco/pen/WXGoGB)\n\n[CSS单侧投影](https://codepen.io/Chokcoco/pen/pergRb)\n\n[CSS 实现点击波纹效果](https://codepen.io/Chokcoco/pen/wxYZWO)\n\n[圆锥渐变实现酷炫光影效果](https://codepen.io/Chokcoco/pen/gRRdQq)\n\n[正负旋转相消](https://codepen.io/Chokcoco/pen/XaBJPy)\n\n[font-variation-settings 文字动画](https://codepen.io/Chokcoco/pen/oMrWJB)\n\n[CSS Shadow Word Animation](https://codepen.io/Chokcoco/pen/bxQRxG)\n\n## Contact\n\n如果有任何问题或者疑问，可以加 QQ 群：418766876 联系我。\n\n也欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入。\n\n![qqqun](https://github.com/chokcoco/iCSS/blob/master/qqqun.png)\n","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchokcoco%2Fcss3-","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchokcoco%2Fcss3-","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchokcoco%2Fcss3-/lists"}