随笔分类 - CSS3
摘要：前言掐指一算，快两个月没写博客分享了。好吧，我就只是在准备校招而已。现在已经有满意的offer了，所以我就回来啦！这两个月过得挺煎熬也挺充实的。具体细说估计得长篇大论，我就不闲扯了。总之呢，越努力，越幸运！正文先看看制作出来的效果图：PS： 有人会说，这些东西实用性不强，没啥用。一开始我也是这么觉得...
阅读全文
摘要：前言很不巧前天突然就感冒了，都怪自己吃太多饼干导致上火了。整个人都无精打采。本来想多做几个兔斯基表情的，但身体发热很难受。所以就只完成一个简单点的表情耍一耍。正文先看一下这个简单到不能再简单的小表情吧：这里我就直接分享代码吧：html结构： ...
阅读全文
摘要：前言首先声明在这篇博客里我将不会细说每一个知识点（比如什么是BFC，什么是flex等等），我主要是总结一下自己对标题中所列三个知识点的一些方法。一、多栏自适应布局首先，在这里我将从最简单的两栏固定布局慢慢讲到多栏自适应布局。1.固定布局说到固定布局想必大家已经觉得无爱了，但我还是要简单地讲一下，下面...
阅读全文
摘要：前言明天就放假了，趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果。话说还得缘起我逛了一下站酷网，然后不小心看到了一张皮卡丘的手机壁纸，觉得很可爱，然后觉得这种效果是可以用CSS3来实现的，于是带着好感就实现了它。至于原图吧，为了不影响大家对我实现的动画产生对比，我就有心...
阅读全文
摘要：上一篇博客《CSS3弹性伸缩布局（一）——box布局》介绍了旧版本的box布局，而这篇博客将主要介绍最新版本的flex布局的基础知识。新版本简介新版本的Flexbox模型是2012年9月提出的工作草案，这个草案是由W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的...
阅读全文
摘要：CSS3弹性伸缩布局简介2009年，W3C提出了一种崭新的方案----Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编...
阅读全文
摘要：主题由于最近比较忙，自己也没有很充裕的时间可以去做比较丰富的分享。今晚我挤出时间来制作这几个很常用的CSS3网页小效果。最近写JS的时间比例比较多，不过我还是比较钟情于CSS3。所以我还是坚持分享一些实用的CSS3小例子。这次由于时间有限，就做了几个相对比较简单的例子。看一下吧！正文第一种效果：由于...
阅读全文
摘要：前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画。在接触CSS3动画之前，我之前实现一些简单的动画效果都是使用flash完成的。但是自从CSS3横空出世，在移动端对CSS3动画的运用越来越多。今天这个分享是PC端的案例，因为我做的是大场景来的，起因还是我无意间看到一张卡通图片。于是我
阅读全文
摘要：主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画，想不会都难！那么，到底是什么东东呢？先不急，之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》，但是呢，那篇博客只是制作出来效果而已，并没有动画效果，因为当时正期末复习期间，所以就省了制作动画的时间成本。所以，今天就一...
阅读全文
摘要：今天把之前分享的两篇博客《CSS3实现10种Loading效果》和 《CSS3实现8种Loading效果【二】》整理了一下。因为之前所分享的各种loading效果都只是做了webkit内核浏览器的兼容性而已，但初衷还是想做成PC端的效果，所以就统一把所有效果都收集起来，并兼容各主流浏览器。最重要的是
阅读全文
摘要：前言 移动网络带宽的快慢直接影响webapp应用体验效果的优差，其中加载图片是很耗流量的，所以对这一方面的性能优化是很需要的。一般对于那些小而多的图片（图标）都会采用sprite合并成一张图片来减少http的请求次数。而CSS3的出现，无疑在移动端对图标的优化有着比较大的帮助。为此，自己也琢磨使用C
阅读全文
摘要：前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看...
阅读全文
摘要：转载请注明出处，谢谢！ 每次看到CSS3动画就心痒痒想试一下，记得一个多月前看了白树哥哥的一篇博客，突然开窍，于是拿他提供的demo试了一下，感觉很棒！下图为demo提供的动画帧设计稿。 自己也想说搞一个DIY的动画出来，可是，会PS不一定会设计啊，我搞不出一套动画设计稿出来啊【抓狂】….于是乎，去了站酷网找找素材，我果然还是太天真了，最后从心只找到了一张图： 联想到我要做CSS3动...
阅读全文
摘要：最近打开电脑就能看到极客学院什么新用户vip免费一个月，就进去看看咯，这里就不说它的课程怎么滴了，里面实战路径图页面看到了这个效果：有点像时间轴的赶脚，而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息，就感觉效果还不错。但感觉这种效果貌似对于动态添加不是很灵活，因为高度不像宽度可以灵活的自适应，故...
阅读全文
摘要：今晚吃完饭回宿舍又捣鼓了另外几种Loading效果，老规矩，直接“上菜“……注：gif图片动画有些卡顿，非实际效果！第一种效果：代码如下： .loading{ width: 80px; ...
阅读全文
摘要：昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……第1种效果：代码如下： .loading{ width: 80px; heig...
阅读全文
摘要：最近半个月为了期末考试，可要了学渣我半瓶血啊！今天本该好好复习的，可是状态不好，就随便找点乐子玩一玩，于是乎就想起之前面试时面试官给的一道题（见标题），那就弄点简单的小玩意给自己洗洗脑咯。简单地效果图如下：CSS实现进度条：html结构： 70%css样式：#progress{ widt...
阅读全文
摘要：前言 响应式web设计这两年比较热，主要还是因为移动设备浏览器的使用量已经快速增长并未来很大可能超过PC端，也就是说，未来网页的浏览终端越来越多样化，用户可以通过桌面电脑，笔记本，平板，智能手机甚至宽屏...
阅读全文
摘要：上次发了一篇使用Javascript来实现弹出层的效果，这次刚好用了JQuery来实现，所以顺便记录一下：因为这次使用了Bootstrap来做一个项目，但是由于不使用Bootstrap自带的JS插件，所以这个弹出登录框就自己实现封装来调用，做出来的效果其实和Bootstrap自带的效果差不多。OK，...
阅读全文
摘要：初见animate.css的时候，感觉很棒，基本上很多常用的CSS3动画效果都帮我们写好了，所以想要哪一种效果直接就可以拿过来用，甚是方便：效果展示官网：http://daneden.github.io/animate.css/github下载地址：https://github.com/danede...
阅读全文
