CSS3新增属性----过渡、动画效果、多列 缺乏、安全感 2022-12-06 12:57 147阅读 0赞 ## CSS3过渡 ## CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点,必须规定两项内容: * 指定要添加效果的CSS属性 * 指定效果的持续时间。 应用于宽度属性的过渡效果,时长为2秒: div { transition: width 2s; } > 若未指定期限,transition将没有任何效果,因为默认值是0。 添加多个样式的变换效果,添加的属性由逗号分隔: div { transition: width 2s, height 2s, transform 2s; } 过渡属性 <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>transition</td> <td>简写属性,用于在一个属性中设置四个过渡属性。</td> </tr> <tr> <td>transition-property</td> <td>规定应用过渡的 CSS 属性的名称。</td> </tr> <tr> <td>transition-duration</td> <td>定义过渡效果花费的时间。默认是 0。</td> </tr> <tr> <td>transition-timing-function</td> <td>规定过渡效果的时间曲线。默认是 “ease”。</td> </tr> <tr> <td>transition-delay</td> <td>规定过渡效果何时开始。默认是 0。</td> </tr> </tbody> </table> 在一个例子中使用所有过渡属性: div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /*等同于transition: width 1s linear 2s;*/ } ## CSS3动画 ## 动画是使元素从一种样式逐渐变化为另一种样式的效果。 我们可以改变任意多的样式任意多的次数。 用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。 > 0% 是动画的开始,100% 是动画的完成。 @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } **CSS3 @keyframes 规则** * @keyframes 规则是创建动画。 * @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 * 当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。 指定至少这两个CSS3的动画属性绑定向一个选择器: 1. 规定动画的名称 2. 规定动画的时长 div { animation: myfirst 5s; } @keyframes myfirst { from {background: red;} to {background: yellow;} } CSS3的动画属性 <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>@keyframes</td> <td>规定动画。</td> </tr> <tr> <td>animation</td> <td>所有动画属性的简写属性。</td> </tr> <tr> <td>animation-name</td> <td>规定 @keyframes 动画的名称。</td> </tr> <tr> <td>animation-duration</td> <td>规定动画完成一个周期所花费的秒或毫秒。默认是 0。</td> </tr> <tr> <td>animation-timing-function</td> <td>规定动画的速度曲线。默认是 “ease”。</td> </tr> <tr> <td>animation-fill-mode</td> <td>规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。</td> </tr> <tr> <td>animation-delay</td> <td>规定动画何时开始。默认是 0。</td> </tr> <tr> <td>animation-iteration-count</td> <td>规定动画被播放的次数。默认是 1。</td> </tr> <tr> <td>animation-direction</td> <td>规定动画是否在下一周期逆向地播放。默认是 “normal”。</td> </tr> <tr> <td>animation-play-state</td> <td>规定动画是否正在运行或暂停。默认是 “running”。</td> </tr> </tbody> </table> 运用myfirst动画,设置所有属性: div{ animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; /*等同于animation: myfirst 5s linear 2s infinite alternate;*/ } ## CSS3 多列 ## CSS3 可以将文本内容设计成像报纸一样的多列布局 CSS3 多列属性 <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>column-count</td> <td>指定元素应该被分割的列数。</td> </tr> <tr> <td>column-fill</td> <td>指定如何填充列</td> </tr> <tr> <td>column-gap</td> <td>指定列与列之间的间隙</td> </tr> <tr> <td>column-rule</td> <td>所有 column-rule-* 属性的简写</td> </tr> <tr> <td>column-rule-color</td> <td>指定两列间边框的颜色</td> </tr> <tr> <td>column-rule-style</td> <td>指定两列间边框的样式</td> </tr> <tr> <td>column-rule-width</td> <td>指定两列间边框的厚度</td> </tr> <tr> <td>column-span</td> <td>指定元素要跨越多少列</td> </tr> <tr> <td>column-width</td> <td>指定列的宽度</td> </tr> <tr> <td>columns</td> <td>column-width 与 column-count 的简写属性。</td> </tr> </tbody> </table>
还没有评论,来说两句吧...