W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。今天发现这个属性很有意思。这里有一篇详细的技术博客：http://www.w3cplus.com/content/css3-transition原文：http://www.cnblogs.com/lkp-blog/p/5295562.html
E:target 表示当前的URL片段的元素类型，这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件 E:checked 表示已选中的checkbox或radioE::after 生成内容在E元素后 E:not(s) 表示E元素不被匹配 E~F表示E元素毗邻的F元素E:first-line选中第一行文字E:first-letter选中第一个字E::selection 当文字被选中时触发效果【注意是双冒号】Content 属性：E:after 利用content属性在元素末尾添加内容E:before...
[CSS3 字体CSS3 @font-face 规则使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。 使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。 当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。 您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。 您"自己的"的字体是在 CSS3 @font-face 规则中定义的。浏览器支持表格中的数字表示支持该属性的第一个浏览...
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS3:透明度</title><style type="text/css">div{width:100px;height:100px;margin: 40px;display: inline-block;background-color: #ee3e80;}p{width: 100px;height: 100px;position: relative;top: 20px;left: 20px;margin:20px;}p.one {background-color: rgb(0,0,0);opacity: 0.5;}p.two {background-color: rgb(0,0,0);background-color: rgba(0,0,0,0....
从页面上放出来@-webkit-keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; }}@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; }}从外面往里面缩放@-webkit-keyframes zoomOut {from {opacity: 1...
W3C标准中对CSS3的transition是这样描述的：CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。简洁点说就是当元素从一种样式变换为另一种样式时为元素添加效果。transition主要有***四个属性***，那这四个属性怎么记呢？变换的话总得有变换的属性名吧，知道是要哪个属性变，还得有变换的持续时间吧，持续时间里...
1. 下载ie-css3.htc文件2. 当前元素一定要有定位属性，像是position:relative或是position:absolute属性。3. z-index值一定要比周围元素的要高 http://www.zhangxinxu.com/wordpress/2010/04/%E8%AE%A9ie6ie7ie8%E6%B5%8F%E8%A7%88%E5%99%A8%E6%94%AF%E6%8C%81css3%E5%B1%9E%E6%80%A7/原文：http://www.cnblogs.com/songxia/p/5012420.html
body{ font-family: cursive; font-size: 14px; } .left{ width:150px; height: 50px; background: #fff; position: relative; margin: 50px 0 0 50px; line-height: 50px; text-align: center; border: 2px solid green; ...
CSS3样式：/* RADIO */.button-holder { width: 100%;}.regular-radio { display: none;}.regular-radio + label { -webkit-appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 50px; display: inline-block; position: relative;}.regular-radio:checked + label:after { content: ‘...
原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效，觉得效果非常棒，其实话说回来，这玩意儿的实现真的非常简单，主要是创意不错。先来看看效果图。如何，看上去挺不错吧，倾斜、阴影，让一张很普通的图片变得如此霸气。另外你也可以在这里查看DEMO演示，鼠标滑过图片时会出现这样的效果。那么接下来我们分析一下源码吧，显示html代码，非常简单：<div onclic...
上次我们分享了15款效果很酷的最新jQuery/CSS3特效，非常不错，今天要分享7个非常实用的jQuery/CSS3插件演示和源码，一起来看看。1、jQuery ajax点击地图显示商家网点分布DEMO演示 / 源码下载2、纯CSS3实现的3D小盒子动画 可自定义旋转角度DEMO演示 / 源码下载3、jquery仿微信聊天对话窗口 愚人节福利啊DEMO演示 / 源码下载4、HTML5 Canvas图表应用RGraph 图表功能非常强大前几天我向大家分享过一款HTML5实时数据...
基础不牢，地动山摇！没办法，只能重温“经典”！1.CSS3边框：border-radius; box-shadow; border-imageborder-radius:r1,r2,r3,r4;（边框圆角！）r1~r4：分别为左上角，右上角，右下角，左下角半径（顺时针！缺省时：左上角、右下角相同；右上角，左下角相同）border-radius: 30px; box-shadow: x-shadow y-shadow blur spread color insert;（盒阴影）x-shadow：必须；水平阴影位置（允许负值）；y-shadow：必须；垂直阴影...
浏览器支持度CSS3属性： columns：规定列的宽度和列数 默认宽度、列数值为auto column-width:每栏的宽度 column-gap :两栏之间的间距距离 column-count : 栏目的数目 column-rule : color(色值) width(宽度) style(线条样式) 分栏中的分割线的颜色宽度及样式的设定 1、border-radius属性(圆角边框)eg:结合不同浏览器兼容问题，使用该CSS3新属性 eg: 2、box-shadow属性（阴影） eg:结合不同浏览器兼容问题，使用该CSS3新属性 eg: 3、...
@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300); * {box-sizing: border-box;margin: 0;padding: 0;font-weight: 300; } body {font-family: ‘Source Sans Pro‘, sans-serif;color: white;font-weight: 300; } body ::-webkit-input-placeholder {/* WebKit browsers */font-family: ‘Source Sans Pro‘, sans-serif;color: white;font-weight: 300; } body :-moz-placeholder {/* Mozilla Firefox 4...
音乐播放图片旋转动画 ios不支持暂停： animation-play-state: paused;@-webkit-keyframes rotate{100% {transform: rotate(1turn);} } .img-wrapper{width: 200px; height: 200px;margin: 50px auto 0;overflow: hidden;border-radius: 100px; } .animation-start{animation: rotate 5s linear infinite; } .suspended{animation-play-state: paused; } .img-wrapper img{width: 100%;border-radius: 100px; } .btn{width: 100...