简谈CSS3中的特殊效果

搞点CSS3。然后就该进行下一步的学习了。

CSS3 2D效果

通过CSS3转换,可以对元素进行移动translate、缩放rotate、转动 scale、拉长skew、拉伸matrix。

IE10+,火狐,Opera支持这些2D效果。

Chrome和Safari需要添加-webkit-

IE9需要添加-ms-

比如-webkit-transform: rotate(30deg)就是让它顺时针旋转30度。

API在菜鸟教程都能查到,我就先略过了。

CSS3 3D效果与过渡

3D效果对浏览器的要求和2D效果一样,属性名还是transform。使用rotateX()rotateY()控制X和Y方向的变化,参数还是角度。

通过CSS3,可以在不使用Flash或者JS的情况下,当元素从一种样式变换到另一种样式时为元素添加效果。

过渡效果对于IE10以上,火狐,Chrome,Opera是支持的,对于Safari需要加-webkit-。要实现过渡,需要确定希望把效果添加到哪个CSS属性上,并规定时长。

基本格式:transition: 属性名 变化时间;,指定多个时,一个属性名对应一个变化时间算一对,多对之间逗号隔开。

当事件发生(鼠标浮上,鼠标点击等)时,改变对应的属性,就能以动画的形式进行变化,而不是瞬间变化,这里可能需要用到:hover等选择器。

CSS3 动画

使用@keyframes规则创建动画,在里面规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。

IE10以上,火狐,Opera支持这个规则和animation属性,Chrome和Safari需要加-webkit-

然后用animation调用刚才创建的动画就可以。通过至少规定动画的名称和时长这两个属性,就能将动画绑定到选择器。

使用一些关键字来区分阶段,它是不同于过渡的。过渡效果是简单的从一个变为另一个,而动画可以有不同的阶段,比如各种百分比阶段的时候操作是怎样的。不同的阶段可能会有不同的操作。当然也可以简单的使用from和to实现从一个变为另一个。

理论上讲,这是一个很强大的功能,可以用来做各种炫酷的骚气的网页动画,这部分内容值得深究。

CSS3 多列

对文本进行多列布局,像报纸那样。word里面也有对应类似的功能(分栏)。

(其实这玩意用盒模型也能写的出来,就是麻烦,用多列做会方便一些)

属性有column-count确定分多少列,column-gap确定分隔宽度,column-role设定分栏样式等等

IE10以上和Opera支持多列,火狐需要-moz-,Chrome和Safari需要-webkit-

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信