likes
comments
collection
share

圆形旋转加速的头像

作者站长头像
站长
· 阅读数 85

效果走起

缘起

动画分析

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

CSS3实现

圆角

border-radius。

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

圆形旋转加速的头像

#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>
转载自:https://juejin.cn/post/7143781622842982437
评论
请登录