掘金个人主页头像旋转效果

2023-11-19

在这里插入图片描述

<img data-v-fd37d0ac="" data-v-3ce2bd44="" data-v-5ec8ef79="" src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/d1d3c1b115358ea70f51edcd697b58b2~300x300.image" alt="钱端挖掘机师傅的个人资料头像" class="lazy avatar avatar" data-src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/d1d3c1b115358ea70f51edcd697b58b2~300x300.image">
.avatar:hover {
   transform: rotate(666turn);
   transition-delay: 1s;
   transition-property: all;
   transition-duration: 59s;
   transition-timing-function: cubic-bezier(.34,0,.84,1);
}

(1)transform:css3Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
(2)rotate(666turn):rotate(angle) 定义 2D 旋转,在参数中规定角度。1 turn 相当于1圈,就是360度,90度就是0.25turn。
(3)transition-delay:延迟1s再执行动画
(4)transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
transition-property: all所有属性都将获得过渡效果。
(5)transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。
(6)transition-timing-function 属性规定过渡效果的速度曲线。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

掘金个人主页头像旋转效果 的相关文章