有趣的发现
操作步骤——> 登陆掘金——> 右上角——>我的主页——>把你的小手放到你的头像上别动
晕吗？ 晕。
怎么做到的？ 来看着
so easy！ 看完你也会
复制代码
.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动画相关
-
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
-
transition 用法
transition-property 指定CSS属性的name，transition效果transition-duration transition效果需要指定多少秒或毫秒才能完成transition-timing-function 指定transition效果的转速曲线transition-delay 定义transition效果开始的时候复制代码