操做步驟——> 登錄掘金——> 右上角——>個人主頁——>把你的小手放到你的頭像上別動css
so easy! 看完你也會html
<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);
}
複製代碼
涉及到技術點:css3
- 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轉換。這個屬性容許你將元素旋轉,縮放,移動,傾斜等。查看詳情web
transition 用法bash
transition-property 指定CSS屬性的name,transition效果
transition-duration transition效果須要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的轉速曲線
transition-delay 定義transition效果開始的時候
複製代碼