HTML+CSS+JS小实例

HTML5+CSS3做一个手风琴式的加载动画，这动画、这质感、这配色，就问你喜不喜欢？！这个案例的知识点主要是：css的自定义属性 + 动画延迟 + 颜色滤镜（hue-rotate）。

HTML5+CSS3实现酷炫的文字裂开特效，鼠标悬停，文字上下裂开，中间显示更多说明，悬停时，其他文字模糊，不说了，看看效果有多酷炫吧！

HTML5+CSS3做一个有趣的沙漏加载动画，如此精致的沙漏，如果我说这个没有用到图片，纯CSS实现，你信吗？这个loading虽然看起来简单，但是你仔细拆解一番，你会发现其中居然用了四个动画。

HTML5+CSS3做一组简约不简单的社交分享按钮，字体图标库用到的是 font-awesome，鼠标悬停，图标变小，边框出现，然后边框倾斜并加粗，过程伴随动画，就这样，大功告成，是不是很简单？

HTML5+CSS3做一个酷炫的多彩菱形加载动画，代码超简单，一个简单的动画，再加一个动画延迟，搞定。真想不到如此简单的代码，可以做出这么好看的loading动画，兄弟们，可别再说手残做不出来啦。

HTML5+CSS3做一个简单又好看的加载动画效果，一个三色圆环转动，再加圆环内部文字转动，效果虽然简单，但第一次看到还是很惊艳的，最主要一点，代码真的超简单的。

HTML5+CSS3实现炫彩的聚光灯文字效果，手电筒照过去的赶脚，是不是挺有意思的，赶紧收藏起来学起来，说不定日后工作中某一些特定场景会用得上。

HTML5+CSS3实现菜单栏图标悬停效果，紫色的tabbar标签栏，默认显示图标，鼠标悬停图标上移，显示文字，过程伴随细微动画，字体图标用的是font-awesome。

HTML5+CSS3做一组鼠标悬停发光的按钮，鼠标悬停，按钮边框延展开来，首尾相连时填充按钮，过程伴随发光、倒影效果，并通过hue-rotate实现每个按钮不同颜色。

HTML5+CSS3实现黏性小球的loading动画，主要通过 contrast 和 blur 两个滤镜搭配使用，进而实现小球来回穿梭的动画，动画过程伴随着融球效果。

HTML5+CSS3实现炫彩爱心加载特效，9根普通的线条，通过变换长度，即可打造一个动感炫彩的心形loading加载动画，变换过程伴随了模糊，更让这个loading动画更细腻、更富律动。

HTML5+CSS3实现菜单悬停模糊特效，会自动对焦的导航栏，就问你见过嘛？鼠标悬停，当前项突出显示，其他项朦胧化，代码虽然不多，但最终效果还是B格满满。

HTML5+CSS3实现全屏导航栏菜单，悬停在右上角的小图标，点击以圆形扩散的方式绽开全屏导航栏，这种方式的导航栏很吸睛，运用也越来越广，赶紧学起来呀！

HTML+CSS3实现炫彩的流光按钮，是不是有点小好看，关键是代码还简单，遇到这样的按钮，我都不忍点击，就一直悬停在上面，静静欣赏它的美。

HTML5+CSS3实现弹性旋转菜单，看过的人都说好看，我说这个没有用到JavaScript，你敢信吗？

HTML5+CSS3实现富有弹性的导航栏标签，切换如此Q弹的标签栏，你确定不手敲一遍？没有用到JavaScript哦！

HTML5+CSS3实现闪亮的玻璃图标悬浮效果，光与玻璃的碰撞，好有质感的玻璃图标。本期案例用到的字体图标库是font-awesome。

今天给大家带来的小案例，是HTML5+CSS3实现有点小酷的input输入框动画，开发工具：VS Code。

今天给大家带来一个HTML5+CSS3实现伸缩式菜单栏的小案例，代码不多，开发工具：VS Code。

HTML5+CSS3实现3D旋转卡片，开发工具：VS Code。注释有点多，大家可千万别嫌我啰嗦哈。