div的溢出和隐藏加动画出现鼠标滑动效果
生活随笔
收集整理的這篇文章主要介紹了
div的溢出和隐藏加动画出现鼠标滑动效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>無標題文檔</title>
6 <style>
7 /*讓圖片把包含圖片和文字的div占滿，讓文字div溢出隱藏*/
8 #mm{
9 width:1270px; /*調節寬度讓他居中*/
10 overflow:hidden; /*他的子div把這個div撐開*/
11 margin:0 auto;
12 }
13 .pro img{
14 width:100%; /*讓這個圖片的寬高占他父div的寬高和父div的寬高一樣*/
15 height:100%;
16 display:block;/*讓這個圖片成為盒子模型成為一個div*/
17 }
18 .pro{
19 border:1px dashed #B8B4B4;
20 width:300px;/*設置大div的寬高*/
21 height:150px;
22 padding:2px;/*讓圖片和他的父div中間有空隙*/
23 overflow:hidden;/*隱藏溢出的文字div*/
24 float:left;/*讓這個div左對齊*/
25 margin:5px;/*讓這個div四周都有5px空隙*/
26 }
27 div.pro div{
28 position:relative;/*相對定位div移走后還占有原來的位置*/
29 width:300px;/*設置文字div的寬度和高度寬度要和pro父div的一樣寬*/
30 height:50px;
31
32 -webkit-transition:all 0.2s ease-in 0;/*動畫效果*/
33 background-image:linear-gradient(rgba(0,0,0,0.06),#000);/*背景漸變效果*/
34 bottom:-2px;/* 讓隱藏的文字div下移動讓文字div距離他的父div的底部有2px的縫隙因為圖片都有2px的間隙，為了讓他從圖片底部出現，所以要寫盡量比圖片的間隔稍微大一點點*/
35 }
36 div.pro:hover div{
37 bottom:50px;/*鼠標滑過讓文字div距離父div底部向上有50px的縫隙*/
38 }
39 </style>
40 </head>
41 <body>
42 <div id="mm">
43 <div class="pro">
44 <img src="images/img2.jpg">
45 <div>產品中心下載</div>
46 </div>
47 <div class="pro">
48 <img src="images/img2.jpg">
49 <div>產品中心下載</div>
50 </div>
51 <div class="pro">
52 <img src="images/img2.jpg">
53 <div>產品中心下載</div>
54 </div>
55 <div class="pro">
56 <img src="images/img2.jpg">
57 <div>產品中心下載</div>
58 </div>
59 <div class="pro">
60 <img src="images/img2.jpg">
61 <div>產品中心下載</div>
62 </div>
63 <div class="pro">
64 <img src="images/img2.jpg">
65 <div>產品中心下載</div>
66 </div>
67
68 <div class="pro">
69 <img src="images/img2.jpg">
70 <div>產品中心下載</div>
71 </div>
72 <div class="pro">
73 <img src="images/img2.jpg">
74 <div>產品中心下載</div>
75 </div>
76 <div class="pro">
77 <img src="images/img2.jpg">
78 <div>產品中心下載</div>
79 </div>
80 <div class="pro">
81 <img src="images/img2.jpg">
82 <div>產品中心下載</div>
83 </div>
84 <div class="pro">
85 <img src="images/img2.jpg">
86 <div>產品中心下載</div>
87 </div>
88 <div class="pro">
89 <img src="images/img2.jpg">
90 <div>產品中心下載</div>
91 </div>
92 <div class="pro">
93 <img src="images/img2.jpg">
94 <div>產品中心下載</div>
95 </div>
96 <div class="pro">
97 <img src="images/img2.jpg">
98 <div>產品中心下載</div>
99 </div>
100 <div class="pro">
101 <img src="images/img2.jpg">
102 <div>產品中心下載</div>
103 </div>
104
105
106 </div>
107
108 </body>
109 </html>
總結
以上是生活随笔為你收集整理的div的溢出和隐藏加动画出现鼠标滑动效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PG数据库恢复简单记录
- 下一篇： 大学专业选热门的还是热爱的？网友吵翻了