• <ol id="gebcs"></ol>
    <track id="gebcs"><i id="gebcs"></i></track>

    通過CSS3的過渡效果實現文字的彈入彈出

    時間:2018-12-03 23:22:25 類型:HTML/CSS
    字號:    

    文字的彈入彈出是我們頁面中經常實現的效果, 這里通過CSS3的過渡改變div的positon:absolute的top值來分享一實例

    效果圖: 

            


    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    
    <div id="divs">
    	<li>
    		我們都是好演員
    			<div>
    			大型電視紀錄片<br/>
    			我們一起走<br/>
    			播出第一集第二集
    			</div>
    	</li>
    	<li>
    		我們都是好演員
    			<div>
    			大型電視紀錄片<br/>
    			我們一起走<br/>
    			播出第一集第二集
    			</div>
    	</li>
    	<li>
    		我們都是好演員
    			<div>
    			大型電視紀錄片<br/>
    			我們一起走<br/>
    			播出第一集第二集
    			</div>
    	</li>
    </div>
    	
    </body>
    </html>
    <style type="text/css">
    	*{padding:0; margin:0;}
    	li{list-style: none;}
    	#divs{width: 800px; 
    		 height: 200px; 
    		 margin:0 auto;
    		 border: 1px solid #f00;
    		}
    	#divs>li{
    		float: left;
    		width: 200px;
    		height: 200px;
    		 margin-right: 20px;
    		  border: 1px solid #f00;
    		}
    	#divs>li>div{
    		width: 200px;
    		height: 150px;
    		padding-top: 50px;
    		text-align: center;
    		position: absolute;
    		opacity: 0;
    		
    		top:200px;
    		-webkit-transition:all .3s linear;
    		-moz-transition:all .3s linear;
    		-ms-transition:all .3s linear;
    		-o-transition:all .3s linear;
    		transition:all .3s linear;
    		
    	}
    	#divs>li:hover>div{
    		opacity: 1;
    		font-size: 14px;
    		top:0;
    		background: #000;
    		color: #fff;
    		
    	}
    </style>


    黄片基地