`
文章列表
前言 前段时间看到一个国外的网站,在线生成ajax loading动画。觉得很实用,于是动起了移植到自己网站的念头(一直以来的习惯,看到好的工具总想着移植到本地好好研究)。根据以往移植的经验最终把 这个工具移植到自己网站上了,生成图片的核心还是用了原来网站的接口,所以这个功能的实现完全依赖于原网站,生成和下载图片的速度取决于网速,由于是国外 的网站,功能并不稳定。下面介绍下我移植的过程已经遇到的问题。 1.把原网站的代码本地化 这一步比较简单,不过有点麻烦,相关的图片,css,js,html文件保存在本地。 2.实现生成图片的功能 这里遇到了第一个问题,网站生成的图片保存在根据颜色值 ...
前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法。 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧。 1.获取图像数据   img.src = ’http:
1.灰度效果 图片过滤效果之灰度效果 算法及原理: .299 * r + .587 * g + .114 * b;
      1.获取上传图片对象数据  
第二版在第一版的基础上增加了一个动态3D的白云效果背景,鼠标悬浮在页面上云朵会向屏幕Z轴方向运动,在第一人称视角看来向着云朵方向前进的,由此形成一个伪3D效果。有点绕,直接看demo就能理解了。3D白云效果是基于threejs框架做的。
介绍 一个基于基于Html5的爱情主题,文字采用打字机效果,逐字打印,并带有键盘敲击声音。在chrome,safari,firefox,IE10下都有效,chrome下效果最佳。要注意的是safari下不支持audio标签属性没有声音效果(暂未解决)。 技术要点 文字效果采用本地化字体 @font-face 动态的心型用到的是HTML5的canvas 打字机声音效果采用HTML5的audio属性
最近在研究WebGL,看到国外很多高手做的很多超炫的3D效果,无比羡慕。忍不住把效果趴下来研究,下面介绍一个逼真的游泳池中浮动小球的效果。效果非常绚丽,功能强大。示例可切换观察水池的视角,不同视角考虑到了光线从不同角度折射和反射的影响,所以波纹效果极其逼真。 先介绍下WebGL WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了 ...
    随着对css3了解得越深入,越来越发现了css3的强大。css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此,甚至一些复杂的图片也能通过css3实现,没有做不到,只有想不到。在逛国外的一些前端设计网站时发现一些国外牛人的奇思妙想--用纯粹的css3画的一些公司的Logo,不得不承认国外的技术比国内要先进很多。 下面是收集到的一些纯css3写的logo 先给出下载地址
中国气象局提供了三个天气查询的API接口: 【1】http://www.weather.com.cn/data/sk/101190101.html 【2】http://www.weather.com.cn/data/cityinfo/101190101.html 【3】http://m.weather.com.cn/data/101190101.html 以json格式返回数据,第一和第二个接口返回当天实时的天气数据,第三个返回未来五天天气情况。 其中地址里的加粗显示的数字表示城市的代码:101190101 代表南京(获取城市代码的方法下面会说明) 第三个接口的返回数据示例及说明 ...
随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3。网页能表达的东西越来越多,css3兴起已经很多年了,不多由于国内网站要求对IE的兼容,html5+css3的发展很缓慢。 html5+css3的出现给前端开发者提供了更多的可能性,以前很多只能通过JS实现的效果用纯粹的css3就能实现了。 下面介绍一个博主在css3学习过程中写的一个纯css3实现的带动画效果的导航菜单。 下面是效果图:
对css3研究越深入,越觉得惊艳。css3说不上是万能的,但是它能实现的效果也超出了我的想象。它的高效率和动画效果的流畅性很多情况下能替代js的作用。个人习惯css3能实现的效果就不会用js,虽然在国内貌似没有css3的用武之地,这一点完成不能阻挡我对css3的热情。博主是一个地道的开源支持者,在学习css3的过程中写的一些demo会贴出来跟大家分享,都是一些想法最简单的实现,当然会有很多问题,希望大家指正,一起学习,一起进步。 下面贴一个纯css3实现的仿真图书翻页效果,只是一个很粗糙的雏形,后续会慢慢完善。欢迎大家提供宝贵的意见。 效果图
随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了。用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小。其中css3中的动画效果可以实现流畅而强大的动画效果,下面我们来看看css3的能量吧。   下面介绍一个博主完成的纯css3实现的仿安卓开机动画,可爱的安卓机器人。 效果图:
前面讲过css3可以替代很多js实现的效果,其实很多时候纯css3甚至可以替代图片,直接用css3就可以画出一些简单的图片。虽然css3画出来的图片效果可能不如直接用图片的好,实现起来也比较复杂,最麻烦的是兼容性问题,不如图片来得直接实用。但是换一种思路去思考问题的解决办法往往能激发我们的灵感,也有助于我们学习css3。 下面给出的demo里会有用图片和纯css3实现的风车效果的对比。 先看看静态的效果图:
Global site tag (gtag.js) - Google Analytics