使用 line-clam 控制段落行数

在2016年3月谷歌率先支持了 line-clam 用于控制一段文字的行数显示。这个时候实现省略号的方式有多饿一种。 先查看下目前的浏览器支持的情况: 也就是说如果在移动端浏览器上支持已经非常广泛，可以在移动端的页面大胆实现在PC上我们还需要考虑降级。 我们需要在装文本内容的部分设置如下样式： overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 效果如下： See the Pen KmOzOd by Jack Pu (@Jack_Pu) on CodePen. 其中 line-clam 表示需要显示的行数。而 display 和 -webkit-box-orient 则需要是盒子类型和以及子元素的排列方式。其中末尾的符号与 text-overflow 的设置相关。如果你设置了 ellipsis 那么末尾就是常见的 省略号了。 如果你使用 sass 或者 less 等 预编译系统，的话如果 -webkit-box-orient 被移除掉了，你可以参考 https: 详情 »

查看详情

实现日本网站字体模糊动画效果

如果经常浏览日本的网站，你会看到日本网站经常会实现在页面中字体添加从模糊到正常的特效。 推荐两个网站，浏览效果: koshiki-stay,是一家提供旅游的网站 houjyuen, 一家园林网站 当然还有很多网站使用了类似效果，你可以 iiiimg 查看一些比较漂亮和充满创意交互的站点。 基本实现 想到模糊，目前前端有两种基本实现 canvas canvas 你需要写一个模糊算法，你可以参考 Codepen 的想法， 关于算法，你还能自行搜索实现。底层原理就是对像素的操作。 css3 filter:blur() 现在移动端和PC的主流浏览器都开始对 CSS Filter 进行支持了，详情可以参考 浏览器的兼容性情况 filter 可以支持很多效果函数: blur contrast opacity url 这里我们主要是用到 blur 这个函数，它可对当前元素进行高斯模糊，效果如下; See the Pen Blur Filter by GRAY GHOST (@grayghostvisuals) on CodePen. 基本样式 详情 »

查看详情

《转》主流视频格式介绍

原文地址: http://www.cnblogs.com/wind128/p/4437675.html 现在存在各种视频太多了，工作需要，所以将它们都记录下来，至少也该知道它到底是怎么一回事，虽然没有办法去理解所有视频使用的算法，但是了解一下还是有必要的。 MPEG Moving Picture Expert Group，即运动图像专家组格式，是以下MPEG-1、MPEG-2等视频格式的总称，VCD、SVCD、DVD就是这种格式。MPEG格式是运动图像 压缩算法的国际标准，它采用了有损压缩方法从而减少运动图像中的冗余信息。 MPEG的压缩方法保留相邻两幅画面绝大多数相同的部分，而把后续图像中和前面图像有冗余的部分去除，从而达到压缩的目的。 MPEG-1 常用扩展名：.mpg、.mlv、.mpe、.mpeg、.dat 常用领域：电脑视频、影碟 简介：MPEG-1标准制定于1992年，它是针对1.5Mbps以下数据传输率的媒体资源设计，是数字存储媒体运动图像及其伴音编码而设计的国际标准。MPEG-1相信是大家接触得最多的了，因为目前其正在被广泛地应用在 VCD 的制作和一些视频片段下载的网络应用上面，大部分的 VCD 都是用 MPEG1 格式压缩的 详情 »

查看详情

React-core-image-upload V2.2 is released

React-core-image-upload is a really light-weight plugin for react.js developers to upload his images. Now you could also compress and crop image via this plugin. The xhr2 help us to gain more ability to handle files. Last two days, we were trying to migrate Vue-core-image-upload to react.js one. And all the new features of Vue-core-image-upload 详情 »

SVG 中 viewport 与 viewbox 的区别

之前做 weex-svg 的时候，开发者第一次接触 SVG （手写那种，虽然很多情况都有设计师使用 AI 来完成这项工作，但还是不排除需要利用到 svg 的每个 元素）。 才开始，大家都会困惑于 viewBox 和 viewport这两个属性，大家可能也会看到 svg 代码中的千奇百怪。是的，自己也曾为此困惑，宝宝当时内心: 之前自己在做 SVG 学习笔记 的时候，也曾翻译过 Jakob Jenkov 的 关于 [viewport 与 viewbox] (http://tutorials.jenkov.com/svg/svg-viewport-view-box.html) 的区别。 翻译地址: http://events.jackpu.com/svg/#/prop-viewbox-and-viewport 今天再详细的说下这两者的属性。 viewport viewport 也就是 可视区域 详情 »

查看详情

[译]使用 Three.js 制作虫洞效果

原文地址: http://codepen.io/Mamboleoo/post/tunnel-animation-1 @Louis Hoebregts 如果你对下面的效果非常好奇的话，那么今天这篇文章就是要告诉你们如何实现一个类 虫洞的特效动画。 同样我也在 agency’s 2017 使用了这样的效果。而我将在这篇文章中解释其中的原理和基本实现。 我们需要创建一个管道然后在里面会设置一个相机运动。然后我们会丰富我们这个管道的外在样子。 我们使用了 Three.js 来完成基本的动画，如果你对 Three.js 不怎么了解，你可以先阅读 Rachel Smith's posts 来了解一些基本知识。 建立场景 作者使用的codepen编辑，不过这里会补上欠缺的 首先我们加入一些基本 Three.js 代码来实现 一个基本的 Three.js Demo. 在 html 代码中添加 canvas <!DOCTYPE html> <html> < 详情 »

使用wbepack CLI 迁移到webpack2

Webpack2 已经出来许久，但是由于配置写法的变化，很多人还没有迁移。关于 webpack2 的一些变化可以阅读这篇文章 What's new in webpack 2。 如果你计划从 webpack2 迁移到 webpack2 的话，关于配置如何进行更改可以从 这里 知道。但是今天主要是推荐另外一个命令行工具 webpack CLI。 它可以快速的生成webapack 配置和 进行配置迁移。 快速开始 首先我们得全局安装 webpack-cli： npm install -g webpack-cli 安装完成后我们可以通过使用 webpack-cli init webpack-addons-demo 来初始化一个配置目录文件，文件内容可以看 这里。当然webpack的目录模板也是可以自己开发的。 webpack 迁移 使用 webpack-cli 可以方便的完成我们从 v1 迁移到 v2。 直接使用命令: webpack-cli migrate webpack.config.js webpack 详情 »

查看详情

新博客的动画效果实现

最近重新写了 Ghost-theme 的主题。其中主要是取消了Icon-font，改为了SVG Sprite 。其次非常重要的板块首屏的Slide 和导航重新设计了。先看下具体的效果吧: 视频无法播放，可以查看 gif 图片 Slide 切换 切换动画 slide 的切换主要是利用了transform 和 animation 两个重要的属性。而切换的时间函数则需要用到 cubic-bezier(关于贝塞尔曲线的效果可以参考这里)。然后利用少量的JS和手势库就可以完成了。 基本结构 <div id="slideshow" class="slideshow"> <!-- slide --> <div class="slide"> <div class="bg-overlay" style= 详情 »

查看详情

vue-core-image-upload 2.1 Is Released

We are so happy to release the new version of vue-core-image-upload. We try to fix some bugs and support some new features. As the slogan: Do More For You We try to add some new features to handle the image files via pure javascript. There are some new features: Compress image in local browser Crop image 详情 »

查看详情

使用 React 开发 Atom 插件

Atom 是目前非常流行的编辑器，除了好用小巧的特点，它丰富的插件也给开发者提供了很多的便利性。 Atom 是基于 Electron 开发的，也就是说我们可以通过写 HTML + CSS + JavaScript 的方式来构建我们的桌面应用。而一个典型的Electron App 的架构如图: 其实我们在完成实际的插件的部分，也就是工作的最上层，使用我们前端最基本的知识去实现基本的需求。当然这一层的实现，可以有很多方式，你可以使用简单的JS 去创建视图窗口，你也可以使用一些框架，比如 Vue.js 以及今天提及的 React。React 最核心的一个目标: A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES React 的发展很迅速，现在不仅可以完成普通网站的开发，也能能够开发原生的App(React-Native)，也可以开发 VR 相关的内容 (React-VR), 当然桌面应用现在也是可以借助于 Electron 完成。 今天我们简单实现一个插件，通过菜单按钮，呼出对话框，然后完成输入字符串，并将字符串插入到我们的当前代码中。 创建项目 详情 »