首页风格
门户
博客

GBin1博客视图 - 最近发布的文章-demo

推荐9款使用CSS3实现的超酷动画效果

大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。本周极客社区推荐9款使用CSS3实现的超酷前端动画效果。希望对大家有所帮助!

让我们晃动起来 - CSS小脚本工具:CSS Shake

推荐9款使用CSS3实现的超酷动画效果

本地演示

UI或者网站设计中,或许在某些情况下你希望你的用户能够关注某一个区域或者某一个界面元素,过去大家常用的方式是使用一个GIF图片,或者土一点儿方法生成一个高亮的区域,但随着浏览器的发展及其CSS动画的实现,我们可以借助一点点代码来生成。

在今天这篇小文章中,我们将介绍一个小巧的CSS脚本工具 - CSS Shake,它能够帮助你快速高效的生成一个"晃动"效果,你可以通过它来添加一个晃动效果到你的页面元素中。

标签: css, css3

阅读更多

前端代码回放:使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验

前端代码回放:使用Bootstrap3和Ladda UI实现的多种按钮

在这个代码回放中,我们将使用Bootstrap3和Ladda UI设计概念来开发一个超酷的加载中效果,大家可以方便的应用这种设计概念到你的web应用或者网站开发中,希望大家觉得有帮助!

全屏播放地址: http://www.gbtags.com/gb/rtreplayerpreview/9.htm

更多代码回放请访问:极客标签社区

阅读更多

前端代码回放:使用CSS Media queries生成一个响应式的导航菜单

前端代码回放:使用CSS Media queries生成一个响应式的导航菜单

在这个代码回放中,我们将使用Media Queries来生成一个最基本的响应式导航菜单,代码非常简单,相信大家能够比较快的了解如何开发一个响应式导航,希望大家喜欢!

全屏播放地址: http://www.gbtags.com/gb/rtreplayerpreview/7.htm

更多代码回放请访问:极客标签社区

阅读更多

前端代码回放:jQuery实现的dribbble最受欢迎作品集瀑布流效果

前端代码回放:jQuery实现的dribbble最受欢迎作品集瀑布流效果

使用jQuery,isotope,jdribbble实现的一个瀑布流效果,文字教程请参考: 响应式的dribbble作品集魔术布局展示效果

全屏播放地址: http://www.gbtags.com/gb/rtreplayerpreview/7.htm

更多代码回放请访问:极客标签社区

阅读更多

前端代码回放:使用Phaser开发一款HTML5网页版本的flappybird

前端代码回放:使用Phaser开发一款HTML5网页版本的flappybird

Phaser是一款开源的HTML5游戏类库,可以帮助你快速的开发基于HTML5的游戏,提供了相关很多特性,例如,物理,动画,preloader等等特效。

更多信息请浏览主页查看具体:http://phaser.io/

在这个前端代码回放中,我们将教大家一步一步的开发一个slappy bird类型的游戏,通过这个开发,大家能够快速的熟悉如何使用phaser.io来开发HTML5游戏。

全屏播放地址: http://www.gbtags.com/gb/rtreplayerpreview/3.htm

更多代码回放请访问:极客标签社区

阅读更多

前端代码回放:CSS3基础动画入门 - 八种基础动画效果

在这个代码回放中,我们将介绍最基础的CSS3动画,包括8种不同的动画效果,希望能够给帮助大家了解最基本的CSS3动画使用

点击"运行"播放代码回放

全屏播放地址: http://www.gbtags.com/gb/rtreplayerpreview/2.htm

阅读更多

25个帮助大家设计超棒滚动体验的jQuery插件

大家都知道在最近几年的web设计趋势和流行设计元素中,超棒的滚动效果绝对是不可或缺的一个设计元素,特别是在单页面网站,或者个人作品集中,大家往往更容易看到类似的设计效果,特别是视差滚动,相信大家看到的网站肯定不在少数,在今天这篇文章中,我们将汇集了25个超棒的滚动相关的jQuery插件,帮助你创建超棒的各式滚动效果,希望大家喜欢,推荐大家收藏并且保存到自己的收藏夹里,绝对物超所值!

Scrolld.js

 

Cool Kitten

 

FoldScroll 

 

fullPage.js

 

AnimateScroll

 

Parallax.js

 

Jarallax

 

jInvertScroll

 

jQuery Full Content

 

One Page Scroll

 

jQuery Parallax

 

Scroll…

标签: jQuery, #文章, jQuery插件, 视差滚动

阅读更多

超棒的视差效果jQuery插件 - FractionSlider

在线演示

如果你希望找到一款与众不同的jQuery幻灯插件的话,Fractionslider/ 肯定会让你眼前一亮,和传统幻灯不同的是,它可以让页面中的任何元素生成独立的动画效果。

使用非常简单,如下:

引入CSS和JS





    
  1. <link href="fractionslider.css" rel="stylesheet" />
  2. <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
  3. <script type="text/javascript" src="jquery.fractionslider.js"></script>

HTML





    
  1. <div class="slider"><!--…

标签: #文章, jQuery, jQuery插件, 幻灯特效

阅读更多

帮助减少JS请求的node.js工具-DynoSrc

帮助减少JS请求的node.js工具-DynoSrc

DynoSrc是一个帮助Node.js服务器应用高效发布JS到客户端的解决方案,使用比对的方式来更新JS相关资源。

好处在于能够最小化HTTP请求,DynoSRC通过HTML响应加载JS文件,并且保存到本地存储。你甚至可以在HTML响应中来调用DynoSRC客户端类库,减少所有JS的请求。

基本通常来说,如果你的网站的JS有任何变化,你的用户需要下载整个文件,即使只是一个部分修改变化。DynoSRC可以帮助你发送变化的部分,而不用下载整个文件。

网站地址: http://dinosrc.it/

标签: nodejs, javascript, DynoSrc

阅读更多

超简单的纯CSS3加载中效果

超简单的纯CSS3加载中效果

CSS3实现的加载中效果非常简单,我们在AJAX请求或者后台处理的UI中常常使用。

这里有一个简单的实现方式,代码如下:

/**
* (C)Leanest CSS spinner ever
*/

@keyframes spin {
to { transform: rotate(1turn); }
}

.progress {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
animation: spin 1s infinite steps(8);
}

.small.progress {
font-size: 6px;
}

.large.progress {
font-size: 24px;
}

.progress:before,
.progress:after,
.progress…

标签: CSS3, 加载中

阅读更多

超轻量级的jQuery Dashboard插件 - sDashboard

超轻量级的jQuery Dashboard插件 - sDashboard

sDashboard是一个款超简单的轻量级的Dashboard jQuery插件,能够将一组对象数组生成一个dashboard。每一个数组中的对象元素都可以渲染生成一个dashboard的组件,并且支持拖拽重新组织。

sDashboard内建了针对数据库和flotr2图表支持。同时支持时间的监听例如,表格中行的单击,数据选择及其单击事件。

sDashboard基于如下类库:

  • jQuery
  • jQuery UI
  • 数据库
  • Flotr2图表

类库要求: jQuery

 


在线演示: http://modeln.github.io/sDashboard/

标签: jQuery, jQuery插件, dashboard

阅读更多

免费的SVG图案工具网站 - SVGgeneration

免费的SVG图案工具网站 - SVGgeneration

SVG是一种非常灵活的文件格式,可以方便的缩放,操作,并且被所有的主流浏览器支持。

SVGeneration是一个可以帮助你创建SVG文件的拥有丰富特性的网站,制作的SVG文件可以方便的整合到我们的项目中。

站内目前拥有很多不同的图形,并且我们也可以自由的贡献自己的图片内容,通过web的编辑器所有的图形文件都可以自定义(例如,颜色,尺寸),并且可以自动生成SVG + CSS代码。

网站地址: http://www.svgeneration.com/

标签: svg, SVGgeneration

阅读更多

HTML5的仿本地应用移动端UI互动开发框架 – Ionic

Native App Development With HTML5 - Ionic

本地移动应用往往速度更快,更流畅并且拥有更好的用户体验,作为web开发设计人员来说,寻找新的方式和技术来实现类似的效果和UI是我们的重要的责任。

Ionic,是一个前端的框架,帮助你快速的使用HTML5,CSS3,Javascript创建本地效果的移动应用。

使用Ionic不是为了取代PhoneGap或者JS框架,它主要是帮助开发人员创建UI界面和互动。

这个框架使用SASSS和AnguarJS扩展,并且包含其它的组件,例如,按钮,切换,页头/页脚,tab栏及其其它。

拥有完整的文档,包含了完整的教程和例子 ,大家可以方便的了解和学习

网站地址: http://ionicframework.com/
下载地址: https://github.com/driftyco/ionic/

标签: ionic, 前端框架, frameworks, HTML5

阅读更多

下一页

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐