首页风格
门户
博客

技术开发

推荐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

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

阅读更多

前端代码回放: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

阅读更多

jQuery导航菜单置顶插件 - stickyUp

jQuery导航菜单置顶插件 - stickyUp

在线演示

stickyUp是一款可以帮助你生成置顶效果的jQuery插件,如果你希望生成一个固定页面顶端的导航效果,可以使用stickUp来快速生成。

主要代码如下:

jQuery(function($) {
    $(document).ready( function() {
    $('.navbar-wrapper').stickUp({
      parts: {
        0:'home',
        1:'features',
        2: 'updates',
        3: 'installation',
        4: 'one-pager',
        5: 'extras',
        6: 'wordpress',
        7: 'contact'
      },
      itemClass: 'menuItem',
      itemHover: 'active',
      topMargin: 'auto'
    });
    });
});

Github:https://github.com/LiranCohen/stickUp

标签: #文章, jQuery插件, 导航菜单

阅读更多

快速提升CSS编码能力的五个必备知识点

快速提升CSS编码能力的五个必备知识点

作为web开发人员,无论你是前端开发或者是后端开发,也无论你是新手还是大神,对于CSS的知识了解都是需要,在这篇文章中,我们将从五个不同的角度帮助大家快速的提升自己的CSS水平,如果你能够在以下五点有所突破的话,CSS的编码能力肯定会有一定的提升。

1. 了解CSS中的定位(position)

快速提升CSS编码能力的五个必备知识点

如果你需要深度的了解CSS如何移动HTML元素,或者控制元素的位置和显示的话,定位是一个不可获取的基本知识,而且除了了解简单和具有普遍性的定位外,你需要了解他们具体的不同。

其实这里包含了5个基本的定位方式,如果你不能直接说出名字来的话,那么你需要好好的了解一下这方便的知识了,包含:

  • static
  • relative
  • absolute
  • inherit
  • fixed

以上五种定位你都需要了解,但是实际最常用的是relative和absolue。

2. 熟练的掌握float

快速提升CSS编码能力的五个必备知识点

当你初次学习CSS的时候,float肯定是最让你头疼的地方,但是一旦你了解了基本的知识,你就慢慢会了解如何处理clear…

标签: css, css3, 编码, php

阅读更多

10款超实用的jQuery即时通知插件

10款超实用的jQuery即时通知插件

如果大家使用Gmail邮件的话,肯定对于它位于顶端的即时通知非 常熟悉,你的所有操作或者操作中出现的错误都会在这里及时的显示并且提醒用户, 和传统的alert风格的提示不一样的地方在于,它不打断当前的用户使用,能够带给用户更好的用户体验,而传统的alert方式,必须让用户点击一下确认 才可以继续操作。

在今天这篇文章中,我们将介绍10款帮助你快速开发即时通知功能的JQuery插件,希望大家喜欢!

相关阅读:

10款精挑细选的jquery插件

推荐9款提高表单用户使用体验的超棒jQuery插件

Noty

Noty是一款使用非常简单的即时通知插件,你可以使用非常简单的代码生成提示效果,并且支持主题设置,自带有几款主题,所有的CSS都被写入了 Javascript中,修改也很方便,支持大量选项,可以方便的生成提示,警告,报错样式,提示的页面位置也可以方便的设置,推荐使用!

在gbtags.com的社区中,使用的也是这款插件

标签: jQuery, jQuery插件, 极客标签

阅读更多

下一页

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

?ü?à

今日推荐