校长:阿不思·邓布bai利多

亲爱的少年:我们愉快地通知您,您已获准在CSS魔法学校就读。特此带给你一份CSS魔法秘籍,代码简单,支持个性化定制。学期定于今日开始,我们将在此静候您的猫头鹰带来您的回信。(所有配图都是gif动图,如果看到图不动,耐心等待一小会,加载可能稍慢)。

1 烟花模拟器

通过HTML5实现的一款可在线定制的烟花模拟器,[p]暂停烟花绽放,[o]触发菜单显示,[esc]退出菜单。

2 Falling Hours

通过Canvas实现有创意的掉落时间。时分秒的数字从页面上方掉落,有重力感应、碰撞、弹跳等效果。当然计时也是准确的!

3 Bubbles in text

通过CSS3 实现文本内的泡沫漂浮动画效果。

4 发光字母墙

通过jQuery实现可亮灯的字母墙。输入法调英文,不要大写锁定,摁下任意英文字母,对应字母的灯会亮。摁下【enter】有惊喜。

5 浩瀚星空

通过jQuery和CSS3实现的繁星点点动画背景。星星在动哦~星星的颜色和数量均可调,源码运行后,pc端看会很震撼。

6 精灵尘土

通过HTML5和Canvas,实现魔法粉末的文本特效。输入文本时,触发粉末化动画特效。本质上是一款canvas的粒子动画。可以用来模拟在黑板上用粉笔写字所产生的粉尘飘飞的效果。

7 Animated Water and Fish

通过 CSS3实现小鱼在鱼缸中游动的动画。 小鱼和泡泡是纯CSS构建,背景和柜子使用背景图片实现。

8 流星雨

通过 CSS3流星雨掉落动画,box-shadow实现流星的光晕,使用伪元素实现拖尾。

9 心语星愿

通过 Canvas实现渐变色深蓝星空和飘散的五角星,鼠标点击随机生成一组五角星飘落。

10 气球海

节日欢庆彩色气球放飞动画,使用Canvas 贝塞尔曲线绘制的气球形状的元素,并应用了径向渐变。可用于节日庆贺、生日祝福的专题页面。

11 模拟太阳系

纯CSS实现逼真的3D版本太阳系运转动画。只要你不困,它会一直陪你转。

12 Glowing Meteor

通过HTML5和CSS3实现的发光的流星娃娃。

看了这么多好玩的动效,你钟意哪一款呢?文章中配图效果略显粗糙,源码运行更细腻一些。可以放到个人博客或个人网站中作为点缀。

如果魔法还没完全学会,没关系,【点击这里】获取源码。获取更全更新文章,可微信搜【前端便利贴】或扫描下方二维码关注公棕号,同名推文【阅读原文】中也可获取源码。文件-右键-打开方式-任意浏览器打开,即可看到比图中更美丽的效果啦~

这里就是哆啦A梦的百宝袋,总会有你喜欢的,也许今天,也许明天,也许后天...

邓布利多拍了拍你,并递来一份CSS魔法的更多相关文章

  1. 7. JDK拍了拍你:字符串拼接一定记得用MessageFormat#format

    目录 ✍前言 版本约定 ✍正文 DateFormat:日期时间格式化 SimpleDateFormat NumberFormat:数字格式化 DecimalFormat 一.0和#的使用(最常见使用场 ...

  2. 随机数据生成与对拍【c++版,良心讲解】

    10.7更新:见最下面 离NOIP2018没剩多长时间了,我突然发现我连对拍还不会,于是赶紧到网上找资料,找了半天发现了一个特别妙的程序,用c++写的! 不过先讲讲随机数据生成吧. 很简单,就是写一个 ...

  3. 捷易拍与springMVC系统结合

    1. 捷易拍高拍仪在jsp页面的调用 使用ActiveX插件的方式处理解决此问题,捷易拍公司提供了支持IE8以上的32位浏览器的插件,安装插件后,我们可以使用Object标签,使用高拍仪 注意: 1. ...

  4. 制造测试数据的程序及对拍程序概述(Like CyaRon)

    作为一名OIer,比赛时,对拍是必须的 不对拍,有时可以悔恨终身 首先,对拍的程序 一个是要交的程序 另一个可以是暴力.搜索等,可以比较慢,但是必须正确 下面是C++版对拍程序(C++ & c ...

  5. debug?用对拍!

    很多人考noip之类的比赛永远会发生一些奇怪的问题 比如说下面这两位(来自我的两位学长) sliver n:spli,考得怎样啊? spli:就那样啦,day1T1没推出来规律,别的还好 silver ...

  6. acm对拍程序 以及sublime text3的文件自动更新插件auto refresh

    acm等算法比赛常用---对拍 以及sublime text3的文件自动更新插件auto refresh 对拍 对拍即程序自动对比正确程序的运行结果和错误程序的运行结果之间的差异 废话少说, 直接上操 ...

  7. bzoj 1089 SCOI2003严格n元树 递推

    挺好想的,就是一直没调过,我也不知道哪儿的错,对拍也拍了,因为数据范围小,都快手动对拍了也不知道 哪儿错了.... 我们定义w[i]代表深度<=i的严格n元树的个数 那么最后w[d]-w[d-1 ...

  8. 一生伏首拜阳明------<明朝那些事儿>

    一生伏首拜阳明. 王守仁,字伯安,别号阳明. 成化八年(1472),王守仁出生在浙江余姚,大凡成大事者往往出身贫寒,小小年纪就要上山砍柴,下海捞鱼,家里还有几个生病的亲属,每日以泪洗面.这差不多也是惯 ...

  9. 【用户分析-用户场景】这TM才是产品思维!

    @奶牛Denny :很长一段时间里,市场推广/营销(Marketing)在中国似乎是一个大家很忌讳的词汇.市场推广无非就是夸大包装,炒作一下,卖卖情怀——很多人都是这么觉得的,因为确实有一部分急功近利 ...

随机推荐

  1. 简单说维特比算法 - python实现

    动态规划求最短路径算法,与穷举法相比优点在于大大降低了时间复杂度; 假如从起点A到终点S的最短路径Road经过点B1,那么从起点A到B1的最短路径的终点就是B1,否则如果存在一个B2使得A到B2的距离 ...

  2. R调用python模块

    明明已经安装了sctransfer,但仍然显示没有该模块 Error in py_module_import(module, convert = convert) : ModuleNotFoundEr ...

  3. [LOJ#500]「LibreOJ β Round」ZQC的拼图

    题目   点这里看题目. 分析   首先不难发现答案具有单调性,因此可以二分答案.答案上限为\(V=2m\times \max\{a_i, b_i\}\).   考虑如何去判断当前的答案.设这个答案为 ...

  4. Excel怎样根据出生日期,快速计算出其年龄呢?

    问题:怎样根据出生日期,快速计算出其年龄呢? 方法:DATEDIF函数 Step1:在编辑栏中输入公式:=DATEDIF(E2,TODAY(),”Y”),按回车键. Step2:用鼠标向下拖拽复制公式 ...

  5. IDEA Gradle项目控制台输出乱码

    idea 更新到2019.2.3没有这个选项. 可以点击 help->edit custom vm options 然后加上 -Dfile.encoding=utf-8 重启一下就好了

  6. 腾讯音乐Android工程师一面面试题记录,拿走不谢!

    最近参加了一次鹅厂音乐Android工程师面试,这里凭记忆记录了一些一面的面试题,希望能帮到正在面试的你! 1.Java调用函数传入实际参数时,是值传递还是引用传递? 2.单例模式的DCL方式,为什么 ...

  7. mysql索引小总结

    MySql 1.索引 mysql索引默认使用的是B+Tree(B-树的变种版).也可以使用HASH表. 二叉树: 二叉树又称二叉搜索树,二叉排序树,特点如下: 左子树上所有结点值均小于根结点 右子树上 ...

  8. Zookeeper——Watcher原理详解

    文章目录 引言 正文 一.如何注册监听 二.如何触发监听事件 三.事件类型有哪些 四.Watcher可以被无限次触发么?为什么要这么设计? 五.Watcher实现原理 1. 客服端发送请求 a. 初始 ...

  9. 技术周刊 · Lighthouse 测试报告生成

    登高远眺 天高地迥,觉宇宙之无穷 基础技术 Lighthouse 测试内幕 文章分享了网易云音乐前端性能监控平台使用 Lighthouse 的实践经验,介绍了 Lighthouse 的测试流程.内部模 ...

  10. git 提交流程

    Git提交流程: 1. Menu remote > (拉取)fetch 2. 重新扫描(rescan) 3. 缓存改动(stage change) 4. 写注释后提交(commit) 5. Me ...