請把你的小手放到你的頭像上

有趣的發現

操做步驟——> 登錄掘金——> 右上角——>個人主頁——>把你的小手放到你的頭像上別動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動畫相關
  1. Transform屬性應用於元素的2D或3D轉換。這個屬性容許你將元素旋轉,縮放,移動,傾斜等。查看詳情web

  2. transition 用法bash

transition-property	指定CSS屬性的name,transition效果
transition-duration	transition效果須要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的轉速曲線
transition-delay	定義transition效果開始的時候
複製代碼
相關文章
相關標籤/搜索