css100days

100 Days CSS Challenge

Day #1

100 Days CSS: An easy start into the challenge with a custom build number with gradient.

我的提交：A Pen by arigreat (codepen.io)

Day #2

Menu Icon: Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher

我的提交：A Pen by arigreat (codepen.io)

Keys:

• 利用transform设置旋转中心，rotate,translateX, translateY实现绕中心旋转。
• js利用.classList.toggle进行动画的添加删除，实现点击效果。

Day #3

The Pyramide: Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.

我的提交：A Pen by arigreat (codepen.io)

Keys:

• 将太阳设置在转轴上，通过remote转轴移动太阳。
• 不规则图形可通过clip-path属性由一个矩形元素切割得到，借此可得金字塔两部分和变化的三角形阴影。

Day #4

Loading: The best are always websites that do not need a loading status. If they do, here would be a calming one.

最后一帧没截掉~

我的提交：A Pen by arigreat (codepen.io)

Keys:

• 圆的动画时间设置

Day #5

Statistic: In a world of numbers, it is important to be able to interpret them correctly. Beautiful statistics help to capture these data.

Keys:

• 采用svg制图(SVG 图像入门教程 - 阮一峰的网络日志 (ruanyifeng.com))