# css3

**Repository Path**: zpv/css3

## Basic Information

- **Project Name**: css3
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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)

![](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)