偏科程序猿

CSS3的滤镜真的是一个非常强大的功能，如果我们能够很好的利用它，并充分发挥我们的想象力，想要制作出非常惊艳的动效也是没有问题的哦。比如：接下来我要跟大家分享的一个巧妙使用CSS滤镜绘制出来的android手机电池充电动效，还是老规矩，小凡我依然分享的是uni-app|view组件版哦。

依托于CSS3提供的强大功能，我们可以充分发挥自己的想象力，制作出许多非常惊艳的动效，比如：接下来我要跟大家分享的一个完全用CSS绘制出来的电池充电水波纹动效，还是老规矩，小凡我依然分享的是uni-app|view组件版哦。

以前的你可能认为CSS的作用只不过是用来给页面排排版，布布局，让页面看起来更加的整洁与美观，最多也就是结合JS脚本动态改变一下页面的样式而已，其实，自从有了CSS3，它的作用就发生了很大的改变。现在我们可以利用CSS3提供的新特性不仅能做出很精致的图标，甚至还可以给这些图标加上动画效果。下面，小凡我就跟大家分享几个完全利用CSS+CSS3创作出的图标，通过这几个案例，相信大家一定会对CSS有一个全新的认识！O(∩_∩)O

今天，小凡继续跟大家分享一个非常实用的动效，一颗跳动的心脏动效。大家先别急着往下看，可以先考虑一下，如果我们自己来做一个心形的图形，应该怎样做呢？~（嘘.....悄悄告诉大家，小凡我刚开始时也没想出来，而且还是那种一点思路都没有的o(╥﹏╥)o），好啦，想不出来也没关系，大家继续往下看吧！O(∩_∩)O

“不务正业”的小凡又来了！(*^▽^*) 今天，我来跟大家分享一个漂浮的地标图标动效，做出来的效果就像一个????一样，在页面中飘飘忽忽的，很显眼的，放到页面中大概率能启到吸引人们注意的目的。一起来看一下，它是如何实现的吧！(*￣︶￣)

经历了前面几篇文章的痛苦经历以后，我终于深刻领悟到了那句“书山有路勤为径，学海无涯苦作舟”呀！ o(╥﹏╥)o 看来小凡我前端学习的路还很漫长呀！大家也要继续努力呀！加油！！咳咳......一不小心又跑题了，我们言归正传，今天继续给大家分享一个有趣的动效，一个会跟大家撒娇的Hi徽章。

在【uni-app|vue组件实现鼠标滑过平滑过渡动效之播放与暂停】这篇文章中，小凡跟大家详细分析了整个动效的原理以及实现过程，那么，今天，小凡再来跟大家分享一个长条状进度条鼠标滑过平滑过渡效果，相信大家在有了上一篇文章的学习基础后，再来学习本篇中的动效的话，就会很容易的搞定了！

在【uni-app|vue组件实现鼠标滑过平滑过渡动效之播放与暂停】这篇文章中，小凡跟大家详细分析了整个动效的原理以及实现过程，那么，今天，小凡再来跟大家分享一个类似的鼠标滑过平滑过渡效果，相信大家在有了上一篇文章的基础上，再来学习这一篇文章中的动效原理的话，应该就会变的简单了许多。

我们在做一些状态切换的效果时，如果不做任何处理的话，总感觉变化的很突兀；虽然也能够将准确的操作信息传递给用户，但总感觉还是缺了点设计感，那么，本篇文章，小凡就来跟大家分享一个播放与暂停状态切换的鼠标滑过平滑过渡效果。

这篇文章，小凡给大家分享一个茶杯状的loading动效，茶杯中的茶水通过CSS动画，还能顾实现上下浮动的效果，很酷！

这篇文章，小凡再来跟大家分享一个很酷的仿液态水loading动效，依然是纯CSS实现的哦！

本人是一枚并不安分守己的后端程序猿，一直对前端开发“垂涎三尺”，所以，一有机会就会“不务正业”一番。最近，发现了一个非常好的学习资料，于是乎，我的老毛病又犯了，经过一段时间的研究，终于，把这些技能“收入囊中”。但是，本人觉得，这么好的前端学习资料，如果被我“中饱私囊”了，实在是太可惜了。所以呢，我就花了一点时间，为大家解析一下这些炫酷的技能。这篇文章，解析的是一个loading加载的动效，纯CSS的哦。