CSS过渡transition-delay属性

文档地址： http://dev.w3.org/csswg/css-transitions/ CRTL+F 查"inherited"结果都是NO.这些属性包括： transition-property transition-duration transition-timing-function transition-delay Property transition Shorthand 关于继承性，文档中提到了一点 EXAMPLE 4 An example where maintaining the set of completed transitions is necessary would be a transition on an inherited property, where the parent specifies a transition of that property for a longer duration (say, transition: 4s text-indent) and a child element that inherits the parent’s value specifies a transition of the same property for a shorter duration (say, transition: 1s text-indent). Without the maintenance of this set of completed transitions, implementations could start additional transitions on the child after the initial 1 second transition on the child completes. 这里提到了一个场景，如果parent指定的transition作用到的属性和child指定的transtions作用到的属性是同一个，而且parent的transtion过渡时间更长，那么就需要自己去维护transition的完成状态（完成后移除？我注）。 例如： <div class="parent"> <div class="child"></div> </div> .parent { transition: 4s text-indent; } .child{ transition: 1s text-indent; } 如有错误欢迎指正。

让一个 div 元素旋转 360 度示例 div 的样式结构: div { margin: 50px auto; width: 200px; height: 200px; background-color: pink; } 设置旋转属性的类名: div.rotate { /* 旋转360度 */ transform: rotate(360deg); /* all表示所有属性,1s表示在一秒的时间完成动画 */ transition: all 1s; } transition 有四个属性: property: 规定应用过渡的 CSS 属性的名称。 duration: 定义过渡效果花费的时间。默认是 0,单位是 s。 timing-function: 规定过渡效果的时间曲线。默认是 "ease"。匀速'linear',加速'ease-in',减速'ease-out',先快后慢'ease-in-out'。 delay: 规定过渡效果何时开始。默认是 0。单位 s。 可以连写: transition: property duration timing-function delay; 给 div 元素设置鼠标移入时旋转,也就是给它加上.rotate 类名.鼠标移出时移除类名 $(function() { $("div") .mouseenter(function() { $(this).addClass("rotate"); }) .mouseleave(function() { $(this).removeClass("rotate"); }); });

选择器 E:last-child 匹配父元素的最后一个子元素 E。 E:nth-child(n)匹配父元素的第 n 个子元素 E。 E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。 RGBA 回答此问题，面试官很可能继续问：rgba()和 opacity 的透明效果有什么不同？ 多栏布局 新手上路 新手专区 消费警示 交易安全 24小时在线帮助 免费开店 付款方式 快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款 淘宝特色 手机淘宝 旺信 大众评审 B格指南 .mul-col { column-count: 3; column-gap: 5px; column-rule: 1px solid gray; border-radius: 5px; border: 1px solid gray; padding: 10px; } 多背景图 /* backgroundimage:url('1.jpg),url('2.jpg') */ CSS3 word-wrap 属性 p.test { word-wrap: break-word; } 文字阴影 text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5); @font-face 属性 Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。 @font-face { font-family: BorderWeb; src: url(BORDERW0.eot); } @font-face { font-family: Runic; src: url(RUNICMT0.eot); } .border { font-size: 35px; color: black; font-family: "BorderWeb"; } .event { font-size: 110px; color: black; font-family: "Runic"; } /* 淘宝网字体使用 */ @font-face { font-family: iconfont; src: url(//at.alicdn.com/t/font_1465189805_4518812.eot); } 圆角 border-radius: 15px; 边框图片 CSS3 border-image 属性 盒阴影 /* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */ 盒子大小 CSS3 box-sizing 属性 媒体查询 CSS3 @media 查询 CSS3 动画 @keyframes @keyframes abc { from { transform: rotate(0); } 50% { transform: rotate(90deg); } to { transform: rotate(360deg); } } animation 属性 /* animation ： name duration timing-function delay interation-count direction play-state / 渐变效果 background-image: -webkit-gradient( linear, 0% 0%, 100% 0%, from(#2a8bbe), to(#fe280e) ); CSS3 弹性盒子模型 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 CSS3 过渡 div { transition: width 2s; -moz-transition: width 2s; / Firefox 4 / -webkit-transition: width 2s; / Safari 和 Chrome / -o-transition: width 2s; / Opera */ } CSS3 变换 rotate()旋转 translate()平移 scale( )缩放 skew()扭曲/倾斜 变换基点 3d 转换