首页

关于

超简单的纯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, 加载中

阅读更多

CSS3实现的图片加载动画效果

CSS3实现的图片加载动画效果

在线演示

使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强!

HTML

<ul class="grid effect-4" id="grid">
<li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>
<li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>
<li><a href="http://drbl.in/fWMT"><img…

标签: 分享, CSS3, CSS, 响应式设计

阅读更多

帮助自动生成页面任何元素的Label的CSS类库 - Label.css

帮助自动生成页面任何元素的Label的CSS类库 - Label.css

在线演示

如果你需要针对页面任何元素生成说明性文字的话,Label.css是个不错的选择,它是用纯CSS的代码帮助你添加页面元素的说明性文字或者打一个标识。

支持选项包括,显示文字的位置,包括上,下,左,右,中。 并且支持2种显示的动画效果: 淡入淡出和浮动。如果大家需要快速添加类似的效果,这个css是个不错的选择!

请点击在线演示查看效果,这里我们将说明文字放置在中部,试用浮动效果。

代码如下:

<figure class="label inside float middle" data-label="超棒的明星脸芭比娃娃">   <img id="pic" alt="gbtags.com" src="images/gbtags.jpg"> </figure>

网站地址:http://usablica.github.io/label.css

via…

标签: 分享, CSS3, CSS

阅读更多

支持Lazy loading的图片画廊jQuery插件 - Least.js

支持Lazy loading的图片画廊jQuery插件 - Least.js

在线演示

Least.js是一个jQuery开发的图片画廊,可以用来展示Pininterest风格的图片布局,它将无需的列表项目通过随机方式来加载。如果你点击任何图片的话,并不显示一个更大版本的图片,而是滑动其它的图片,在顶端生成更大的图片,类似Google图片搜索风格。

这个插件使用HTML5/CSS3的特性并且支持响应式的布局。

如何使用

导入类库

JS

<!-- least.js CSS-file -->
<link href="css/least.min.css" rel="stylesheet" />
<!-- jQuery libary -->
<script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script>
<!--…

标签: 分享, jQuery, CSS3, HTML5, js图片特效

阅读更多

CSS伪类的动画和过渡效果应用

CSS伪类的动画和过渡效果应用

在线演示

今天我们分享来自知名前端设计博客tympanus的另外一个实验性质的前端展示,这些在线演示很好的展示了CSS伪类来处理动画和过渡效果的独特之处,相信感兴趣的朋友肯定会觉得非常有兴趣的。

浏览器兼容:

  • Firefox
  • IE10
  • 最新版本chrome

友情提示:

这些效果支持的浏览器非常有限,如果你需要应用到产品环境中,需要你针对不同设备浏览器特殊处理!

来源网站:http://tympanus.net/codrops/2013/05/22/examples-of-pseudo-elements-animations-and-transitions/

via 极客标签

标签: 分享, CSS3

阅读更多

超棒的CSS3动画页面过渡效果

超棒的CSS3动画页面过渡效果

在线演示

如果你想了解如何构建CSS3的页面动态过渡效果的话,这套CSS3 keyframe的过渡效果演示,肯定能够帮你忙。

网站地址:http://tympanus.net/Development/PageTransitions/

标签: 分享, CSS3

阅读更多

帮助你更快的进行网站设计 - Markup Framework

帮助你更快的进行网站设计 - Markup Framework

Markup是一套布局,小组件,UI组件和字体排版样式的框架,可以帮助你快速的执行web相关的设计和开发,相信没有人愿意自己花时间从最基础的层次开发web应用或者是网站,而Markup恰好很方便的帮助你解决了所有的dirty work。

主要的特性

  • 使用最新的HTML5和CSS3标准
  • 最小化标签,页面体积小
  • 搜索引擎友好
  • 纯CSS和HTML,没有JS
  • 没有任何的Hack
  • 结构清晰,语义化
  • 模块化,很方便的混合组件
  • 高效的样式继承,优化了性能
  • 使用命名空间,减少了CSS规则冲突
  • 响应式,支持移动设备
  • 使用media queries
  • 扩展类库,重用界面小组件
  • 整合了开源的字体
  • 完整的文档
  • 快速的代码编写标准

浏览器支持

  • 所有的现代浏览器
  • 使用polyfill可以支持Internet Explorer 7和8.

网站地址:http://www.markupframework.org/

 

在线演示:http://www.markupframework.org/demos/

 

标签: UI, 分享, CSS3, HTML5, 前端框架

阅读更多

超棒的输入特效 - Fancy Input

超棒的输入特效 - Fancy Input

在线演示

今天推荐一个超棒的CSS3的输入特效 - fancy input,支持两种不同的输入元素:

  • input
  • textarea

拥有5种不同的输入特效,相信如果你需要炫酷的输入特效的话,这个插件肯定是一个不错的选择!

via gbtags

标签: 输入特效, CSS3

阅读更多

跳跃的圆形幻灯片

跳跃的圆形幻灯片

在线演示

今天我想要与你分享一个即简单又有趣的圆形幻灯片。这是一个实验性的概念,此想法是在一个特定的角度点击圆形图片,就会翻转到另一个圆形图片。分为 三种不同的可能性:顶部、中部、底部。例如,当单击右上部分的图像时,将在相关角度翻转,使它看起来好像我们压到的那部分翻了过去,显示出它背面的图像。

跳跃的圆形幻灯片

结构:

<div id="fc-slideshow" class="fc-slideshow">
<ul class="fc-slides">
<li><img src="images/1.jpg" /><h3>Hot</h3></li>
<li><img src="images/2.jpg" /><h3>Cold</h3></li>

标签: CSS3, HTML5, jQuery

阅读更多

使用jQuery和CSS3创建一个全屏幕幻灯效果

使用jQuery和CSS3创建一个全屏幕幻灯效果

在线演示  本地下载

在今天这篇文章中,我们将介绍来自于tympanus的一个全屏幻灯特效教程,在这个教程中将介绍如何使用jQuery和CSS3来实现一个全屏的幻灯特效,你将看到每一个幻灯都从水平或者垂直中间断开然后消失,使用不同的data-attributes属性来定义类型,旋转和角度等幻灯属性,这样我们可以创建非常独特的幻灯效果。

我们将使用到如下的插件:

  • jQuery cond by Ben Alman:帮助你使用链式来书写if-then-else语句
  • jQuery Transit by Rico Sta. Cruz:帮助你更见简单快捷的使用CSS3动画

浏览器支持:

iefirefoxchromeoperasafari

主要代码

HTML代码:

<div class="container">

<!-- Codrops top bar -->
<div class="codrops-top">
<a…

标签: jQuery, CSS3, jQuery全屏幕幻灯

阅读更多

推荐20款最新的超棒CSS技术教程

设计行业是当前发展最快的行业之一,设计师需要了解最新的视觉设计趋势,及其类似jQuery,HTML5,CSS3的互动技术。在今天 这篇文章中我想与大家分享这20个最新的CSS教程,大家可以参考里面的网页设计元素, 从中找到适合自己的内容。希望对大家都有所帮助!

Quickly Build a Swish Teaser Page With CSS3

Quickly Build a Swish Teaser Page With CSS3

How to Create a CSS3 Dropdown Menu [Tutorial]

How to Create a CSS3 Dropdown Menu [Tutorial]

Orman Clark's Vertical Navigation Menu: The CSS3 Version

Orman Clark's Vertical Navigation Menu: The CSS3 Version

Accordion with CSS3

Accordion with CSS3

Tutorial: CTA button without images using CSS3 and Entypo

Tutorial: CTA button without images using CSS3 and Entypo

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Pure CSS3 LavaLamp Menu

Pure CSS3 LavaLamp Menu

CSS3 signup…

标签: CSS, CSS教程, CSS3, 教程

阅读更多

CSS3浏览器在线兼容查询工具 - Browser Support

CSS3浏览器在线兼容查询工具 - Browser Support

今天我们介绍一个非常不错的用来查看不同浏览器下CSS属性兼容性的在线工具 - Browser Support,如果你需要查看不同浏览器下CSS的兼容性的话,这个工具肯定能帮你大忙,特别如果你想在你的项目中使用CSS3的话,这个工具肯定也是你不错的选择。

使用这个工具,你可以输入需要查询的属性,当然这个工具拥有自动补齐功能,使你可以更方便的查看不同的CSS属性。

CSS3浏览器在线兼容查询工具 - Browser Support

搜索结果会按不同的浏览器来展示兼容属性。

CSS3浏览器在线兼容查询工具 - Browser Support

是不是很方便?希望大家在web开发中能够用到这个在线工具。

标签: CSS, CSS3, 兼容查询工具, Browser Support, browsersupport.net

阅读更多

来自于Mozilla Networks演示工作室的超酷CSS3/Javascript动画演示

这个叫做DemoStudio的网站来自于Mozilla Developer networks,收集了很多超酷的CSS3和Javascript特效。因为都是实验产品,所以如果你使用这些技术,有可能在一些老的浏览器,比如,IE中无法正常工作。当然如果你有fallback的话,大可以使用这些技术。相信你肯定会喜欢这些超酷的特效。如果大家喜欢,请给我们留言!

折纸效果

相当不错的折纸效果

Paperfold

RotorJS

旋转3D操作类库 - 轻量级并且可扩展

RotorJS

3D图片过渡

类似flash效果的3D CSS过渡效果

3D Image transition

The Box

一个动画卡片和白纸的3D情节,由回收材料制成。

The Box

3D Flip list menu

一个翻动的3D菜单特效

CSS3 Reflection effect

动画菜单图标

小并且可缩放,纯CSS3实现的动画

Animated Menu Icons

Animated CSS3 Gallery

一个使用淡入缩放图片效果画廊

Animated CSS3 Gallery

The CSS Book

纯CSS实现的3D书效果

The CSS Book

via quaness.com

标签: HTML5, CSS3, Javascript, jQuery, jQuery Mobile, jQuery插件, 图标, 模板, iphone, ipad, 产品, 用户体验

阅读更多

分享一个独立灵活的Javascript通知类库 - Smoke.js

日期:2012/03/20  来源:GBin1.com

smoke.js

在线演示

今天我们分享一个灵活的超小js类库- Smoke.js ,这个类库可以有效的帮助你生成提示或者通知类型的界面元素,我们可以将它替换缺省的alert提示框或者是信息框。当然它也提供了很多人性化的特性和功能。

主要特性

  • 轻量级,使用简单并且灵活

  • 支持CSS3动画

  • 支持CSS的个性化设定,内建了几种不同的主题:

    • light style (缺省主题) 

    • dark style 

    • 100s style (最漂亮的主题) 

    • tiger style

如何使用?

使用这个类库非常简单,你只需要引入smoke类库,然后直接调用smoke方法:

smoke.signal('welcome to gbin1.com:  goes away for 5 seconds');       
smoke.alert('this is a normal alert');…

标签: javascript, js类库, CSS3, notification, alert, 通知, 消息

阅读更多

下一页

目录

© Copywrite by gbin1.com, all rights reserved.