- 博客(77)
- 收藏
- 关注
RSS订阅原创 CSS3 动画卡顿解决方案
前端时间用 animation 实现 H5 页面中首页动画过渡，很简单的一个效果，首页加载一个客服头像，先放大，停留 700ms 后再缩小至顶部。代码如下html>head lang="zh-cn"> meta charset="utf-8"> meta name="viewport" content="width=device-width,initial-scale=1.
2016-10-08 15:21:36
37067
3
原创 css3动画由浅入深总结
一：过渡动画---Transitions一：过渡动画---Transitions含义：在css3中，Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。Transitions属性的使用方法如下所示：transition: property | duration | timing-function | del
2016-09-30 16:12:19
880
原创 聊聊Clip-Path
前言图片是一个网站必不可少的元素，而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作，通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题，实际项目中可能用的比较少，包括博主自己也只是用过几次剪切，很多情况下都交给设计师去做了。但作为一个hacker怎么能满足于此呢，必须深入探究！正文Flilterfilter有十种特效来处理图片，博主只放几种特效的
2016-09-29 15:15:23
1417
5
原创 探索 CSS3 中的 box-shadow 属性
挖掘你之前未曾见过的一些应用。“box-shadow”属性box-shadow属性是一个CSS3属性，允许我们在几乎任何元素上来创建阴影效果，类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度（第三维）的错觉。语法box-shadow属性接收一个由5个部分组成的值box-shad
2016-09-28 15:57:18
1181
原创 整理总结的一些前端面试题
HTML面试题1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。2.前端页面有哪三层构成，分别是什么?作用是什么?结构层 Html
2016-09-26 15:11:53
1482
原创 CSS3 单选框动画特效
Action one首先，来看一下我们的第一个特效注意，这个地方的黄点不是我们特效的一部分，这个黄点之所以存在是我使用的屏幕录制软件自带的。可以很清楚的看到这个特效就是当我们点击的时候，黑点会以一种缩放的动画显示出来，下面来看看具体如何实现。<divclass="radio-1"> <inputtype="radio"n
2016-09-23 15:26:00
655
原创 css3中flex布局教程：语法篇
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性+ position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能
2016-09-22 15:38:24
701
原创 前端单元测试之Karma环境搭建
前言在前端开发中，测试常常是被忽略的一环。因此最近在研究前端自动化测试框架Karma，把个人的学习过程分享出来，希望对大家有帮助。什么是Karma？Karma是由Google团队开发的一套前端测试运行框架。它不同于测试框架（例如jasmine，mocha等），运行在这些测试框架之上。主要完成一下工作：Karma启动一个web服务器，生成包含j
2016-09-21 15:37:49
1254
原创 你不可不知的 HTML 优化技巧
如何提升Web页面的性能，很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置，文件压缩或是调整CSS。很显然HTML 已经达到了一个瓶颈，尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素，页面Size会更大。如何有效的降低HTML 代码的复杂度和页面元素
2016-09-20 15:06:02
473
原创 CSS进阶：试试酷炫的 3D 视角
写这篇文章的缘由是因为看到了这个页面：https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1（移动端页面，使用模拟器观看）运用 CSS3 完成的 3D 视角，虽然有一些晕3D，但是使人置身于其中的交互体验感觉非常棒，运用在移动端制作一些 H5 页面可谓十分博人眼球。
2016-09-19 15:52:30
742
原创 细说 webpack 之流程篇
引言目前，几乎所有业务的开发构建都会用到 webpack 。的确，作为模块加载和打包神器，只需配置几个文件，加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合，它的整体流程及思想对我们来说还是很透明的。那么接下来我会带你了解 webpack 这样一个构建黑盒，首先来谈谈它的流程。准备工作1. webstorm
2016-09-18 15:46:08
2263
原创 JavaScript设计模式与开发实践 – 观察者模式
概述观察者模式又叫发布 – 订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个目标对象（为了方便理解，以下将观察者对象叫做订阅者，将目标对象叫做发布者）。发布者的状态发生变化时就会通知所有的订阅者，使得它们能够自动更新自己。观察者模式的使用场合就是：当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变
2016-09-14 14:53:36
474
原创 为什么要用 Node.js？
这是一个移动端工程师涉足前端和后端开发的学习笔记，如有错误或理解不到位的地方，万望指正。Node.js 是什么传统意义上的 JavaScript 运行在浏览器上，这是因为浏览器内核实际上分为两个部分：渲染引擎和 JavaScript 引擎。前者负责渲染 HTML + CSS，后者则负责运行 JavaScript。Chrome 使用的 JavaScript 引擎是 V8，它的
2016-09-12 16:08:47
1226
原创 如何设置链接样式
前言通常我们在设置链接的一些伪类（link，visited，hover，active）样式时，要让不同的状态显示正确的样式，我们需要按一定的顺序设置这些伪类的样式。这里我就按CSS2规范中推荐的顺序进行介绍，即 link-visited-hover-active，可记为 LoVe-HAte 。要想弄明白为什么是这个顺序，首先我们需要知道，CSS在确定应当向一个元素应用哪些样
2016-09-10 15:08:54
1205
原创 移动端样式小技巧
平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。一、line-heightline-height经常用于文字居中，当然也有小伙伴会用上下padding去写.b
2016-09-09 15:49:04
1286
原创 九个Console命令，让 JS 调试更简单
一、显示信息的命令 常用console命令 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /> <scripttype="text/javascript">
2016-09-08 15:43:51
523
原创 打造高大上的Canvas粒子动画
首先来看下我们准备要做的粒子动画效果是怎么样的~是这样：或者是这样：甚至是这样：很酷炫！那如何去实现类似上面的粒子动画甚至根据自己的喜好去做更多其他轨迹的动画呢~请看下面详细的讲解。技术选择因为粒子数量很多，而且涉及到图像像素处理，所以这里使用Ca
2016-09-07 16:03:38
14745
9
原创 用 CSS3 绘制你需要的几何图形
1、圆形示例:思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：html: css:.size{ width:200px; height:200px; background:#8BC34A;}.example1{
2016-09-05 15:50:42
865
原创 使用纯前端JavaScript 实现Excel IO
最近要为某国企做一个**统计和管理系统，具体要求包含Excel导入导出根据导入的数据进行展示报表图表展示（包括柱状图，折线图，饼图），而且还要求要有动画效果，扁平化风格Excel导出，并要提供客户端来管理Excel 文件…要求真多！现在总算是完成了，于是将我的经验分析出来。在整个项目架构中，首先就要解决Exce
2016-09-02 16:10:38
2660
1
原创 从零开始，DIY一个jQuery（1）
这会是一段很长的历程，但也会很有意思 —— 作为前端领域的经典之作，jQuery 里有着太多奇思妙想，如果能够深入理解它，对于我们稳固js基础、提升前端大法技能来说大有裨益。另外，本系列的相关代码均可以从 我的github 上获取到。1. 免 new 实现我们在使用很多插件的时候，都需要使用 new XXX() 的写法来实例化一个引用:var
2016-08-18 16:05:05
391
原创 使用CSS3实现60FPS动画
使用动画在移动应用程序中很容易的。如果您遵循我们的建议，移动应用程序中使用动画变得很简单。虽然现在很多人在移动应用程序中使用CSS3 Animation来制作动画，当然很多人也不这么做。很多最佳实践，还是不断的被忽视。出现这种情况主要是因为仍有许多人并不真正了解这些最佳实践存在的真正原因，因此没有大力的支持。面对这么多的终端设备，如果不考虑优化你的代码，你最终将会交付一个水平一般的效果，从
2016-08-17 16:11:41
1761
原创 也纳人才教你Vue.js60分钟快速入门！
Vue.js介绍Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM
2016-08-16 16:10:37
658
原创 CSS3弹性伸缩布局（二）——flex布局
上一篇博客《CSS3弹性伸缩布局(一)——box布局》介绍了旧版本的box布局，而这篇博客将主要介绍最新版本的flex布局的基础知识。新版本简介新版本的Flexbox模型是2012年9月提出的工作草案，这个草案是由W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现统一。这里我们还是继续上一篇博客中的例子，使用最新
2016-08-15 15:02:23
712
原创 CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介2009年，W3C提出了一种崭新的方案—-Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端
2016-08-13 15:54:46
2196
1
原创 Android开发----AsyncTask的使用以及源码解析
01AsyncTask使用介绍AsyncTask封装了Thread和Handler，通过AsyncTask可以很方便地在执行完后台任务后更新UI。。 1.1 AsyncTask实例使用下面是一个使用AsyncTask的实例，利用网络下载某URL里的字符串，以模拟耗时任务。在下载过程中，会通过进度条对话框向用户展示进度。在完成任务后将字符串展示在TextView
2016-08-12 16:21:15
378
原创 Android自定义控件之日历控件
三月份学习android，至今也有半年有余，中间也做过两个项目，但是依然感觉自己做的应用不是很有新意，比不上应用市场上那些应用如此绚丽。所以自己仍需继续努力。学习至今，仍感觉自定义控件是一块硬骨头，还没修炼到身后的内功，下面就切入正题，以一次项目的需求，来实现一个自定义的日历控件。效果图先来一发。我们分析下效果图，然后确定我们的需求。（1）、绘制星期的自定义View，用于标识日期的
2016-08-11 16:11:39
1111
1
原创 Android探索之旅|Android Studio配合Lint检测缺失Permission
读完文章大概需要1.5分钟“近来有一个Android小项目需要优化, 包括从AndroidManifest.xml删除不必要的permission(权限)。需要删除的权限有点多, 而我又不是很确定哪些权限对于App是必要的。如果我这样做: 每删除一个权限, 就运行一下App, 看各样功能正常不, 那就太费时间了。或者, 我可以写Android Instrumentation
2016-08-10 15:45:37
4217
原创 非常酷！CSS3三角形运用！
概述在早期的前端Web设计开发年代，完成一些页面元素时，我们必须要有专业的PS美工爸爸，由PS美工爸爸来切图，做一些圆角、阴影、锯齿或者一些小图标。在CSS3出现后，借助一些具有魔力的CSS3属性，使得这些元素大多都可以由开发人员自己来完成。在开始阅读这篇文章前，我们先喊个口号：不想当艺术家的程序员不是好设计师！本文的Demo和源代码已放到GitHub，如果您觉
2016-08-09 16:05:00
1532
1
原创 安卓实战开发之JNI入门及高效的配置
前言以前也讲过NDK开发，但是开始是抱着好玩的感觉去开始的，然后呢会helloWord就觉得大大的满足，现在静下来想这NDK开发到底是干什么呢？NDK开发，其实是为了项目需要调用底层的一些C/C++的一些东西；另外就是为了效率更加高效些但是在Java与C相互调用时平白又增大了开销（其实效率不见得有所提高）,然后呢，基于安全性的考虑也是为了防止代码被反编译我们为了安全起见
2016-08-08 16:22:34
865
原创 CSS3初体验之奇妙技巧！
自CSS3流行以来，虽然以前看过一遍所有的新增属性，但其实在实际项目中用到的少之又少。所以没有形成系统性的认识，以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求，所以决定趁此机会好好研究一下这个既熟悉又陌生的css3。在正式开始css3之前，先来介绍一些比较经典的css3实例，让大家好好感受一下css3的魅力，本文会提到以下几个css3的属性：
2016-08-06 15:35:59
433
原创 手把手教你玩转酷炫CSS3 3D技术！
要玩转css3的3d，就必须了解几个词汇，便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。平移同理。当然用理论来说明，估计你还不明白。下面是3个gif：沿着X轴旋转沿着Y轴
2016-08-05 15:53:04
994
原创 React Native学习实践：动画初探之加载动画！
学习和实践react已经有一段时间了，在经历了从最初的彷徨到解决痛点时的兴奋，再到不断实践后遭遇问题时的苦闷，确实被这一种新的思维方式和开发模式所折服，但react也不是万能的，在很多场景下滥用反而会适得其反，这里不展开讨论。有了react的实践经验，结合之前自己的一点ios开发经验，决定继续冒险，开始react-native学习和实践，目前主要是从常规的native功能入手，逐步用r
2016-08-04 15:35:47
1391
原创 Android 属性动画详解，属性动画基本用法！
Hello，大家好，今天要给大家讲的是Android 属性动画详解！在Tween动画的讨论中，我们提到在Android中动画可以分为三类：①帧动画②Tween(补间动画)③Property Animation(属性动画)，在前面的文章中，分别对帧动画和Tween动画进行了非常详细的讨论，如果有兴趣可以去上面的链接去阅读。那么今天就来和大家一起讨论下Property Animation，相信通过
2016-08-03 15:26:39
2646
原创 React Native如何做跨平台设计
React Native 的一大优势是：可以只用一种语法编写分别运行在 iOS 和 Android 平台上的程序，且可重用部分应用逻辑。然而，与“一次编写，到处运行”的理念不同的是，React Native 的哲学是“一次学习，到处编写”。如此一来，即使用 React Native 编写不同平台的程序，也可以尽可能贴合每个平台的特性。从 UI 的角度来看，每个平台都有自己独特的视觉风格、U
2016-08-02 15:37:23
5392
1
原创 Retrofit2 完全解析 探索与okhttp之间的关系（三）
五、retrofit中的各类细节（1）上传文件中使用的奇怪value值第一个问题涉及到文件上传，还记得我们在单文件上传那里所说的吗？有种类似于hack的写法，上传文件是这么做的？public interface ApiInterface { @Multipart @POST ("/api/Accounts/editaccount")
2016-08-01 15:27:31
1170
原创 Retrofit2 完全解析 探索与okhttp之间的关系（二）
四、retrofit 源码解析ok，接下来我们队retrofit的源码做简单的分析，首先我们看retrofit如何为我们的接口实现实例；然后看整体的执行流程；最后再看详细的细节；（1）retrofit如何为我们的接口实现实例通过上文的学习，我们发现使用retrofit需要去定义一个接口，然后可以通过调用retrofit.create(IUserBiz.class);方法，得到一个接口的
2016-07-30 15:21:25
643
原创 Retrofit2 完全解析 探索与okhttp之间的关系(一)
一、概述之前写了个okhttputils的工具类，然后有很多同学询问这个工具类和retrofit什么区别，于是上了下官网，发现其底层对网络的访问默认也是基于okhttp，不过retrofit非常适合于restful url格式的请求，更多使用注解的方式提供功能。既然这样，我们本篇博文首先研究其所提供的常用的用法：一般的get请求（如何通过注解携带参数，拼接url）一般的
2016-07-29 15:42:32
953
原创 CSS3基础入门学习： 背景制作实例！
CSS3 背景CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。在本章，您将学到以下背景属性：background-sizebackground-origin您也将学到如何使用多重背景图片。浏览器支持Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。CSS3 background-size 属性
2016-07-28 15:26:20
700
原创 用CSS3打造HTML5的Logo
用CSS3打造HTML5的Logo本文将向大家介绍如何利用CSS3的新样式属性制作一个HTML5的Logo。我们先来看看最终的效果：不要怀疑，上面的logo完全由HTML+CSS实现。我们将logo划分为盾形、数字5和辐射背景三大部分，下面将分别实现每个部分。>>>>盾形盾形在外形上是左右对称的，因此我们可先完成左半边，右半边可复
2016-07-27 15:54:54
1363
原创 玩转HTML5移动页面——动效篇
作为一名前端，在拿到设计稿时你有两种选择：1.速输出静态页面2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。前方高能(1)CSS3时序
2016-07-26 16:34:26
7701
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人