Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chokcoco/css3-
CSS3 实现各类 3D && 3D 行星动画效果
https://github.com/chokcoco/css3-
Last synced: 4 days ago
JSON representation
CSS3 实现各类 3D && 3D 行星动画效果
- Host: GitHub
- URL: https://github.com/chokcoco/css3-
- Owner: chokcoco
- Created: 2016-04-18T12:47:08.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-08T11:51:41.000Z (over 6 years ago)
- Last Synced: 2025-01-08T14:24:45.541Z (11 days ago)
- Language: CSS
- Homepage:
- Size: 10.1 MB
- Stars: 1,016
- Watchers: 47
- Forks: 269
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-star - css3-
README
# css3-
使用 `CSS` 实现的一些酷炫效果。
自己学习 `CSS3` 的一个过程，有一些效果写的比较早，可能没有用到 `autoprefixer`，如果打开页面出现错位无法正常浏览，请使用最新版 `Chrome` 浏览器浏览打开。
## 个人博客园相关博文：
[【CSS3进阶】酷炫的3D旋转透视](http://www.cnblogs.com/coco1s/p/5414153.html)
[【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理](http://www.cnblogs.com/coco1s/p/5439619.html)
## css3 3d 行星，实现简单的太阳系旋转
#### 效果示意图
[太阳系运转demo戳我, 请用chrome打开](http://chokcoco.github.io/demo/css3demo/html/exampleSolarSystem.html)
## 下面这些是纯 CSS 实现不带任何 Javascript
[3D透视立方体照片墙等demo地址戳我](http://chokcoco.github.io/demo/css3demo/html/index.html)
#### 立方体 3D 旋转
#### 3D 透视照片墙
#### 跳跃的音符
#### 纯 css3 loading 图
## web 动画作品集合
[BOOMJS 图片爆炸](http://sbco.cc/demo/boom/demo.html)
[CSS3 3D 行星运转](http://chokcoco.github.io/demo/css3demo/html/exampleSolarSystem.html)
[CSS3 3D 透视立方体照片墙](http://chokcoco.github.io/demo/css3demo/html/index.html)
[CSS3 3D 视角 -- 试试酷炫的 3D 视角](http://sbco.cc/demo/3dview/html/index.html)
[CSS3 奇思妙想 -- 使用单标签完成各种图案](http://chokcoco.github.io/magicCss/html/index.html)
[SVG奇思妙想](http://sbco.cc/demo/svg/html/index.html)
[Web 动画曲线运动](http://chokcoco.github.io/demo/curveJS/html/index.html)
[tweenmax动画](http://chokcoco.github.io/demo/homepage/html/index.html)
## 其他 CSS 效果
[CSS3 3D 行星运转](http://chokcoco.github.io/demo/css3demo/html/exampleSolarSystem.html)
[CSS3 3D 透视立方体照片墙](http://chokcoco.github.io/demo/css3demo/html/index.html)
[CSS3 3D 视角 -- 试试酷炫的 3D 视角](sbco.cc/demo/3dview/html/index.html)
[纯 CSS 3D 数字计数动画](https://codepen.io/Chokcoco/pen/qXVxyw)
[PURE CSS WAVE](https://codepen.io/Chokcoco/pen/awxYWZ)
[纯 CSS 实现波浪百分比 loading](https://codepen.io/Chokcoco/pen/EXJrdB)
[纯 CSS 实现火焰效果 || PURE CSS FIRE](https://codepen.io/Chokcoco/pen/GvbMmE)
[纯 CSS 实现文字融合效果](https://codepen.io/Chokcoco/pen/jLjNRj)
[纯 CSS 实现复杂颜色阴影](https://codepen.io/Chokcoco/pen/eGYYpo)
[使用颜色混合模式实现 loading 效果](https://codepen.io/Chokcoco/pen/zwPyWj)
[颜色混合模式实现花纹变换图形动画](https://codepen.io/Chokcoco/pen/VbMrKX)
[颜色混合模式制作文字故障效果](https://codepen.io/Chokcoco/pen/RVxbWW)
[clip-path 实现爆炸动画](https://codepen.io/Chokcoco/pen/XgJRzO)
[clip-path 实现任意多边形](https://codepen.io/Chokcoco/pen/NgqGOo?limit=mine&page=2&q=clip)
[圆锥渐变背景版](https://codepen.io/Chokcoco/pens/popular/9/)
[纯 CSS 实现文字输入效果](https://codepen.io/Chokcoco/pen/WXGoGB)
[CSS 实现意想不到的按钮效果](https://codepen.io/Chokcoco/pen/MGPwLg)
[Magic filter](https://codepen.io/Chokcoco/pen/pLKmZQ)
[CSS 滚动视差](https://codepen.io/Chokcoco/pen/XBgBBp)
[3D Spiral Number](https://codepen.io/Chokcoco/pen/LeWbaB)
[3d Number Count](https://codepen.io/Chokcoco/pen/qXVxyw)
[纯 CSS 实现文字输入效果](https://codepen.io/Chokcoco/pen/WXGoGB)
[CSS单侧投影](https://codepen.io/Chokcoco/pen/pergRb)
[CSS 实现点击波纹效果](https://codepen.io/Chokcoco/pen/wxYZWO)
[圆锥渐变实现酷炫光影效果](https://codepen.io/Chokcoco/pen/gRRdQq)
[正负旋转相消](https://codepen.io/Chokcoco/pen/XaBJPy)
[font-variation-settings 文字动画](https://codepen.io/Chokcoco/pen/oMrWJB)
[CSS Shadow Word Animation](https://codepen.io/Chokcoco/pen/bxQRxG)
## Contact
如果有任何问题或者疑问，可以加 QQ 群：418766876 联系我。
也欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入。
