分类目录归档:HTML5+CSS3

个性化html5中的video,打造属于自己的html5视频播放器

本文使用的都是CSS3以及html5中的video实现的播放器,在PC与手机端都可以完美播放,目前还未实现播放进度条的拖移功能,后续会增加这个功能。
demo效果查看地址:https://king2088.github.io/html5-vPlayer/
先看效果图:

html5 video
html5 video

首先我们要了解一下html5中的media事件以及属性 继续阅读个性化html5中的video,打造属于自己的html5视频播放器

老生常谈系列之CSS3画三角及画圆

这是一道前端开发中常常被问到的基础问题,该如何画一个三角形?该如何画一个圆?被问到的时候,可能在你脑海里飘过的就是“我好像在哪里看过,但是记不得了”,我们往往觉得很简单的问题,往往却被面试官问到脸红、紧张。下面就来说说利用css画出各种基本图形的代码。
1、画圆
画圆,我们可以利用CSS3中的border-radius方法具体使用是将一个四方形设置上等宽等高后,再去设置边框的弧度为宽高的一半

.circle{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: blue;
}

2、画三角形:
思路是将某两个边框设置为透明,然后设置三角形底边的边框颜色以及高度即可

//向上
.triangle-up{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 20px solid red;
}
//向左
.triangle-left{
    width: 0;
    height:0;
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid blueviolet;
}
//等边三角形,底边等于左右边的和
.triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
//直角三角形,四边形的相邻两边的边框设为一样的宽度,一边透明,一边有颜色
.triangle-90{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-bottom: 50px solid maroon;
}

继续阅读老生常谈系列之CSS3画三角及画圆

JavaScript按照经纬度坐标对比与目的地的距离

在开发中可能现在很多都在使用地图定位,而无需在进行复杂的计算距离的方法,因为计算已经被地图给代替了,我们也就不需要再进行坐标到坐标的距离计算了,但是当你只是想使用距离而不想使用地图的时候,你就得进行坐标计算了,这不我在一个项目中就遇到这样的问题,根据手机获取当前地理位置的坐标,然后再与目的地坐标(已知坐标)进行计算,并且得到距离,当然也可以实时更新手机坐标以获得最准确的距离。
下面我们直接看代码吧! 继续阅读JavaScript按照经纬度坐标对比与目的地的距离

使用css设置打印

我们都知道A4的尺寸是210mm * 297mm,在css中,我们可以直接使用毫米的单位来设置页面的宽高,当然你也可以使用相应的像素进行设置,不过只是通过body或者html来设置宽高的话,可能也会出现问题,而在这里我们需要使用@page来对页面进行定义,@page主要是用于打印的时候定义页面的类型,比如A4,A5,A3等等。下面先来看一下@page的使用方法。

@page{
  size: A4;
  margin: 0;
}

另外在设置好@page后,我们可能还会需要设置分页,分页很简单,直接使用page-break-before:always;或者page-break-after:always;就可以设置分页,在网页中是不会显示任何效果的,不过你可以通过浏览器的打印功能进行PDF预览来查看分页是否符合你的要求。
不过分页的使用必须的写在@media print中,使用如下:

@media print{
  .page-break{
    page-break-before:always;
  }
}

.page-break是需要分页的class的元素。
继续阅读使用css设置打印

CSS3 美化表单

表单美化在前端开发中经常使用到,CSS3中有很多对我们有利的伪类和属性选择器,今天主要来说说使用属性选择器和label来进行美化,不使用伪类。
首先,先来看下美化后的相关效果:

form表单美化
form表单美化

下面我们来看看实现的思想:
1、首先隐藏input
2、在label中设置背景即可

首先我们要先了解一下几个关于浏览器的知识点:
浏览器中,chrome在input的focus的时候会自动增加一个蓝色的外边框,以及select下拉,在Firefox和chrome下的显示都不一样,如下图chrome中的显示: 继续阅读CSS3 美化表单

移动端H5前端性能优化

技术上,HTML5大行其道:

1:有数据显示,截至2015,有80%的App全部或部分基于HTML5。

2:谷歌浏览器于9月1日起不在支持自动播放Flash。

3:亚马逊旗下网站(包括Amazon.com门户在内)的所有广告将不再使用flash。在可预见的未来,flash广告将被HTML5广告所取代。

移动端+HTML5,这个组合对前端工程师来说是个不小的挑战:如何让开发的页面能有更好的体验?这就是我们今天讨论的话题:移动端HTML5页面前端性能优化。

如何优化HTML5在移动设置上的性能表现,首先需要明确以下几个原则:

1、PC优化手段在Mobile端同样适用。 继续阅读移动端H5前端性能优化

webstorm配置less编译环境

我们先说下less吧,less就是一个变异版本的CSS,但是less却给我们编写css减少了很多麻烦,通过手写less,编译成css是非常方便的。
如果你习惯使用的开发工具是Dreamweaver,那么建议你直接使用国人开发的koala less编译工具进行编译。如果你习惯使用webstrom和sublime工具,就可以使用node.js进行配置相关的less编译环境。下面主要说webstrom下的less编译环境的配置。
首先,你得安装node.js安装好了以后,直接在命令行运行以下命令

npm install less -g

即可安装less编译环境。
下面就是配置webstrom了。 继续阅读webstorm配置less编译环境

CSS3中Animate动画解析

Animate动画现在越来越流行,并且对于触屏设备支持良好,特别是对于webkit内核的浏览器支持特别良好。webkit浏览器诸如chrome以及Safari,因此在Android及IOS设备上运行效果是杠杠的。Animate正如flash一样,都是通过帧来控制动画的,如果你之前学习过flash或者使用过adobe flash软件,你就能够明白帧是什么意思了。
一、Animate动画初识
1、浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-
2、代码分析
首先我们来看一段Animate的动画代码 继续阅读CSS3中Animate动画解析

html5+css3制作多屏简单动画

首先动画是使用CSS3的animate实现的,因为animate使用方便,而且在手机端运行也很流畅。大家先看演示吧http://egtch.com/demo/css3app/,在手机端浏览效果也很好。

一、准备工作

1、jQurey最新版

2、jQurey插件fullpage.js

二、Animate动画

大家可以直接从http://daneden.github.io/animate.css/下载animate.css使用,可以根据自己的需求选择自己想要的效果来使用。

三、代码部分 继续阅读html5+css3制作多屏简单动画