请把你的小手放到你的头像上

有趣的发现

操做步骤——> 登录掘金——> 右上角——>个人主页——>把你的小手放到你的头像上别动

晕吗？ 晕。

怎么作到的？ 来看着

so easy！ 看完你也会

<div class="userheath">
</div>
复制代码

.userheath {
    background-image: url(https://user-gold-cdn.xitu.io/2019/3/18/1698efe140476a20?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1);
    display: inline-block;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
}
.userheath:hover {
    transform: rotate(666turn);
    transition-delay: 1s;
    transition-property: all;
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34,0,.84,1);
}
复制代码

总结，是否是很简单

涉及到技术点:

• background 用法

background:#fff url('http://coding.imweb.io/img/project/blog/bg.jpg') no-repeat bottom right fixed;
背景图定位background-attachment：fixed   【是否固定或者随着页面的其他部分滚动】
复制代码

• css动画相关

1. Transform属性应用于元素的2D或3D转换。这个属性容许你将元素旋转，缩放，移动，倾斜等。查看详情

2. transition 用法

transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果须要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候
复制代码