CSS3动画知识点 目前浏览器都不支持 @keyframes 规则。 Firefox 支持替代的 @-moz-keyframes 规则。 Opera 支持替代的 @-o-keyframes 规则。 Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。 帧的动画的语法设置 @keyframes animationname {keyframes-selector {css-styles;}} animationname:必需。定义动画的名称 keyframes-selector:必需。动画时长的百分比。 合法的值: 0-100% from(与 0% 相同) to(与 100% 相同) css-styles:必需。一个或多个合法的 CSS 样式属性。 例如: .slogan{ animation: slideUp 1s ease-in-out .2s forwards;//定义的动画名称 } @keyframes slideUp{ 0%{ transform:translate(0,20px);opacity:0;filter:alpha(opacity=0) } 100%{ opacity:1;filter:alpha(opacity=100);transform:translate(0,0)} } @-moz-keyframes slideUp{ 0%{ transform:translate(0,20px);opacity:0;filter:alpha(opacity=0) } 100%{ opacity:1;filter:alpha(opacity=100);transform:translate(0,0)} } @-webkit-keyframes slideUp{ 0%{ transform:translate(0,20px);opacity:0;filter:alpha(opacity=0) } 100%{ opacity:1;filter:alpha(opacity=100);transform:translate(0,0)} } 动画的属性: animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) ]* 默认值:ease linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier(number, number, number, number): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内 infinite关键字,可以让动画无限次播放。 forwards:表示让动画停留在结束状态 animation-play-state:让动画保持突然终止时的状态。 animation-play-state: paused;停止 animation-play-state: running;继续播放 alternate:是达到往返效果 如animation:mymove 5s infinite;变为 animation:mymove 5s infinite alternate; 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现方法: width:500px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;//文字不换行 效果如下: CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略... 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号,如下。 实现方法: display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3 overflow:hidden; 效果如下: CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略 CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略 CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略...