[04-06]鼠標懸停圖片時，實現抖動效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠標懸停圖片時，實現抖動效果</title>
<link rel="stylesheet" href="16.css">
</head>
<body>
<ul>
<li>
<img src="./img/shengdanshu-001.jpg"/>
<p >
景色不錯！djfdfj jjgfisdj gsdj sjidgj s sdgj sdgjg sgjsg sgjs
</p>
</li>
<li>
<img src="./img/donggong_bowuguan-002.jpg"/>
<p>房子不錯！</p>
</li>
</body>
</html>
/*鼠標懸停時，讓li向右上方偏移2px，從而實現抖動的效果*/
/*僞類選擇器,hover 當鼠標懸停至元素上方時，向該元素添加樣式；*/
li:hover{
position:relative;/*意思是指要相對定位了*/
left: 200px;
top: -200px;
}
相關文章
- 1. [04-06]鼠標懸停圖片時，實現抖動效果
- 2. HTML CSS 實現鼠標懸停時圖片拉近效果
- 3. Selenium2 鼠標懸停效果實現
- 4. 基於html5鼠標懸停圖片動畫展現效果
- 5. jQuery的鼠標懸停時放大圖片的效果
- 6. css3鼠標懸停動畫效果
- 7. 鼠標懸停css3動畫效果
- 8. HTML 圖片鼠標懸停動態效果
- 9. 鼠標懸停出現遮罩或圖片放大效果
- 10. 鼠標懸停標籤效果
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • Markdown 圖片 - Markdown 教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章