首页

关于

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

阅读更多

极客技术专题【010期】:jQuery初学者入门 - jQuery effects

jQuery初学者入门 - jQuery effects

技术专题:jQuery初学者入门【第四讲:jQuery effects】

分享人:极客标签技术编辑 - Nelly (请站内关注分享人)

授课时间:2013/08/29(周四)  20:00-21:00

课程类型:公开

专题难度:初级

课程时间:60min

课程大纲:

上周我们介绍了jquery的Event操作,本周我们将继续了解-- jquery effects

"课程平台"使用帮助:如何使用极客社区"在线课程平台"?

如何进入课程

  • 已报名用户:进入课程日历后底端有工具条提示,可提前进入指定课程
  • 未报名用户:需要等待课程开始时间后,进入课程日历后,点击对应日历项进入课程

标签: CSS3, jquery, gb互动技术分享, 初学入门, 免费在线课程

阅读更多

极客技术专题【008期】:CSS3核心技术:选择器

极客技术专题【008期】:CSS3核心技术:选择器

技术专题介绍

技术专题:CSS3核心技术:选择器

专题演讲稿:CSS3选择器

分享人:知名前端技术博客 - w3cplus.com 博主 - 大漠 (请站内关注分享人)

资 深Web前端工程师,W3CPlus创始人,目前就职于上海携程 (Ctrip)。2010年开始从事 Drupal 主题制作工作,是 Drupal 社区团队最早成员之一。现久居上海,从事 Web 前端工作,关注移动端、CSS3、Sass等最新技术,目前正在撰写一本关于CSS3的中文书籍

授课时间:2013/08/24(周六)  20:00-21:00

课程类型:公开

专题难度:初级

课程时间:60min

课程介绍:

在这节技术分享课中, 大漠将帮助大家深入了解CSS3选择器的奥秘

  • 授课方式:课程平台 - 请选择当前技术分享日期并且点击进入即可
  • 报名方式:社区用户请在课程日历中点击"课程报名"即可,这样会在你的近期课程日历中添加对应课程的报名提示

"课程平台"介绍和帮助:如何使用极客社区"在线课程平台"?

特别提醒:

如果大家想订阅我们的课程时间列表,请任选我们下方的三种方式,我们会在第一时间将课程公布这里。

标签: 分享, 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, 前端框架

阅读更多

HTML5介绍 - HTML5的特长,特性及其相关资源

HTML5介绍 - HTML5的特长,特性及其相关资源

什么是HTML5?

HTML5 是万维网联盟(W3C)推出的最新的超文本标记语言。第一稿出版于2008年,但是直到2011年才真正的发展起来。在2011年的时候,HTML5开始发布,人们逐渐开始使用它,但是相关的浏览器对它的支持仍很贫乏。直到今日,几乎所有主流浏览器(Chrome,Safari,Firefox,Opera,IE)都提供了对 HTML5的支持,现在才是HTML5真正发挥它特性的时候。

HTML5和CSS3目前仍在开发中。W3C计划明年发布一个稳定版本,但是看起来这仍是一个胆大的冒险。从HTML5发布至今,它一直在持续发展中,W3C添加了越来越多令人印象深刻的特性,因此看起来HTML5的开发远远不会结束,当然这并不是一件坏事。

HTML5是1999年首次发布的HTML4.01的继任者。从1999年开发网络开发有了翻天覆地的变化,HTML5的出现是必然的。新出的标记语言建立在预留标准上:

  • 新特性基于HTML,CSS,DOM和JavaScript
  • 对外部的插件(如Flash)的需求需要减少
  • 错误处理要比过去的版本更加简单
  • 脚本被更多的标记所替代
  • HTML5特性必须与设备无关
  • 开发过程必须对大众是可视的

HTML5的新特性?

HTML5…

标签: 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

阅读更多

47款超酷超实用的CSS3技巧教程

如果你已经足够精通CSS3的话呢,那么它带给你的惊喜和乐趣已经不言而喻了吧,它不仅可以帮助你创建出最优美的设计,还可以大大提高你的工作效率。今天我们给大家推荐的这47套CSS3教程无疑可以带给大家巨大的帮助,不光是专业开发人员,即使初学者也同样适用。在这套CSS3教程中,我们收集了足够多的小技巧可以更巧妙的运用在你的网站设计中,你可以用它们更好的优化你的网站。还等什么呢?快来试试吧。

相关阅读:推荐20款最新的超棒CSS技术教程

1. Swatch Book with CSS3 and jQuery

Demo

2. 3D Thumbnail Hover Effects

Demo

3. Create a Stunning Menu in CSS3

Demo

4. More Efficient CSS3 Transitions

Demo

5. Create Fluid Layouts with CSS3 and HTML5

Demo

6. Mastering CSS3 Multiple…

标签: CSS3, CSS3tutorials, techniques, CSS3教程, CSS3使用技巧

阅读更多

22个精心挑选的超棒CSS3在线演示

CSS3能够帮助你开发出超棒的动画和特效,你是不是想了解究竟它能够帮助你创建多么具有冲击力的web设计和动画吗?看看我们这一组精心收集的CSS3在线演示吧,绝对给你视觉上的强烈冲击。希望大家喜欢,如果你也有不错的CSS3演示,请留言和我们分享,谢谢!

On/Off FlipSwitch

一个超帮的在线制作纯CSS3开关的应用,你可以不使用图片生成漂亮动态的开关。包含了iOS,Android,blackberry和一般几种风格。

20个精心挑选的超棒CSS3在线演示

CSS3 family tree(家谱)

CSS3实现的家族图谱

家族图谱

超棒Zocial免费CSS3按钮

一套带有icon的免费CSS3按钮,相信肯定能找到你喜欢的类型。

CSS3按钮

Carve Me

一个生成浮雕效果的CSS3演示

Carve Me

Bokeh

超棒的CSS3渐变光晕效果

Bokeh

Monster

移动鼠标你看到什么效果了吗?

Monster

Tilt Shift

CSS3的超酷字体效果

Tilt Shift

I Love Blur

一个很棒的CSS3模糊效果

I Love Blur

Flashlight

一个CSS3手电筒光照效果…

标签: CSS技巧, CSS3, CSS3在线演示, CSS3 demo

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.