HTML/CSS/JAVASCRIPT
CSS动画:Transform中使用频繁的scale,rotate,translate动画
动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作.1.scale动画的定义:(单位数值)scale动画,是将对象进行伸缩操作.scale有两个属性,第一个是宽(X)的伸缩,第二个是高(Y)的伸缩,数值是以倍数的方式变化.他也可以分开定义scaleX,scaleY;根据自己的需要设定.CSS代码案例:.scale{
width: 100px;
height: 100px;
&n
CSS3中动画transform必须要了解的Skew变化原理
吴统威 on
编程语言
HTML/CSS/JAVASCRIPT
| 2015-12-10 09:50:35.0
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理.skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直都不知道他的变化规则.所以使用起来有点摸不着头脑.动画上的使用,也就没那么优先考虑.skew有两个属性: skewX,skewY.其实变化也就针对这两个值来操作.首先我们来看,最基本的skew术语.图中这个方形是一个BOX,skew的默认原点是盒子的中心点(0,0)横向为Y轴,纵向为X轴,这跟我们以往接触到的坐标轴,刚好是相反的.这个图应该很好理解.下面我们来做一个skewX(10deg)的变化.铅
分享第一波:分享第一波:13个漂亮的网页模板,喜欢你就拿走
由于喜欢闲逛到墙外的世界,所以有时候会遇见比较美丽的画面,比如设计模板,页面模板等等,其实现在我收集了很多这方面的东西,主要是用来学习之用,比如CSS,HTML5的学习,页面布局,素材管理等等.下面先分享这13个漂亮的网页模板,当然自己也可以下载来使用,下载链接放到文章后面了,需要的可以拿走.Sept - Free Bootstrap 3 ThemeBlue App - Free One page Responsive HTML5 parallax business app landing pagewalam-multi-purpose-coming-soon-free-html
H5中需要掌握的 Animation 动画效果
CSS3的动画在PC网页上或者APP上用得越来越多,比如H5页面的应用,目前在营销传播上的意义比较大,还有企业官网或者APP主要介绍也用得比较多,当然还有很多地方都用到.所以学习css的动画也迫在眉睫.那我们就进入主题!animation 属性在CSS中可以使用其他的css属性,来实现动画,例如color,background-color,height或者width.每一个动画需要定义@keyframes 动画名,作为animation的属性值,例如:.element {
animation: pulse 5s infinite;}@keyframes pulse {
&n
Flex 网格布局及响应式处理
上一篇文章用Flex实现BorderLayout,这一章我们来实现常用的网格布局和响应式处理.首先我们定义HTML结构,主Box为grid,每项为grid-cell,下面就是我们HTML代码结构.<div class="grid">
<div class="grid-cell">
1
</div>
&n
CSS3 中flex快速实现boxlayout布局
吴统威 on
编程语言
HTML/CSS/JAVASCRIPT
| 2015-12-03 08:28:15.0
学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代码的也同样很熟悉,包括html的框架frame.但以往的CSS中使用float浮动来进行控制,控制起来相对来说是复杂一些,也需要加入更多的标签和代码.看完这个界面,我们就可以着手写出标签的代码布局:<div class="parent">
<header>北</header>
&nb
CSS3中更灵活的布局方式
吴统威 on
编程语言
HTML/CSS/JAVASCRIPT
| 2015-12-02 11:11:20.0
flex是一个灵活性强的布局方式,它能够很好的控制内部元素的宽度,高度或者剩余的空间部分,来适应不同的显示设备和不同的屏幕尺寸,而真正达到一种自适应效果.flex布局与常规布局截然不同,常规布局虽然在页面上显示很好,但对于大而复杂的项目,在方向改变,自适应大小,伸展和收缩等方面缺乏灵活性,flex最适合作为应用程序的组件,小规模布局使用;网格布局适用大规模布局.flex整个模块不只是一个属性,它涉及很多东西以及一系列属性.设置为flex标签的被称为flex容器,而这个容器内的子节点元素称为flex项.如果常规布局是基于块和内联布局的话,flex可以称为flex流方向布局我们来看看下面这个图例,
Cocos2d-js 结构
吴统威 on
编程语言
HTML/CSS/JAVASCRIPT
| 2015-07-28 13:41:40.0
Cocos2d-js 是创建html5游戏的游戏引擎.我们来看看他的结构.然后我们看下目录结构目录解释CocosDenshion声音支持.注意,两种声音格式支持所有浏览器cocos2d主目录,包含任何和维护同Cocos2d-x 和 Cocos2d-iPhone一样的API.平台兼容性设计得好,box2dBox2dweb 物理引擎.版本 v2.1achipmunkChipmunk物理引擎,没有版本号.Demo这里有两个例子,可以从这里开始学习extensions如果你想查阅更多的GUI控件,EditBox,CocosBuilder support,CocosStudio 支持,或者第三方库,就在
HTML5 Camera(摄像头) 和 Video(视频)控制
吴统威 on
编程语言
HTML/CSS/JAVASCRIPT
| 2015-04-05 23:09:17.0
最近写了一个上传头像的功能,主要是使用了HTML5的方法来开发.主要从两个方面处理.一是通过input文件控件,二是通过摄像头,今天我们主要是从摄像头来处理.那我们开始怎么从浏览器中获取摄像头的操作.首先我们先编写HTML代码<video id="video" width="640" height="480" autoplay></video>
<button id="snap">拍照</button>
<c