当前目录: css3基础教程
简单实用的CSS3动画效果 Animate.css

2015年2月5日  css3基础教程,前端资源   

http://daneden.github.io/animate.css/ 选择要的效果点击“Animate it”即可,只需要为动画的元素添加指定的class名即可。   还有一种: Vivify.css是一款带68种动画效果的CSS3动画库。vivify.css动画库和Animate.css类似,为网页元素提供各种CSS3动画效果。vivify.css动画库内置了68种炫酷的CSS3动画效果。 http://demo.htmleaf.com/1708/201708301512/index.html

linear-gradient实用详解

2014年12月22日  css3基础教程,前端资源   

css3 background 条纹 背景 渐变 linear-gradient是background-image属性下的参数,在网上找遍了许多教程讲的都很详细 但是往往都没有讲到重点,说的也长篇大论。花了几十分钟看完也没看懂那些参数具体是 怎么实用。这里图文并茂讲解快速上手linear-gradient。 首先看下这个效果: 这里教大家如何用CSS3代码绘画出这个图案,例子简单重点是叫大家里面的参数具体是什么意思 1,首先做出一个小图片 background-image: linear-gradient(135deg,#fff 16%, #0ae 17%,#0ae 33%, #fff 34%,#fff 66%, #0ae 67%,#0ae 83%, #fff 84%); background-image: linear-gradient(顺时针角度, 开始颜色 结束位置, 中间颜色1 开始位置,中间颜色1 结束位置, 中间颜色2 开始位置,中间颜色2 结束位置, 中间颜色3 开始位置,中间颜色3 结束...

判断浏览器是否支持css3某属性

2014年12月14日  css3基础教程,前端资源   

css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候。比如transition的animation-play-state,就只有部分浏览器支持。 function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpString = [], htmlStyle = document.documentElement.style, _toHumb = function (string) { return string.replace(/-(\w)/g, function ($0, $1) { return $1.toUpperCase(); }); }; for (i in prefix) humpString.push(_toHumb(prefix[i] + '-' + style)); humpString.push(_toHumb(style)); for (i in humpString) if (humpString[i] in htmlStyle...

CSS3条件判断——@supports

2014年12月14日  css3基础教程,前端资源   

@supports (display:flex) { section { display: flex } ... } 上面这段代码的意思是:如果浏览器支持“display:flex”属性,那么在“section”元素上就运用“display:flex”样式。 not逻辑声明——排除 @supports not (display: flex){  #container div{float:left;} } 上面的代码表示的是,如果你的浏览器不支持“display:flex”属性,那么你可以使用“float:left”来替代。     and逻辑声明——联合(与) @supports (column-width: 20rem) and (column-span: all) {  div { column-width: 20rem }  div h2 { column-span: all }  div h2 + p { margin-top: 0; } ... } 上面的代码表示的是,如果你的浏览器同时支持“column-width:20rem”和“column-span:all”两个条件,浏览器将会调用下面的样式   &n...

css3笔记

2014年12月7日  css3基础教程,前端资源   

-ms- /* IE 9 */ -webkit- /* Safari and Chrome */ -o- /* Opera */ -moz- /* Firefox */   CSS3 2D转换 // transform多属性写法 transform: translate(-960px, 0px) translateZ(0px); transform: translate(50px,100px); 移动位置,X轴50 Y轴100    手机设备加速模式:transform: translate3d(0px, 0px, 0px); element.style.transform = 'translate3d(500px,0,0)'; element.style.OTransform = 'translate3d(500px,0,0)'; // Opera element.style.msTransform = 'translate3d(500px,0,0)'; // IE 9 element.style.MozTransform = 'translate3d(500px,0,0)'; // Firefox element.style.WebkitTransform = 'translate3d(500px,0,0)'; // Safari and Chrome transform: rotate(30deg); 旋转,顺时针30度 tra...