<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      通過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>


      黄网站免费