CFXIXI工作室首页
CF西西的博客 | css3

css3如何制作左右滑动的动画

25. 十一月 2016
1.Javascript调用方法:(对元素添加动画class)$(this).addClass("fadeOutLeft"); $(this).next().addClass("fadeInRight show");2.定义css3 动画 .fadeInRight { -webkit-animation:fadeInRight 1s ease-in-out; -moz-animation:fadeInRight 1s ease-in-out; -ms-animation:fadeInRight 1s ease-in-out; animation:fadeInRight 1s ease-in-out } @-webkit-keyframes fadeInRight { 0% { opacity:0; filter:alpha(opacity=0); -webkit-transform:translate(100%,0) } 100% { opacity:1; filter:alpha(opacity=100); -webkit-transform:none } } .fadeInLeft{ -webkit-animation:fadeInLeft 1s ease-in-out; -moz-animation:fadeInLeft 1s ease-in-out; -ms-animation:fadeInLeft 1s ease-in-out; animation:fadeInLeft 1s ease-in-out } @-webkit-keyframes fadeInLeft{ 0% { opacity:0; filter:alpha(opacity=0); -webkit-transform:translate3d(-100%,0,0) } 100% { opacity:1; filter:alpha(opacity=100); -webkit-transform:none } } .fadeOutLeft { -webkit-animation:fadeOutLeft 1s ease-in-out; -moz-animation:fadeOutLeft 1s ease-in-out; -ms-animation:fadeOutLeft 1s ease-in-out; animation:fadeOutLeft 1s ease-in-out } @-webkit-keyframes fadeOutLeft { 0% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0); -webkit-transform:translate3d(-100%,0,0) } } .fadeOutRight { -webkit-animation:fadeOutRight 1s ease-in-out; animation:fadeOutRight 1s ease-in-out; } @-webkit-keyframes fadeOutRight { 0% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0); -webkit-transform:translate3d(100%,0,0) } }3.监听动画完成后隐藏元素 $(this).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){ })  

css3

position:sticky实现iOS6下的粘性布局(Fixed滑动消失)

1. 九月 2016
参考:http://efe.baidu.com/blog/position-sticky/

css3

display:-webkit-box换到ie上使用的方案

11. 十二月 2014
经常在chrome看到的一个居中布局: display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;   换到IE上可用: display: -ms-flexbox; -ms-flex-direction:row; -ms-flex-wrap: wrap; -ms-flex-pack:center;

css3

letter-spacing: -1px(控制字体的间距)

9. 十二月 2014
letter-spacing: -1px(控制字体的间距)

css3

css3 制作上下滑动的样式

20. 八月 2014
这么搞就行,使用translate(0,0) #rec .downselect { width: 100%; background: rgba(245,242,235,0.94); top: 45px; left: 0; position: absolute; z-index: 2; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 0 1px 9px rgba(0,0,0,0.2),0 1px 4px rgba(0,0,0,0.1) inset; display: block; -webkit-transition: all .35s ease-in; -webkit-transform: translate(0,-310px); border-bottom: solid 1px rgba(0,0,0,0.15); } #rec .downselect.show { -webkit-transform: translate(0,0); }

css3

通过css3的盒样式(-webkit-box-align)控制文字显示

20. 八月 2014
如果希望文字显示在div的最右侧可用样式: -webkit-box-align: center; -webkit-box-pack: end;

css3

css3 背景图拉伸

16. 十一月 2013
使用css3的新特性backgound-size: background-size:40% 100%; 参考示例: height: 140px; background: url(../images/marketHead.jpg) no-repeat; background-size:100% 100%; -webkit-background-size:100% 100%; position: relative;

css3

css3动态文字效果

28. 八月 2013
css3动态文字效果    -webkit-animation: firstHelper 2s linear; -webkit-animation-iteration-count: infinite;动画: @-webkit-keyframes firstHelper{ 0%{ -webkit-transform:translate3d(0,0,0); }30%{ -webkit-transform:translate3d(20px,0,0); }45%{ -webkit-transform:translate3d(10px,0,0); }70%{ -webkit-transform:translate3d(20px,0,0); }100%{ -webkit-transform:translate3d(0,0,0); } }*/

css3

css3如何制作线性滑动

18. 六月 2013
css3如何制作线性滑动 -webkit-transition: all .1s linear; -webkit-transform: translate3d(31px, 0, 0)

css3

CSS3按钮背景高亮效果

8. 六月 2013
  background:-webkit-gradient(radial,center center,0,center center,40,from(rgba(255,255,255,1)),to(rgba(255,255,255,0)))

css3

Css3 向下滑动(从上往下滑动165px)

30. 五月 2013
-webkit-transform:translate(0,0); -webkit-transform:translate(0,-165px);  

css3

css3 box-sizing定义

14. 五月 2013
参考:http://www.zhangxinxu.com/css3/css3-box-sizing.php 定义两个带边框的框 效果如图: 代码: CSS代码: .box_sizing{ width:180px; padding:40px 20px; background:#a0b3d6; overflow:hidden; } .box_sizing .in{ width:100%; border:12px double #34538b; background:white; padding:5px; box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } HTML代码: <div class="box_sizing"> <div class="in">此处12像素的border和5像素的padding值算在宽度里面了~~</div> </div>

css3

CSS中如何让元素隐藏

18. 二月 2013
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。下面一个个列出,选一个适合你的 { display: none; /* 不占据空间,无法点击 */ }{ visibility: hidden; /* 占据空间,无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }{ position: relative; top: -999em; /* 占据空间,无法点击 */ }{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ }{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }{zoom: 0.001;-moz-transform: scale(0);-webkit-transform: scale(0);-o-transform: scale(0);transform: scale(0);/* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */}{position: absolute;zoom: 0.001;-moz-transform: scale(0);-webkit-transform: scale(0);-o-transform: scale(0);transform: scale(0);/* 不占据空间,无法点击 */}

css3

github上的一个网页折叠效果

12. 二月 2013
http://triceam.github.com/app-UI/examples/samples/03%20-%20slidingView/05%20-%20oridomi%20w%20viewnav/打开网页后往右拉  

css3

重设各个游览器的默认样式(CSS)

25. 十二月 2012
参考:http://meyerweb.com/eric/tools/css/reset/ /* HTML5 Reset :: style.css ---------------------------------------------------------- We have learned much from/been inspired by/taken code where offered from: Eric Meyer :: http://ericmeyer.com HTML5 Doctor :: http://html5doctor.com and the HTML5 Boilerplate :: http://html5boilerplate.com -------------------------------------------------------------------------------*/ /* Let's default this puppy out -------------------------------------------------------------------------------*/ html { height: 100%; overflow: hidden;} body { position:relative; background:#000; height: 100%; overflow: hidden;} html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } article, aside, figure, footer, header, hgroup, nav, section {display: block;} /* Let's get this party started */ /*::-webkit-scrollbar { width: 4px;} ::-webkit-scrollbar-track { background: rgba(0,0,0,0);} ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.5); border-radius: 2px;} ::-webkit-scrollbar-thumb:window-inactive { }*/ /* Responsive images and other embedded objects Note: keeping IMG here will cause problems if you're using foreground images as sprites. If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */ img, object, embed {max-width: 100%;} /* we use a lot of ULs that aren't bulleted. don't forget to restore the bullets within content. */ ul,menu {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;} del {text-decoration: line-through;} abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} /* tables still need cellspacing="0" in the markup */ table {border-collapse: collapse; border-spacing: 0;} th {font-weight: bold; vertical-align: bottom;} td {font-weight: normal; vertical-align: top;} hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} input, select {vertical-align: middle;} pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } input[type="radio"] {vertical-align: text-bottom;} input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;} .ie6 input {vertical-align: text-bottom;} select, input, textarea {font: 99% sans-serif;} table {font-size: inherit; font: 100%;} /* Accessible focus treatment people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active,input,select {outline: none;} small {font-size: 85%;} strong, th {font-weight: bold;} td, td img {vertical-align: top;} /* Make sure sup and sub don't screw with your line-heights gist.github.com/413930 */ sub, sup {font-size: 75%; line-height: 0; position: relative;} sup {top: -0.5em;} sub {bottom: -0.25em;} /* standardize any monospaced elements */ pre, code, kbd, samp {font-family: monospace, sans-serif;} /* hand cursor on clickable elements */ .clickable, label, input[type=button], input[type=submit], button {cursor: pointer;} input:focus { outline: none;} /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea {margin: 0; padding: 0;-webkit-appearance:none;background:rgba(0,0,0,0);} /* make buttons play nice in IE */ button {width: auto; overflow: visible;} /* scale images in IE7 more attractively */ .ie7 img {-ms-interpolation-mode: bicubic;} /* prevent BG image flicker upon hover */ .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} /* let's clear some floats */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* Ok, this is where the fun starts. -------------------------------------------------------------------------------*/ /* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */ body {font: 13px Helmet, Freesans, sans-serif;} /* using local fonts? make sure to read up on Paul Irish's Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */ /* we like off-black for text */ body, select, input, textarea {color: #333;} a {color: #03f;} a:hover {color: #69f;} /* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */ ::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;} ::selection {background: #fcd700; color: #fff; text-shadow: none;} ins {background-color: #fcd700; color: #000; text-decoration: none;} mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;} /* Print styles! -------------------------------------------------------------------------------*/ @media print { } /* Media queries! -------------------------------------------------------------------------------*/ /* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ @media screen and (max-device-width: 480px) { } @media all and (orientation: portrait) { } @media all and (orientation: landscape) { } /* cfxixi add -------------------------------------------------------------------------------*/ a,img { -webkit-touch-callout: none;} input { -webkit-appearance: none; border: none; background: rgba(0,0,0,0.3); border-radius: 0;} textarea { border: none; background: rgba(0,0,0,0.3); border-radius: 0;} input[type="file"] { background: rgba(0,0,0,0); width: 100px;} * { -webkit-user-select: none; -moz-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0);} input,textarea { -webkit-user-select: auto; -moz-user-select: auto;} * { -webkit-text-size-adjust: none;}

css3

css3翻页效果(有兼容且无类库依赖Demo)

19. 十二月 2012
原文:http://atalasii.com/github: https://github.com/zythum/css3-bookTurnPagedemo: http://zythum.free.bg/book/demo/demo.html

css3

css把滚动条变成移动样式

11. 十二月 2012
::-webkit-scrollbar { width: 4px;} ::-webkit-scrollbar-track { background: rgba(0,0,0,0);} ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.5); border-radius: 2px;} ::-webkit-scrollbar-thumb:window-inactive { }

css3

CSS3场面切换80%动画

29. 十一月 2012
.allPagesTranslate{-webkit-animation:allPages 0.25s linear;-webkit-transform:translate3d(-80%,0,0);} @-webkit-keyframes allPages{ 0%{ -webkit-transform:translate3d(0,0,0); } 100%{ -webkit-transform:translate3d(-80%,0,0); } } /*当前页面切走*/ .allPagesTranslateSlide{-webkit-animation:allPagesSlide 0.25s linear;-webkit-transform:translate3d(0,0,0);} @-webkit-keyframes allPagesSlide{ 0%{ -webkit-transform:translate3d(-80%,0,0); } 100%{ -webkit-transform:translate3d(0,0,0); } }

css3

css3动画(transform和animation)

13. 十一月 2012
Transform图像反转效果 .pullDownIcon{     display:block; float:left;     width:40px; height:40px;     background:url(../images/pull-icon@2x.png) 0 0 no-repeat;     -webkit-background-size:40px 80px; background-size:40px 80px;     -webkit-transition-property:-webkit-transform;     -webkit-transition-duration:250ms; }   .pullDownIcon {     -webkit-transform:rotate(0deg) translateZ(0); }   .flip .pullDownIcon {     -webkit-transform:rotate(-180deg) translateZ(0); }   Animation动画效果 .loading .pullDownIcon {     background-position:0 100%;     -webkit-transform:rotate(0deg) translateZ(0);     -webkit-transition-duration:0ms;     -webkit-animation-name:loading;     -webkit-animation-duration:2s;     -webkit-animation-iteration-count:infinite;     -webkit-animation-timing-function:linear; }   @-webkit-keyframes loading {     0% { -webkit-transform:rotate(0deg) translateZ(0); }     100% { -webkit-transform:rotate(360deg) translateZ(0); } }  

css3

css如何在一个工具条中定义向左(或向右)靠的button

12. 十一月 2012
1.在一个<header></header>中定义: <div class="about"><a href="javascript:void(0)">关于我们<span></span></a></div>   2.然后定义css  .header .about{right: auto; left: 0;}   这样便可得到向右靠的button

css3

web app开发 css3 取代float布局的参数

3. 十一月 2012
display:-webkit-box 使用了以后嵌套在里面的div会自动水平对齐   .hbox{     display: -moz-box;     display: -webkit-box; }   .vbox{     display: -moz-box;     display: -webkit-box;     -moz-box-orient:vertical;     -webkit-box-orient:vertical; }   水平布局hbox 垂直布局vbox

css3

css3设置按钮的圆角

4. 十月 2012
border-bottom-left-radius: 5px;     border-top-left-radius:5px; 这样可以设置坐上和左下的圆角弧度

css3

CSS3 Transition

3. 十月 2012
原文:http://www.cnblogs.com/gaoxue/articles/2287319.html 上一节花了大篇幅整理了CSS3中动画属性中的Transform,今天我们接着一起来看CSS3动画属性中的另一个属性Transition。 W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。” 下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用 语法: transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*   transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值 一、transition-property: 语法: transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]*   transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变);all(所有属性改变)这个也是其默认值;indent(元素属性名)。当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值。其对应的类型如下: 1、color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color,color,outline-color等css属性; 2、length: 真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性; 3、percentage:真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性; 4、integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性; 5、number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性; 6、transform list:详情请参阅:《CSS3 Transform》 7、rectangle:通过x, y, width 和 height(转为数值)变换,如:crop 8、visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility 9、shadow: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow 10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image 11、paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似 12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化 13、a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化 具体什么css属性可以实现transition效果,在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型,大家可以点这里了解详情。这里需要提醒一点是,并不是什么属性改变都为触发transition动作效果,比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。 二、transition-duration: 语法: transition-duration : <time> [, <time>]*   transition-duration是用来指定元素 转换过程的持续时间,取值:<time>为数值,单位为s(秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。 三、transition-timing-function: 语法: transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*   取值: transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值: 1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). 2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). 3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). 4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). 5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。 其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default. 其他几个属性的示意图: 四、transition-delay: 语法: transition-delay : <time> [, <time>]*   transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:<time>为数值,单位为s(秒),其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。 有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果,那么我们只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:transition-delay与transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的怭值为transition-duration第二个为transition-delay。如: a { -moz-transition: background 0.5s ease-in,color 0.3s ease-out; -webkit-transition: background 0.5s ease-in,color 0.3s ease-out; -o-transition: background 0.5s ease-in,color 0.3s ease-out; transition: background 0.5s ease-in,color 0.3s ease-out; }   如果你想给元素执行所有transition效果的属性,那么我们还可以利用all属性值来操作,此时他们共享同样的延续时间以及速率变换方式,如: a { -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }   综合上述我们可以给transition一个速记法:transition: <property> <duration> <animation type> <delay>如下图所示: 相对应的一个示例代码: p { -webkit-transition: all .5s ease-in-out 1s; -o-transition: all .5s ease-in-out 1s; -moz-transition: all .5s ease-in-out 1s; transition: all .5s ease-in-out 1s; }   浏览器的兼容性: 因为transition最早是有由webkit内核浏览器提出来的,mozilla和opera都是最近版本才支持这个属性,而我们的大众型浏览器IE全家都是不支持,另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法,所以在应用transition时我们有必要加上各自的前缀,最好在放上我们W3C的标准写法,这样标准的会覆盖前面的写法,只要浏览器支持我们的transition属性,那么这种效果就会自动加上去: //Mozilla内核 -moz-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* //Webkit内核 -webkit-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* //Opera -o-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* //W3C 标准 transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*   通过上面,我想大家对CSS3的Transition属性的使用有一定的概念存在了,下面为了加强大家在这方面的使用,我们一起来看下面的DEMO。我们通过实践来巩固前面的理论知识,也通过实践来加强transition的记忆。 DEMO一: DEMO一我们主要是在一个div中放置了几个小块,分别是对应了transition-timing-function中的几种类型,我们在div的hover状态下,改变其部分属性,从而达到一种动画效果。我们也可以使用jq来点击一个按钮,触发这个div(说简单点就是通过按钮的点击事件给这个div加上一个class,让其子元素都触发相对应的transition动画效果),为了让大家能更好的学习和理解,我把相应的代码贴在这里,感兴趣的朋友就跟着做一下吧,也可以直接把代码复制到你本地页面运行查看效果。 Html Code: <a id="timings-demo-btn">click</a> <div id="timings-demo"> <div id="ease" class="demo-box">Ease</div> <div id="ease-in" class="demo-box">Ease-in</div> <div id="ease-out" class="demo-box">Ease-out</div> <div id="ease-in-out" class="demo-box">Ease-in-out</div> <div id="linear" class="demo-box">Linear</div> <div id="cubic-bezier" class="demo-box">Cubic-bezier</div> </div>   CSS Code: #timings-demo { border: 1px solid #ccc; padding: 10px; height: 400px; width: 400px; } .demo-box { width: 100px; height: 50px; text-align: center; line-height: 50px; text-align: center; color: #fff; background: #96c; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5); -webkit-box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5); box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5); margin-bottom: 10px; } //ease效果: #ease { -moz-transition: all 5s ease 0.3s; -webkit-transition: all 5s ease 0.3s; -o-transition: all 5s ease 0.3s; transition: all 5s ease 0.3s; background: #f36; } //ease-in效果: #ease-in { -moz-transition: all 3s ease-in 0.5s; -webkit-transition: all 3s ease-in 0.5s; -o-transition: all 3s ease-in 0.5s; transition: all 3s ease-in 0.5s; background: #369; } //ease-out效果: #ease-out { -moz-transition: all 5s ease-out 0s; -webkit-transition: all 5s ease-out 0s; -o-transition: all 5s ease-out 0s; transition: all 5s ease-out 0s; background: #636; } //ease-in-out效果: #ease-in-out { -moz-transition: all 1s ease-in-out 2s; -webkit-transition: all 1s ease-in-out 2s; -o-transition: all 1s ease-in-out 2s; transition: all 1s ease-in-out 2s; background: #3e6; } //linear效果: #linear { -moz-transition: all 6s linear 0s; -webkit-transition: all 6s linear 0s; -o-transition: all 6s linear 0s; transition: all 6s linear 0s; background: #999; } //cubic-bezier效果: #cubic-bezier { -moz-transition: all 4s cubic-bezier 1s; -webkit-transition: all 4s cubic-bezier 1s; -o-transition: all 4s cubic-bezier 1s; transition: all 4s cubic-bezier 1s; background: #6d6; } //hover状态下或单击click按钮后demo-box产生属性变化 #timings-demo.timings-demo-hover .demo-box, #timings-demo:hover .demo-box { -moz-transform: rotate(360deg) scale(1.2); -webkit-transform: rotate(360deg) scale(1.2); -o-transform: rotate(360deg) scale(1.2); transform: rotate(360deg) scale(1.2); background: #369; border: 1px solid rgba(255,230,255,08); -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; margin-left: 280px; height: 30px; line-height: 30px; margin-bottom: 15px; }   使用单击事件给dimings-demo加上一个timings-demo-hover的class名,使用demo-bxo产生属性变化 $(document).ready(function(){ $("#timings-demo-btn").toggle( function(){ $(this).next("div#timings-demo").addClass("timings-demo-hover"); },function(){ $(this).next("div#timings-demo").removeClass("timings-demo-hover"); }); });   我们来看看其效果图 未改变属性效果 正在变换中 执行完动画后的最终效果 上图是鼠标移动到#timings-demo的div产生的效果变换示意图,你单击“click”按钮同样会产生上面的一个动画效应,为了节约空间,这里不在贴出示意图。 DEMO二: 我们在来看另外一个DEMO,这个示例是通过CSS3的transition模仿制作jQuery的slideshow效果,当然这种效果跟js和jQ制作出来的是没得比,但有时还是可以用一用的,以前腾讯就使用过这样的一个效果。我们这个DEMO实现的效果原理跟上一个DEMO极其相似,这里我们是通过select的change事件来触slideshow的CSS3属性变化,这里应用到一部分jQuery,主要是制作数字切换和前一张下一张的按钮,以及select的change事件。下面我把代码贴出以供大家参考,如果你跟着做了的话,你会觉得CSS3的transition真的是魅力是无穷的。 Html Code: <div id="demoSliderContainer"> <ul id="demoSlider" class="slide-images"> <li class="slide-image"> <img src="http://images.cnblogs.com/monstersinc.jpg" alt="monsters inc" /> <span>Monsters Inc</span> </li> <li class="slide-image"> <img src="http://images.cnblogs.com/nemo.jpg" alt="nemo" /> <span>Nemo</span> </li> <li class="slide-image"> <img src="http://images.cnblogs.com/up.jpg" alt="up" /> <span>Up</span> </li> <li class="slide-image"> <img src="http://images.cnblogs.com/walle.jpg" alt="walle" /> <span>Wall-E</span> </li> </ul> <div class="options"> <a href="javascript:;" class="prevSlide">Prev</a> <span class="slide-pager"> <a href="" class="javascript:;">1</a> <a href="" class="javascript:;">2</a> <a href="" class="javascript:;">3</a> <a href="" class="javascript:;">4</a> </span> <a href="javascript:;" class="nextSlide">Next</a> </div> </div> <div id="options"> <label for="transitionEffect">Transition effect :</label> <select id="transitionEffect"> <option value="transition-opacity">opacity fade</option> <option value="transition-left">left slide</option> <option value="transition-right">right slide</option> <option value="transition-top">top slide</option> <option value="transition-bottom">bottom slide</option> <option value="transition-zoom">zoom</option> <option value="transition-dezoom">de-zoom</option> <option value="transition-cornerzoom">corner zoom</option> <option value="transition-rotate">rotate</option> </select> </div>   CSS Code: #demoSliderContainer { background: #000; -moz-box-shadow: 1px 1px 5px #000; -webkit-box-shadow: 1px 1px 5px #000; box-shadow: 1px 1px 5px #000; padding: 0; overflow: auto; margin: 10px auto; width: 560px; } #demoSlider { border: 1px solid #000; border-width: 5px 5px 0; height: 220px; margin: 0 auto; width: 550px; overflow: hidden; position: relative; } .slide-images .slide-image { position: absolute; } .slide-images .slide-image img { z-index: 2; } .slide-images .slide-image span { background: rgba(0,0,0,0.3); -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; bottom: 4px; color: rgba(255,255,255,0.8); font-size: 14px; font-weight: bold; padding: 5px 10px; position: absolute; right: 0; z-index: 3; } .slide-images .slide-image.current img { z-index: 12; } .slide-images .slide-image.current span { z-index: 13; } #demoSliderContainer .options { padding: 3px 10px; text-align: center; } #demoSliderContainer .options a { color: #91BECC; font-family: Georgia,Serif; font-size: 12px; font-weight: bold; text-decoration: none; } #demoSliderContainer .options a:hover { color: #D3E5EB; } #demoSliderContainer .slide-pager a { -moz-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } #demoSliderContainer .slide-pager a.current { background-color: #91BECC; border-radius: 5px 5px 5px 5px; color: black; padding: 0 4px; } #demoSliderContainer .options .prevSlide { float: left; } #demoSliderContainer .options .nextSlide { float: right; } /*transition effect*/ .slide-images .slide-image, .slide-images .slide-image img { -moz-transition-duration: 1.5s; -webkit-transition-duration: 1.5s; -otransition-duration: 1.5s; transition-duration: 1.5s; } .slide-images.transition-opacity .slide-image { opacity: 0; width: 0; } .slide-images.transition-opacity .slide-image.current { opacity: 1; width: 550px; } .slide-images.transition-left .slide-image { left: -550px; opacity: 0; } .slide-images.transition-left .slide-image.current { left: 0; opacity: 1; } .slide-images.transition-right .slide-image { right: -550px; opacity: 0; } .slide-images.transition-right .slide-image.current { right: 0; opacity: 1; } .slide-images.transition-top .slide-image { opacity: 0; top: -220px; } .slide-images.transition-top .slide-image.current { opacity: 1; top: 0; } .slide-images.transition-bottom .slide-image { opacity: 0; bottom: -220px; } .slide-images.transition-bottom .slide-image.current { opacity: 1; bottom: 0; } .slide-images.transition-cornerzoom .slide-image { opacity: 0; } .slide-images.transition-cornerzoom .slide-image.current { opacity: 1; } .slide-images.transition-cornerzoom .slide-image img { width: 0; } .slide-images.transition-cornerzoom .slide-image.current img { width: 550px; } .slide-images.transition-zoom .slide-image { opacity: 0; } .slide-images.transition-zoom .slide-image.current { opacity: 1; } .slide-images.transition-zoom .slide-image img { left: -275px; position: relative; top: -110px; width: 1100px; } .slide-images.transition-zoom .slide-image.current img { left: 0; top: 0; width: 550px; } .slide-images.transition-dezoom .slide-image { -moz-box-shadow: 2px 2px 8px black; -webkit-box-shadow: 2px 2px 8px black; box-shadow: 2px 2px 8px black; opacity: 0; } .slide-images.transition-dezoom .slide-image.current { opacity: 1; } .slide-images.transition-dezoom .slide-image img { left: 275px; position: relative; top: 110px; width: 0; } .slide-images.transition-dezoom .slide-image.current img { left: 0; top: 0; width: 550px; } .slide-images.transition-rotate .slide-image { opacity: 0; } .slide-images.transition-rotate .slide-image.current { opacity: 1; } .slide-images.transition-rotate .slide-image img { width: 550; height: 220px; position: relative; left: -550px; top: -220px; } .slide-images.transition-rotate .slide-image.current img { width: 550px; height: 220px; left: 0; top: 0; -moz-transform: rotate(1440deg); -webkit-transform: rotate(1440deg); -o-transform: rotate(1440deg); transform: rotate(1440deg); } #options { margin: 20px auto; padding: 5px; width: 550px; }   jQuery Code: <script type="text/javascript"> $(document).ready(function(){ $(".slide-images").each(function(){ var slider = $(this); var slides = $(".slide-image",slider); var sliderPages = $(".slide-pager"); //Slide Navigation var currentSlideNum = 0; slides.removeClass("current"); slides.eq(currentSlideNum).addClass("current"); sliderPages.each(function(){ var pages = $("a",this); pages.removeClass("current"); pages.eq(currentSlideNum).addClass("current"); }); var goToSlide = function(slideNum) { slides.eq(currentSlideNum).removeClass("current"); slides.eq(slideNum).addClass("current"); sliderPages.each(function(){ var pages = $("a", this); pages.eq(currentSlideNum).removeClass("current"); pages.eq(slideNum).addClass("current"); }); currentSlideNum = slideNum; }; var nextSlide = function() { var nextSlideNum = currentSlideNum + 1; if(nextSlideNum >= slides.size()) nextSlideNum = 0; goToSlide(nextSlideNum); }; var prevSlide = function() { var prevSlideNum = currentSlideNum - 1; if(prevSlideNum < 0) prevSlideNum = slides.size() - 1; goToSlide(prevSlideNum); }; //transition effects var setTransitionEffect = function(transitionEffect) { slider.attr("class","slide-images "+ transitionEffect); }; $("#transitionEffect").change(function(){ setTransitionEffect($(this).val()); }).change(); //Navigation binding $(".prevSlide").click(prevSlide); $(".nextSlide").click(nextSlide); $(".slide-pager a").each(function(i){ if(i >= slides.size()) return false; $(this).click(function(){ goToSlide(i); }); }); //Auto next slide var lastHumanNav = 0; $(".prevSlide, .nextSlide, .slide-pager a").click(function(){ lastHumanNav = new Date().getTime(); }); setInterval(function(){ var now = new Date().getTime(); if(now - lastHumanNav > 5000) nextSlide(); },5000); }); }); </script>   记得在你的本地页面头部加上jQuery的版本库文件。 效果示意图: DEMO二思路来自于Greweb.fr并在其基础上增加了right silde,bottom silde,rotate三种效果,如果你感兴趣的话可以在这个基础上增加更多的slideshow效果,比如利用transform的scale,skew等制作出更出色的效果。 上面我主要介绍了两个实例,如果你对这两个实例还不过瘾的话,下面有更多的关于transition的实例:DEMO三、DEMO四。 那么今天我们关于CSS3的transition就简单的介绍到这里,下一节我们一起接着学习CSS3中动画属性的最后一个属性动画(animation),感兴趣的可以观注本站关于CSS3的最新更新情况。 如需转载烦请注明出处:W3CPLUS

css3

css3如何定义背景起源的方式

3. 十月 2012
举个例子: background-origin: content-box; 方式有三种border、padding、content 分别定义其实的方式 详细可以参照:http://demo.doyoe.com/css3/background-origin/ * 用于指定background-position计算的参考位置。默认值为padding-box,IE下的一般标记默认表现等同于border-box(hasLayout的标记或一般标记被触发hasLayout时,表现等同于padding-box) 背景起源(以border(即包括border)为原点计算背景图的background-position): #background-origin-border{ -moz-background-origin:border-box; /* For Firefox */ -webkit-background-origin:border-box; /* For Chrome, Safari */ -o-background-origin:border-box; /* For Opera */ -ms-background-origin:border-box; /* For IE */ background-origin:border-box; /* For Future */ } 背景起源(以padding(即包括padding)为原点计算背景图的background-position): #background-origin-padding{ -moz-background-origin:padding-box; /* For Firefox */ -webkit-background-origin:padding-box; /* For Chrome, Safari */ -o-background-origin:padding-box; /* For Opera */ -ms-background-origin:padding-box; /* For IE */ background-origin:padding-box; /* For Future */ } 背景起源(以content(即从content开始)为原点计算背景图的background-position): #background-origin-content{ -moz-background-origin:content-box; /* For Firefox */ -webkit-background-origin:content-box; /* For Chrome, Safari */ -o-background-origin:content-box; /* For Opera */ -ms-background-origin:content-box; /* For IE */ background-origin:content-box; /* For Future */ } © Copyright Doyoe.com  

css3

css3如何控制背景图片的尺寸

3. 十月 2012
可悲没人提点摸索了几个小时终于发现 css3的background-size可以实现 lz试用了100%的尺寸还有自适应元素的contain实现了图片 地址:http://demo.doyoe.com/css3/background-size/ CSS3 background-size:[length|percentage|auto]{1,2}|cover|contain 浏览器参照基准:Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera11.50 and Later, IE9.0 and Later * 用于设置背景图片的大小,有2个可选值,第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定1个值得,则第2个值默认为auto 所用图片: 背景图尺寸(数值表示方式): #background-size{ background-size:300px 100px; } 背景图尺寸(百分比表示方式): #background-size2{ background-size:40% 80%; } 背景图尺寸(等比扩展图片来填满元素,即cover值): #background-size3{ background-size:cover; } 背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值): #background-size4{ background-size:contain; } 背景图尺寸(以图片自身大小来填充元素,即auto值): #background-size5{ background-size:auto; } © Copyright Doyoe.com

css3

CSS3 box-align属性

29. 九月 2012
CSS3 box-align Property 可以定义盒中元素的居中对齐 原文:http://www.w3schools.com/cssref/css3_pr_box-align.asp box-align: start|end|center|baseline|stretch; start For normal direction boxes, the top edge of each child is placed along the top of the box. For reverse direction boxes, the bottom edge of each child is placed along the bottom of the box Play it » end For normal direction boxes, the bottom edge of each child is placed along the bottom of the box. For reverse direction boxes, the top edge of each child is placed along the top of the box Play it » center Any extra space is divided evenly, with half placed above the child and the other half placed below the child Play it » baseline If box-orient is inline-axis or horizontal, all children are placed with their baselines aligned Play it » stretch The child elements are stretched to fill the containing block

css3

发现一个自动生成loading动画的工具不错哦

19. 九月 2012
 发现一个自动生成loading动画的工具不错哦 http://www.cssload.net/ 

css3

css3中如何让多余的字符串消失并附加省略号的方法

10. 九月 2012
css3中如何让多余的字符串消失并附加省略号的方法 可以使用overflow:hidden;text-overflow:ellipsis让多余的内容隐藏并附加省略号

css3

javasript如何比较日期

16. 八月 2012
参考文章:http://hi.baidu.com/ilovemy77lovem/blog/item/b687d513c05376d4f7039e80.html 代码如下:(逻辑为将跟某个时间与当前时间作比较,当相减小于30时执行函数) 其中函数为Sencha touch的代码,给一段dom附加样式( -webkit-text-fill-color:red为给字体设置颜色的css3代码): .warningDate{ -webkit-text-fill-color:red !important; -webkit-opacity: 1; opacity: 1; }   var nowTime=new Date(); var storeSpinDay=parseInt((nowTime.getTime()-storeDeadLine.getTime()) / (1000 * 60 * 60 * 24)); var storeHouseSpinDay=parseInt((nowTime.getTime()-storeDeadLine.getTime()) / (1000 * 60 * 60 * 24)); if(storeSpinDay<=30&&!Ext.isEmpty(currentRecord.raw.securityCheckNote.stores_date)) { Ext.getCmp('b14').addCls('warningDate'); Ext.get('ext-element-203').addCls('warningDate'); } else { Ext.getCmp('b14').removeCls('warningDate'); Ext.get('ext-element-203').removeCls('warningDate'); }

css3, javascript

如何通过css将滚动条样式改成touch的

15. 八月 2012
demo:http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ overflow: scroll; -webkit-overflow-scrolling: touch;

css3

css3中如何对文字设置倒影

9. 七月 2012
  -webkit-box-reflect: below -0.3em -webkit-linear-gradient(top, transparent, transparent 50%, rgba(0, 0, 0, 0.296875))

css3

css3图片旋转

3. 七月 2012
 -webkit-transform: rotate(5deg); 一行代码。。 

css3, Html5