超實用 又不花裡胡哨的滑鼠滑過樣式

2021-10-24 17:00:50 字數 3417 閱讀 9316

【超實用】又不花裡胡哨的滑鼠滑過樣式

** | juejin.im/post/6881429197542785031

作者@kuangyaoqian

一、純的div

html**（以下效果皆圍繞這個**展開）
1、緩動上移效果圖：

2、放大效果效果圖：

3、框內放大效果效果圖：

4、蒙層效果效果圖：

二、上圖下文的div「不建議將整個div放大，會導致文字模糊抖動。上移的幅度也不要太大，否則會出現同樣的效果。」html**：（以下效果皆圍繞這個**展開）

kitty的標題標題


這是內容
1、框內放大+陰影效果圖：

.lists


.item


.item .item_pic


.item .item_pic img


.item:hover .item_pic img


.item:hover


.item_content
2、緩動上滑+陰影這個樣式很典型，比如花瓣網、掘金的活動欄目。

當div上移的時候，還是可以很清楚的看到字型模糊了，可以把字型縮小點，上移的幅度設定成乙個畫素。

效果圖：

3、蒙層效果+文字變色+邊框效果圖：

三、文字覆蓋div1、好看就對了效果圖：

2、文字滑動進入效果圖：

html**:

這裡放內容簡介，內容簡介,這裡放內容簡介，內容簡介,這裡放內容簡介，內容簡介
css**：

* 


.lists


.item 


.item img 


.item .text 


.item h1 


.item h2 


.item p 


.animate-text 


.item:hover 


.item:hover img 


.item:hover .animate-text 


.dots 


.dots span 


.item:hover span 


.dots span:nth-child(1) 


.dots span:nth-child(2) 


.dots span:nth-child(3)
3、按鈕滑動進入效果圖：

點讚
css**：

.item


.item img


.item:hover .btns


.item .btns


.follow,.love


.item:hover .follow


.item:hover .love


.follow


.love

整理自己實用又不記的JS方法

indexof 方法可返回某個指定的字串值在字串中首次出現的位置，找不到則返回 1。stringobject.indexof searchvalue 需檢索的字串值 fromindex 開始檢索的位置，預設0 用例 abcd indexof b 1 filter 用於把array的某些元素過濾掉，然...

超實用的jQuery分頁外掛程式

呼叫方法 tcdpagecode createpage pagecount 總頁數 current 當前頁 jquery.pager.js 應用案例 共條記錄，當前顯示第1頁 fxgoods.js middlediv height window.innerheight search height t...

超實用的idea 快捷鍵

超實用的idea 快捷鍵。command option 等於 command e command option control enter alt insert command 或 可以跳到大括號的開頭結尾 command f12可以顯示當前檔案的結構 command option n.建立類 co...