原创

css实现图片加速度旋转


在游览博客时发现有的图片会旋转,鼠标悬停还会一直加速,有点意思;于是百度了解了一番,发现是用到了css3transform属性,这里整理记录一下:

CSS样式

.about-img img:hover{   /*鼠标悬停时效果*/
    transform: rotate(666turn); /*旋转*/
    transition-duration: 59s; /*时间*/
    transition-timing-function: cubic-bezier(.34, 0, .84, 1) /*速度曲线*/
}

常用的属性

  1. transform: rotate(666turn);:旋转元素角度,这里turn = 360°
  2. transition-property: all;:指明效果变换的位置,比如width,height等,all是所有属性。
  3. transition-duration: 59s;:过渡效果的持续时间。
  4. transition-timing-function:cubic-bezier(.34,0,.84,1); :过渡效果的速度曲线,四个值的范围都是0-1,代表整个过程。
  5. transition-delay:1s; :效果执行前的等待时间

更多属性参考:https://www.w3school.com.cn/cssref/pr_transform.asp

正文到此结束