您的位置：首页 > Web前端 > CSS

CSS笔记二

2016-06-10 16:11 525 查看

1、目前看的都是CSS3特性相关知识。
对长单词拆分并切换到下一行

p {word-wrap:break-word;}
2、

skew

英[skju:]

美[skju]

adj.	斜的，歪的; [数学] 不对称的; [统计学] 歪斜，扭曲;

vt.	歪曲; 曲解; 使歪斜;

vi.	偏离，歪斜; 斜视;

3、

div

{

transform: scale(2,4);

-ms-transform: scale(2,4);
/* IE 9 */

-webkit-transform: scale(2,4);
/* Safari 和 Chrome */

-o-transform: scale(2,4); /* Opera */

-moz-transform: scale(2,4); /* Firefox */

}

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
注意观察常用的这几个浏览器适配的前缀
4、CSS3中的矩阵讲的不错的文章：http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/comment-page-2/

transform: matrix(a,b,c,d,e,f);
六个参数对应的矩阵是

所以矩阵公式：

x' = ax+cy+e;

y' = bx+dy+f;

矩阵的偏移：只与最后两个参数e， f有关

矩阵的缩放： matrix(sx, 0, 0, sy,
0, 0);

，等同于

scale(sx,
sy)

;
矩阵的旋转：

matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 记忆：CS-SC对称结构
拉伸：

matrix(1,tan(θy),tan(θx),1,0,0)

θy表示Y轴倾斜的角度，θx表示x轴倾斜的角度
对于一般的交互，

transform

属性默认提供的些方法足够了，但是，一些其他的效果，如果

transform

属性没有提供接口方法，比方说，“镜像对称效果”(可以自己画图，根据矩阵公式算出以K为参数的a
b c d)，这时，就只能靠

matrix

矩阵了。matrix矩阵是

transform

变换的基础，可以应付很多高端的效果。
5、CSS3过渡效果很炫哎！
向多个样式添加过渡效果
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
6、过渡简写函数的形式

div

{

transition: width 1s linear 2s;
/* Firefox 4 */

-moz-transition:width 1s linear 2s;
/* Safari and Chrome */

-webkit-transition:width 1s linear 2s;
/* Opera */

-o-transition:width 1s linear 2s;
}

含义分别是：应用过渡属性的属性名，过渡用时，过渡效果的时间曲线(如匀速/ 或者以慢速开始，变快，再以慢速结束等过渡效果)，过渡何时开始
7、CSS3动画请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
8、关于不同浏览器需要的前缀
Firefox是 -moz-
Safari 和Chrome 是 -webkit-
Opera是 -o-
9、

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

参数含义分别是：动画名称，完成一个周期花费时间，动画速度曲线，何时开始，播放次数，是否在下一周期逆向播放，是否正在运行或者暂停

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航