2016年09月_yeana1

原创 css3动画由浅入深总结

一：过渡动画---Transitions一：过渡动画---Transitions含义：在css3中，Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。Transitions属性的使用方法如下所示：transition: property | duration | timing-function | del

2016-09-30 16:12:19 862

原创聊聊Clip-Path

前言图片是一个网站必不可少的元素，而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作，通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题，实际项目中可能用的比较少，包括博主自己也只是用过几次剪切，很多情况下都交给设计师去做了。但作为一个hacker怎么能满足于此呢，必须深入探究！正文Flilterfilter有十种特效来处理图片，博主只放几种特效的

2016-09-29 15:15:23 1406 5

原创探索 CSS3 中的 box-shadow 属性

挖掘你之前未曾见过的一些应用。“box-shadow”属性box-shadow属性是一个CSS3属性，允许我们在几乎任何元素上来创建阴影效果，类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度（第三维）的错觉。语法box-shadow属性接收一个由5个部分组成的值box-shad

2016-09-28 15:57:18 1164

原创整理总结的一些前端面试题

HTML面试题1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。2.前端页面有哪三层构成，分别是什么?作用是什么?结构层 Html

2016-09-26 15:11:53 1473

原创 CSS3 单选框动画特效

Action one首先，来看一下我们的第一个特效注意，这个地方的黄点不是我们特效的一部分，这个黄点之所以存在是我使用的屏幕录制软件自带的。可以很清楚的看到这个特效就是当我们点击的时候，黑点会以一种缩放的动画显示出来，下面来看看具体如何实现。<divclass="radio-1"> <inputtype="radio"n

2016-09-23 15:26:00 638

原创 css3中flex布局教程：语法篇

网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性+ position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能

2016-09-22 15:38:24 686

原创前端单元测试之Karma环境搭建

前言在前端开发中，测试常常是被忽略的一环。因此最近在研究前端自动化测试框架Karma，把个人的学习过程分享出来，希望对大家有帮助。什么是Karma？Karma是由Google团队开发的一套前端测试运行框架。它不同于测试框架（例如jasmine，mocha等），运行在这些测试框架之上。主要完成一下工作：Karma启动一个web服务器，生成包含j

2016-09-21 15:37:49 1245

原创你不可不知的 HTML 优化技巧

如何提升Web页面的性能，很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置，文件压缩或是调整CSS。很显然HTML 已经达到了一个瓶颈，尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素，页面Size会更大。如何有效的降低HTML 代码的复杂度和页面元素

2016-09-20 15:06:02 465

原创 CSS进阶：试试酷炫的 3D 视角

写这篇文章的缘由是因为看到了这个页面：https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1（移动端页面，使用模拟器观看）运用 CSS3 完成的 3D 视角，虽然有一些晕3D，但是使人置身于其中的交互体验感觉非常棒，运用在移动端制作一些 H5 页面可谓十分博人眼球。

2016-09-19 15:52:30 723

原创细说 webpack 之流程篇

引言目前，几乎所有业务的开发构建都会用到 webpack 。的确，作为模块加载和打包神器，只需配置几个文件，加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合，它的整体流程及思想对我们来说还是很透明的。那么接下来我会带你了解 webpack 这样一个构建黑盒，首先来谈谈它的流程。准备工作1. webstorm

2016-09-18 15:46:08 2246

原创 JavaScript设计模式与开发实践 – 观察者模式

概述观察者模式又叫发布 – 订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个目标对象（为了方便理解，以下将观察者对象叫做订阅者，将目标对象叫做发布者）。发布者的状态发生变化时就会通知所有的订阅者，使得它们能够自动更新自己。观察者模式的使用场合就是：当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变

2016-09-14 14:53:36 465

原创为什么要用 Node.js？

这是一个移动端工程师涉足前端和后端开发的学习笔记，如有错误或理解不到位的地方，万望指正。Node.js 是什么传统意义上的 JavaScript 运行在浏览器上，这是因为浏览器内核实际上分为两个部分：渲染引擎和 JavaScript 引擎。前者负责渲染 HTML + CSS，后者则负责运行 JavaScript。Chrome 使用的 JavaScript 引擎是 V8，它的

2016-09-12 16:08:47 1217

原创如何设置链接样式

前言通常我们在设置链接的一些伪类（link，visited，hover，active）样式时，要让不同的状态显示正确的样式，我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍，即 link-visited-hover-active，可记为 LoVe-HAte 。要想弄明白为什么是这个顺序，首先我们需要知道，CSS在确定应当向一个元素应用哪些样

2016-09-10 15:08:54 1197

原创移动端样式小技巧

平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。一、line-heightline-height经常用于文字居中，当然也有小伙伴会用上下padding去写.b

2016-09-09 15:49:04 1275

原创九个Console命令，让 JS 调试更简单

一、显示信息的命令常用console命令 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /> <scripttype="text/javascript">

2016-09-08 15:43:51 511

原创打造高大上的Canvas粒子动画

首先来看下我们准备要做的粒子动画效果是怎么样的~是这样：或者是这样：甚至是这样：很酷炫！那如何去实现类似上面的粒子动画甚至根据自己的喜好去做更多其他轨迹的动画呢~请看下面详细的讲解。技术选择因为粒子数量很多，而且涉及到图像像素处理，所以这里使用Ca

2016-09-07 16:03:38 14718 9

原创用 CSS3 绘制你需要的几何图形

1、圆形示例:思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：html: css:.size{ width:200px; height:200px; background:#8BC34A;}.example1{

2016-09-05 15:50:42 850

原创使用纯前端JavaScript 实现Excel IO

最近要为某国企做一个**统计和管理系统，具体要求包含Excel导入导出根据导入的数据进行展示报表图表展示（包括柱状图，折线图，饼图），而且还要求要有动画效果，扁平化风格Excel导出，并要提供客户端来管理Excel 文件…要求真多！现在总算是完成了，于是将我的经验分析出来。在整个项目架构中，首先就要解决Exce

2016-09-02 16:10:38 2647 1

yeana1的博客