Libx

Libx

Thoughts, stories and ideas.

animate.css源码阅读小结
动画库animate.css阅读//先说一些题外话,下午敲了一个下午的代码外加看文档熟悉了json的使用,然后写了几个动画,用线性渐变做了些有有意思的东西,灵感来自于《CSS揭秘》。昨天晚上尝试ajax并不顺利,搞到晚上一点多也没有搞好,目前还在继续在看MDN的文档中。现在感觉有些累,正好很久没有写博客了,现在就写篇博客来放松一下(主要是前几天刚买了一个青轴的机械键盘,简直美滋滋,好的装备确实能Coding的幸福感翻倍。) 这周在看《CSS揭秘》的时候发现了一个动画库:animate.css于是就去他的官网去看了一下,然后就把源码下下来看一上看。 其实我觉得这个库并没有什么令人特别惊艳的...
一周总结
来,写点东西不知不觉一周又过去了,期中考试周,爽歪歪。太多考试都太水了,不过我喜欢。。一周以来感觉没有敲什么代码,依然是在啃《JS高级程序设计》这本书很好,讲的东西很详细,以前对闭包作用域什么完全没有概念的我现在也有了些概念(突然认识到自己之前有多么浅薄,竟然只是认为JS就是实现一些效果就是了,(当然随着学习的深入,也慢慢知道JS能做的东西太多了,vue 、node、 react这些都还没有学过我还要继续加把劲啊,当然目前还是要把原生JS给搞好))。 然后就是这周终于把《禅意花园》花园给看完了。但是在看的过程中也发现了一些问题,我个人觉得,相对于现在来说,在这本书中,确实不是学技术的,也...
20个loading动画继续更新
继续更新此处添加图片 这是个漏斗的加载动画,在初看到这个效果时我认为是用一些手段实现连贯的效果,但是看了源码后发现他的处理方式非常的巧妙,所以这里来实现一下。 动画并非是一直旋转并且top流下,bottom充满。等到top转到下部执行bottom的动画,bottom。。。而是在整个rotatehoder的动画前90%不动,后10%转动180,之后迅速归回原位在视觉上形成连贯的视觉效果。 大致可以分析得到,主题的内容是由上下·两个部分来组成,中间利用伪元素来将两端连接起来即是中间的颈。在外层用一个div来控制整体的转动,然后分别用top和bottom伪类的动画来控制sand的“流动”。 在...
近期学习的若干反思
近期学习的一些反思HTML,CSS深入理解。原生JS的编程能力。jquery的一些使用。以及近期的一些学习计划 1 最近接触了jquery,感觉用起来确实方便,但是看到各种论坛上面还是有很多人说原生的js更加重要,也看到了好多公司招聘也明确说明了要求具有原生JS的编程能力。个人感觉jquery其实加深了我对js的一些理解(主要是一些用法上),近期准备把《javascript高级程序设计》好好研读一番。 2 最近很开心的是,终于进入了家园网,虽然最后也进了,但是在笔试的过程中也发现了不少的问题 1,基础知识掌握的不够牢固,不够准确,对一些概念模棱两可。比如说对于css中一些属性的理解还不...
20个loading小动画//二
20个loading动画先说一点题外话吧,,最近好几天都没有在写博客/虽然我还是一直在学习css,嗯。/主要原因是什么呢?因为前几天我发现我暗恋的一个小女生有男朋友啦哈哈哈哈,绝望吧,就看着她跟她男票走那么近,然后我迎面走过,脸上应该还是一副很潇洒的样子吧。哈哈哈,心酸不。总之最近心情都不是很好,但是没人说啊,唉,我可能真的需要一个女朋友啦。突然都想把这篇文设为私密了,但是一想也没几个人看,那就不设了吧。 嗯,我们来继续谈技术。 3:原作者@Ben Sinca 来自codepen https://codepen.io/arcticben/pen/yMomZg 效果图懒得做了,想看的...
20个loading小动画|不定时更新
20个loading动画以下20个动画均来自codepen,原文:http://www.hongkiat.com/blog/free-animated-loaders/感觉比较有意思,准备一个一个的的实现一遍 持续更新: 1: CSS loader,基本实现出来是这样的: 这个应该来说是比较简单的,首先Markup<!DOCTYPE html><html><head> <title>加载效果</title> <link rel="stylesheet" type="text/css" href="practice8.c...
CSS实现有趣的小部件
CSS实现转动圆环欢迎界面这应该全是一个比较简单的小组件,但是个人感觉比较有意思,所以现在来写篇文。 组件的基本HTML文档如下:<!DOCTYPE html><html><head> <title>圆形动画</title> <link rel="stylesheet" type="text/css" href="4.css"></head><body><div class="demo"> <div class="pic"> <img src="53cdcf5ed...
CSS3实现文字流光效果
在百度前端技术学院(这里)上看到一个比较有意思的效果,@陈慕杰照着实现了一遍,现在来分享一下,最终要实现的效果:实现文字的流光渐变动画背景图需要进行模糊处理实现按钮边框的从中间到两边扩展开下面来一步步实现这些效果。页面结构: <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="6.css"> <title>有趣的鼠标悬浮模糊效果<...
avatar
libx
for fun