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

叁歲伎倆 2022-10-01 05:49 130阅读 0赞

### 有趣的发现 ###

操作步骤——> 登陆掘金——> 右上角——>我的主页——>把你的小手放到你的头像上别动

### 晕吗？ 晕。 ###

### 怎么做到的？ 来看着 ###

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转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。[查看详情][Link 1]
2.  transition 用法

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

转载于:https://juejin.im/post/5cdbac8df265da03867e7518

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fwww.runoob.com%2Fcssref%2Fcss3-pr-transform.html