7种Material Design风格打开菜单按钮特效演示

7种Material Design风格打开菜单按钮特效演示

这是一款效果非常炫酷的Material Design风格打开菜单按钮特效。该特效有7种不同的效果,每一种效果中都可以通过点击主菜单按钮来打开一组主菜单按钮,各种打开子菜单的动画效果各不相同。 HTML 这7种打开菜单按钮特效的基本HTML结构都非常相似:使用一个<section>来作为包裹元素,里面使用一个div元素来作为按钮组包裹元素。然后在其里面放置一个button元素作为主菜单按钮,在用一个div包裹一组超链接元素作为子菜单。 ……
Buttons-CSS按钮样式库

Buttons-CSS按钮样式库

Buttons-CSS按钮样式库 Buttons 是一个基于 Sass 和 Compass 构建的CSS按钮(button)样式库,图标采用的是Font Awesome,可以和Bootstrap融合使用。支持多种形状和尺寸的按钮样式可供选择,带边框和不带边框的按钮,3D 按钮,突起样式的按钮,长阴影,光晕效果,带下拉菜单的按钮,堆叠按钮,额外的环绕效果,各种文字样式。[caption id="attachment_902" align="aligncenter" width="584"] 样式效果[/caption] ……
css3实现苹果手表applewatch开机动画特效

css3实现苹果手表applewatch开机动画特效

 html5+css3 实现一个苹果表拨号动画实例,本文我们使用keyframe动画和一些小技巧来实现苹果标表盘进度条动画,效果还是比较炫的。  HTML <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title></title><link rel="stylesheet" href="index.css" type="text/css" /></head><body><section class="demo-containe……
css3 box-sizing属性教程

css3 box-sizing属性教程

  介绍 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。content-box,border和padding不计算入width之内。padding-box,padding计算入width内。(火狐浏览器支持该属性,谷歌浏览器不支持,w3c上也无该属性)border-box,border和padding计算入width之内,其实就是怪异模式了~ PS:ie8+浏览器支持content-box和border-box,ff则支持全部三个值。使用……
css3中webkit-box的用法[教程]

css3中webkit-box的用法[教程]

[caption id="attachment_854" align="aligncenter" width="305"] 实例3截图[/caption] webkit-box 一、前言 1、之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性,浏览器会帮我们做额外的计算。?PS : ?css3不支持低版本浏览器,建议用最新版本谷歌或火狐浏览器! 二……
纯CSS3制作漂亮的价格表

纯CSS3制作漂亮的价格表

网页上发布产品时,一般都有几套价格方案,通常我们将几套方案放在一起,用户可以相互比较决定购买哪个套餐。最常见的是主机商发布产品价格信息页,本文结合实例给大家分享以纯CSS+HTML实现的价格表。  HTML 我们以星美数据产品为例,将HTML结构布局好。其实我们所说的价格表并不是表格,全是ul,li元素组成,通过CSS来美化,展现在我们面前的页面效果看似表格而已。 <div id="pricePlans"> <ul id="p……
纯css3可扩展搜索框代码

纯css3可扩展搜索框代码

可扩展纯css3圆形搜索框是一款适合移动和响应的设计。效果非常酷,但是不支持低版本的IE浏览器哦.css部分代码 input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; /* remove the search and cancel icon……
CSS3美化复选框checkbox

CSS3美化复选框checkbox

我们知道HTML复选框默认的风格很简单,和处理图片代替复选框将美化页面形式的麻烦,那么这篇文章会带你一起的例子看看CSS3使复选框复选框样式美化使用,带来凉爽的滑动效果。  HTML 通常我们使用以下html结构,我们给复选框定义id#checkbox_a1,然后使用label的for属性与之关联,这样的话,用户点击label的时候,实际上就相当于点击了#checkbox_a1。 <input type="checkbox" id="checkbox_a1" class="chk_1" ……
CSS 阴影-CSS3 box-shadow

CSS 阴影-CSS3 box-shadow

今天我们探讨一下CSS3中的另一个属性box-shadow的使用方法。CSS3的box-shadow有点类似于text-shadow,只不过不同的是text-shadow是对象的文本设置阴影,而box-shadow是给对象实现图层阴影效果。今天我们接着一起来探讨一下CSS3中的另一个属性box-shadow的使用方法。CSS3的box-shadow有点类似于text-shadow,只不过不同的是text-shadow是对象的文本设置阴影,而box-shadow是给对象实现图层阴影效果。本文我们搁下IE不谈,只谈……
jQuery+CSS3投票结果动态图表

jQuery+CSS3投票结果动态图表

jQuery+CSS3投票结果图表是一款基于jQuery和CSS3的投票结果展示图表非常适合在投票应用中使用。 首先引进css和jquery文件,然后调用如下代码.<script type="text/javascript"> $(document).ready(function(){ $('.skillbar').each(function(){ $(this).find('.skillbar-bar').animate({ width:$(this).attr('data-percent') },6000); }); }); </script>下载地址????演示地址
漂亮jQuery和CSS3制作数字时钟(jQuery篇)

漂亮jQuery和CSS3制作数字时钟(jQuery篇)

HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的。 <div?id="clock"?class="light">? ????<div?class="display">? ????????<div?class="date"></div>? ????????<div?class="digits"></div>? ????</div>? </div>?jQuery CSS代码请参照上一篇文章,本文不再啰嗦,直接看jQuery代码。首先我们定……