xuefeng3600
- 浏览: 28304 次
- 性别:
-
最新评论
文章列表
分享一款非常经典实用的响应试web分类选项卡，它会根据浏览器不同的尺寸显示出三种不同的布局。
demo演示 下载地址
分享一个采用流瀑布网格布局的响应试3d切换画廊，该效果的灵感来源于Chromebook（谷歌笔记本）的入门指南，当你点击流瀑布中的内容元素时便会展示出相应的画廊滑块，你还可以通过键盘左右方向键对滑块内容进行切换，对于小屏幕而言滑块内容会根据屏幕尺寸进行相应的调整。
demo演示 下载地址
今天向大家分享一款种类极为丰富的图片元素切换特效，你可以在下拉框选项中选择自己想要的元素切换效果，目测一共有小图切换，背景切换以及产品元素等三款切换效果，而且每一款切换又包含多种切换方式，种类可谓极其丰富。最重要的是你可以在同一个页面运用多种切换效果，而且完全不会受到限制或者冲突的影响。
演示地址 下载地址
我们在制作网页的时候常常会用到loading加载动画，尤其是加载图片的时候，加入一个小的加载动画背景可以在一定程度上减少用户等待所产生的焦虑情绪，可以说是提升用户体验的小细节吧。
在svg出现之前我们选择加载动画一般都是通过gif格式的图片实现的，但也有一个弱点就是gif图片一旦做出来就无法改动了，但svg实现不同，它可以通过代码随时修改加载的动画效果,可实现的种类非常丰富。
单从加装速度而言我觉得没太多的可比性，因为大家体积都很小，相对于目前的网速来说，可以说微不足道。喜欢哪种大家可以自己去衡量，今天继续向大家分享一款通过svg实现的六个loading加载 ...
从早期的网页flash幻灯片，再到目前大量采用jquery实现的幻灯片，在前端开发的这个领域，幻灯片技术的发展早已不仅仅满足与于渐变和滑动这两中形式。前端开发者们已经开始将3d视觉效果以及更加丰富的动画特效融入到幻灯片中。
今天向前端爱好者们分享一款倾斜视角3d立体滑动幻灯片，该效果十分融入了目前流行的3d透视技术，并将图片和文字的切换做了一些时间差的调整。
FWA这个网站就采用了该效果
演示地址 下载地址
这是一个html5 3d 翻转的幻灯片演示特效，展示了HTML5和js搭配实现的3D立体翻转效果。乔布斯当年曾预言新一代web技术html5将会在web页面中大量使用，我明白了为什么他当年不惜自身的苹果设备抛弃flash而大力支持html5技术的推广。
演示地址 下载地址
fotorama是一款十分简洁易用的拖拽式幻灯片，我们平常使用ipad等平板电脑或者智能手机在浏览图片相册时，一般都是使用手指进行来回拖动，所以，如果你想找一个可以支持这些设备的拖拽式滑动幻灯片，fotorama正好可以满足你的需求。
演示地址 下载地址
Justified是一款综合性的lightbox插件，具备鼠标经过缩略图,标题渐变显示以及常用的灯箱特效。你可以通过Justified提供的js属相修改缩量图的对齐方式，或者是否具备lightbox等功能。
演示地址 下载地址
Galereya是一个易于使用和修改的响应试画廊特效插件，支持键盘左右切换和自动暂停播放，Galereya还加入了流瀑布分类与图片预加载功能一步到位。
演示地址 下载地址
分享一款鼠标经过图片文字覆盖特效，通过纯css实现。
演示地址
分享一款利用纯css实现的鼠标经过背景变换特效。
演示地址 下载地址
分享一款采用html5 canvas 实现的心形绘制动画。
演示地址 下载地址
今天分享一个非常实用的技术，通过该方法你可以轻松的将它使用到文章的缩量图方面，而不需要特意的用photoshop等软件对图片进行重新的裁切。
采用该方法有一个好处就是它自身的灵活性，你可以自定义图片裁切的位置，而你要做的就是需根据需要简单的修改一下HTML代码就足够了。
实现的效果
焦点裁切技术是由一个名叫Adam Bradley的作者所创建的，响应试图片概念的大致意思就是图片自身能够跟随浏览器窗口范围的变化自由调整自身的大小，但是该方法不同于自适应图片的地 方，就是图片本身并不会根据浏览器窗口的变化来调整自身的大小，而是会对图片进行适当的裁切。
...
owl.carousel是一款多功能图片滚动插件，它本身具备了八种类型的旋转木马图片滚动功能，前端开发者们可以根据自身需求定制出多种类型的旋转效 果，实用性和可定制性都非常强，兼容所有主流浏览器，如果你正在寻找旋转木马的图片滚动插件，使用owl.carousel是再适合不过的了！
演示地址 下载地址
目前响应试web页面已经逐渐开始盛行，除了将页面的内容以及布局结构实现响应试以外，剩下的重点就是实现导航栏的响应试，当然方法有很多，不过最 近我发现了一个新的无需使用Javascript就能轻松实现响应试导航栏的技术，它采用的是简洁的html5标签结构来实现的应式导航栏，导航栏能够被 轻松的控制在左侧，中部，已经右侧。当鼠标经过导航栏时就会平滑拉菜单，不仅如此该响应式导航栏在手机屏幕和ie浏览器中也同样能够正常运行。
这篇文章的目的是让大家能够知道 如何将普通的导航栏转变成小型的可伸缩的下拉菜单。
这种技术非常适合用于多栏目导航栏，如下图所示你可以 ...