圆形旋转加速的头像

1,118 阅读2分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

效果走起

缘起

这个有趣的动画,是今天在看掘金通知的时候,无意间鼠标滑到了头像上,然后看到头像尽然会旋转,并且越转越快,有点意思哈。我就在想他是怎么实现的呢?

动画分析

  1. 圆角。头像是一个圆形的。
  2. 旋转。并且是有方向的。
  3. 速度。由慢不断加速。

CSS3实现

圆角

border-radius

可以分别设置4个角的弧度。可以在MDN的示例中试试。

image.png

#example1 {

  border-radius: 50%;

  background: linear-gradient(45deg, #3023AE 0%, #f09 100%);

  width:295px;

  height:295px;

}

小米logo的瓜 参考文章

旋转

使用transform属性的rotate()方法来实现元素的旋转效果。

参数说明:

  1. angle表示元素相对于中心原点旋转的度数,单位为deg。
  2. 如果度数为正,则表示顺时针旋转;
  3. 如果度数为负,则表示逆时针旋转。
transform: rotate(angle);

大漠-w3cplus

速度

transition-timing-function属性指定切换效果的速度。此属性允许一个过渡效果,以改变其持续时间的速度。

语法:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(*n*,*n*,*n*,*n*);
描述
linear规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

菜鸟教程-示例

问题

高兴的写好了css,发现怎么不旋转呢。

  1. 缺少动画持续的时间。

transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。

time: 规定完成过渡效果需要花费的时间(以秒或毫秒计)。 默认值是 0,意味着不会有效果。

transition-duration: *time*;

参考示例

  1. 旋转角度问题

各个角度换算

总结

生活处处都是惊喜,只不过是我们还未来的及去发现。做一个热爱生活的少年吧。加油!

补充

可以用animation实现。效果是一样的。 w3chool-animation

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
border-radius: 50%;

/*Safari and Chrome*/
}
div:hover{
	animation:mymove 5s cubic-bezier(.34,0,.84,1);
}

@keyframes mymove
{
from {transform: rotate(0deb);}
to {transform: rotate(180turn);}
}


</style>
</head>
<body>

<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

<div>123</div>

</body>
</html>