1.-webkit-font-smoothing
CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
none:文字的默认样式,可能会出现模糊的锯齿模样
antialiased:无锯齿,让文字变得清晰可见
2.transform
transform的含义是:改变,使…变形;转换
transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。
下面我们来分解各个属性的用法:
transform:rotate():
含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。
transform:skew():
含义:倾斜;
transform:scale():
含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。
transform:translate():
含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。
3.transition
transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | |
transition-property | 规定应用过渡的 CSS 属性的名称。 | |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | |
transition-delay | 规定过渡效果何时开始。默认是 0。 |
过度的曲线效果
(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]区间内)
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s, transform 2s;
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。</div>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
在使用transition实现动画的显隐,不能使用display:none,要使用opacity:0或者opacity:1来实现
来源:oschina
链接:https://my.oschina.net/u/2328177/blog/488640