您的位置:首页 - 教程 - CSS - 正文
css的cubic-bezier(0,0,0,0)解析


cubic-bezier即为贝兹曲线中的绘制方法。图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]。


预留的几个特效:
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

也就是说第四个n是y2,和x2共同决定P2的位置

主要的作用是在制作css动画时,定义动画各个阶段的速度。
作为animation属性的值

实例代码:
<style>
div.hovertreemusic {
width: 45px;
height: 45px;
animation: hovertreerotate 2s cubic-bezier(0.42, 0, 0.58, 1.0) infinite;
-webkit-animation: hovertreerotate 2s linear cubic-bezier(0.42, 0, 0.58, 1.0); /*Safari and Chrome*/
margin: 2px;
background-image: url(http://hovertree.com/wx/hwq/10/css/music_note_big.png);
}

div.myhovertree {
width: 45px;
height: 45px;
animation: hovertreerotate 2s cubic-bezier(0.15, 0, 0.28, 1.0) infinite;
-webkit-animation: hovertreerotate 2s linear cubic-bezier(0.42, 0, 0.58, 1.0); /*Safari and Chrome*/
margin: 2px;
background-image: url(http://hovertree.com/wx/hwq/10/css/music_note_big.png);
}

div.hwq2 {
width: 45px;
height: 45px;
animation: hovertreerotate 2s cubic-bezier(0.65, 0.5, 0.68, 0.8) infinite;
-webkit-animation: hovertreerotate 2s linear cubic-bezier(0.42, 0, 0.58, 1.0); /*Safari and Chrome*/
margin: 2px;
background-image: url(http://hovertree.com/wx/hwq/10/css/music_note_big.png);
}

@keyframes hovertreerotate {
from {

margin-left:10px;
}

to {

margin-left:400px;
}
}

@-webkit-keyframes hovertreerotate /*Safari and Chrome*/
{
from {
margin-left:10px;
}

to {
margin-left:400px;
}
}

</style><div class="hovertreemusic"></div>
<div class="myhovertree"></div>
<div class="hwq2"></div>

效果:

评论: