-webkit-font-smoothing，transition，transform动画

最新推荐文章于 2024-05-23 21:34:38 发布

weixin_33949359

最新推荐文章于 2024-05-23 21:34:38 发布

阅读量80

点赞数

文章标签： python

原文链接：https://my.oschina.net/leonaLily/blog/488640

版权

2019独角兽企业重金招聘Python工程师标准>>>

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来实现

转载于:https://my.oschina.net/leonaLily/blog/488640