text: # 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)
  
  ![](https://github.com/chokcoco/css3-/blob/master/images/solarSystem.gif)
  
  ## 下面这些是纯 CSS 实现不带任何 Javascript
  
  [3D透视立方体照片墙等demo地址戳我](http://chokcoco.github.io/demo/css3demo/html/index.html)
  
  #### 立方体 3D 旋转
  ![](https://github.com/chokcoco/css3-/blob/master/images/example1.gif)
  
  #### 3D 透视照片墙
  ![](https://github.com/chokcoco/css3-/blob/master/images/example2.gif)
  
  #### 跳跃的音符
  ![](https://github.com/chokcoco/css3-/blob/master/images/example3.gif)
  
  #### 纯 css3 loading 图
  ![](https://github.com/chokcoco/css3-/blob/master/images/example4.gif)
  
  ## 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 相关问题的小伙伴们加入。
  
  ![qqqun](https://github.com/chokcoco/iCSS/blob/master/qqqun.png)
  