- 作者：陈大鱼头
- github： KRISACHAN
一声梧叶一声秋，一点芭蕉一点愁，三更归梦三更后。
大概是因为入秋的缘故，最近的感慨比较多。
很多的碎碎念都用都用 HTML 跟 CSS 来记录在我的codepen https://codepen.io/krischan77 至上，眼见积累到了一些了，就选出几个来与大家一同分享。
（免责声明：有些效果是我在网上看到觉得好，然后临摹下来的，创意不是原创，但是代码是自己手写的，如果有看到类似的效果，欢迎大家用来作对比。）
洋溢着青春的活力这是两个带有弹性势能的弹跳盒，实现的主要思路就是利用 @keyframes 来控制 盒子的 scale 跟 translate ，从而在视觉上达成弹跳的效果。
效果地址：https://codepen.io/krischan77/pen/QXLdzP
具体代码：
这是在很久之前一个网友面试时被问到的问题，当时题目是如何用纯CSS实现物体根据鼠标进入盒子的方向移动，一道挺有意思的题目，当时在群里各位大佬的讨论下，就有了这样的实现。
实现思路主要是在盒子四个不同的方位定位好子盒子，然后隐藏的同时让它们稍稍进入父盒子里一点，那么再鼠标划进去时，就能触发该方位隐藏的子盒子的 hover 事件，利用这个障眼法从而达到题目的效果。
效果地址：https://codepen.io/krischan77/pen/RzomRX
代码如下：
从不同方向使鼠标指针移过下面的内容
↓
>→
1
2
3
4
Hover me!
> ←
↑
这是用纯CSS实现的一个评级功能，主要是利用了 label 标签跟 input 标签的联动性，以及 伪类:hover 跟 :focus 的操作性实现的。
效果地址：https://codepen.io/krischan77/pen/NZevBr
代码如下：
这是一只兔子的路径动画，实现原理就是利用 animation 来操作 SVG path的 stroke-dashoffset ，从而实现路径动画。
代码如下：
这个动效主要是利用了animation 来控制不同关键帧下的水滴状态，这里的滴水动画要注意的就是水滴下落的形变，以及到地上时引起的涟漪，主要是要尽量贴合物理现象。
代码如下：
这是因为抖音而走红的故障风效果，实现原理就是通过animation 来用 clip-path: inset 对元素进行不同位置的切割，从而实现故障风动画。
代码如下：
AWESOME
这是用 display: grid 完成的心型布局，grid真的是一个非常有用布局属性，建议还不熟的亲可以花时间去学习学习，这个心型布局实现的核心就是利用grid的二维性来创建一个 columns 为11，rows 为10的盒子，然后按照心型的形状去定义子元素的 grid-area，动画就是常规的显隐动画。
效果地址：https://codepen.io/krischan77/pen/wvvWoGy
顺便安利下，这是一个在线生成GRID布局的神器：https://cssgrid-generator.netlify.com/，通过这个网站就可以自动生成你想要的布局。
代码如下：
愿我如星君如月，夜夜流光相皎洁。
这是利用 transform 跟 transition 实现的一个3D轮播图，就是利用雪碧图思路将要轮播的背景切割给各个子盒子，然后子盒子进行Z轴变换。
效果地址：https://codepen.io/krischan77/pen/poooxjP
代码如下：
这是利用了 cubic-bezier 贝塞尔曲线的特性实现的动画，彩虹条的颜色是利用了filter: hue-rotate去将色调转换。
代码如下：
斯人若彩虹，遇上方知有
这是在线生成贝塞尔曲线的网站，通过这个网站，你不需要手写，只需要在线调试就可以生成需用的值：https://cubic-bezier.com
我和我亲爱的祖国，一刻也不能分割这个效果是为了庆祝祖国母亲70周年生日而画的，这里的五星红旗是通过SVG画的，早前在自己的文章里有提过五星红旗的具体属性
国旗是五星红旗，旗面为红色，长宽比例为3:2。左上方缀黄色五角星五颗，四颗小星（其外接圆直径为旗高1/10）环拱在一颗大星（其外接圆直径为旗高3/10）的右面，并各有一个角尖正对大星的中心点。
通用尺寸有以下五种：
- 长288厘米，高192厘米；
- 长240厘米，高160厘米；
- 长192厘米，高128厘米；
- 长144厘米，高96厘米；
- 长96厘米，高64厘米。
所以我们有以下的墨线图：
所以按照这个比例我们能画出这样的SVG：
至于飘扬的动画部分，同样是利用了雪碧图的原理，将图片的每一块区域赋值给dom节点，然后利用transform 进行Y轴的移动。
完整代码如下：
其实CSS还是很有趣的，各位有兴趣也可以多多发掘，多多开脑洞来创作一些有趣的特效。
鱼头我时不时就会上https://codepen.io/去看别人的创意，从中获取写CSS的灵感，各位对CSS感兴趣，或者希望可以增强CSS水平的都可以进去看看，当然里面不止有CSS，还有各类DEMO，算是可视化版的github了~
