css实现图片加速度旋转
在游览博客时发现有的图片会旋转,鼠标悬停还会一直加速,有点意思;于是百度了解了一番,发现是用到了css3
的transform
属性,这里整理记录一下:
CSS样式
.about-img img:hover{ /*鼠标悬停时效果*/
transform: rotate(666turn); /*旋转*/
transition-duration: 59s; /*时间*/
transition-timing-function: cubic-bezier(.34, 0, .84, 1) /*速度曲线*/
}
常用的属性
transform: rotate(666turn);
:旋转元素角度,这里turn = 360°transition-property: all;
:指明效果变换的位置,比如width,height等,all是所有属性。transition-duration: 59s;
:过渡效果的持续时间。transition-timing-function:cubic-bezier(.34,0,.84,1);
:过渡效果的速度曲线,四个值的范围都是0-1,代表整个过程。transition-delay:1s;
:效果执行前的等待时间
正文到此结束