css3仿手機郵箱界面收件箱文件打開動畫特效



129 512 171



特效描述:手機郵箱界面 文件打開動畫 動畫特效,css3手機郵箱界面,收件箱打開動畫特效

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

2. HTML代碼

<div class='title'>
  <div class='title_inner'>
	<h1>
	  Funky fresh inbox UI
	</h1>
	<h2>
	  Just messing around with some concepts for a UI... and this is what i ended up with! Pure css goodness!
	</h2>
  </div>
</div>
<div class='container'>
  <div class='container_ui'>
	<div class='container_ui__heading'>
	  <div class='header_icon'>
		<img src='img/mail.png'>
	  </div>
	  <h1>
		inbox
	  </h1>
	  <div class='menu_icon'>
		<div class='div'></div>
		<div class='div'></div>
		<div class='div'></div>
	  </div>
	</div>
	<input id='message-1' type='checkbox'>
	<label for='message-1' href='#move'>
	  <div class='container_ui__item'>
		<div class='face'>
		  <img src='img/1.jpg'>
		  <div class='color_bar one'>
			<p>Now Reading</p>
			<span>Read</span>
		  </div>
		</div>
		<h2>
		  aspca
		</h2>
		<div class='dot active'></div>
		<h3>subj: thanks, you are amazing</h3>
		<h4>Your generous donation saved 3 million puppies...</h4>
	  </div>
	  <div class='container_ui__expand' id='close'>
		<div class='heading'>
		  <div class='heading_head'></div>
		  <label for='message-1'>
			x
		  </label>
		</div>
		<div class='body'>
		  <div class='user'>
			<div class='face'>
			  <img src='img/1.jpg'>
			</div>
			<div class='details'>
			  <h2>aspca</h2>
			  <h3>subj: thanks you are amazing</h3>
			</div>
		  </div>
		  <div class='content'>
			<p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna...</p>
			<span>Reply:</span>
			<textarea></textarea>
		  </div>
		</div>
	  </div>
	</label>
	<input id='message-2' type='checkbox'>
	<label for='message-2'>
	  <div class='container_ui__item'>
		<div class='face'>
		  <img src='img/2.jpg'>
		  <div class='color_bar two'>
			<p>Now Reading</p>
			<span>Read</span>
		  </div>
		</div>
		<h2>Nobel prize foundation</h2>
		<div class='dot'></div>
		<h3>subj: Your paper on molecular fusion</h3>
		<h4>We are awarding you the nobel...</h4>
	  </div>
	  <div class='container_ui__expand'>
		<div class='heading two'>
		  <div class='heading_head'>
			<label for='message-2'>
			  x
			</label>
		  </div>
		</div>
		<div class='body'>
		  <div class='user'>
			<div class='face'>
			  <img src='img/2.jpg'>
			</div>
			<div class='details'>
			  <h2>Nobel prize foundation</h2>
			  <h3>subj: Your paper on molecular</h3>
			</div>
		  </div>
		  <div class='content'>
			<p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna...</p>
			<span>Reply:</span>
			<textarea></textarea>
		  </div>
		</div>
	  </div>
	</label>
	<input id='message-3' type='checkbox'>
	<label for='message-3'>
	  <div class='container_ui__item'>
		<div class='face'>
		  <img src='img/3.jpg'>
		  <div class='color_bar three'>
			<p>Now Reading</p>
			<span>Read</span>
		  </div>
		</div>
		<h2>megan fox</h2>
		<div class='dot active'></div>
		<h3>subj: i miss you</h3>
		<h4>Where have you been? I've been trying to call you...</h4>
	  </div>
	  <div class='container_ui__expand'>
		<div class='heading three'>
		  <div class='heading_head'>
			<label for='message-3'>
			  x
			</label>
		  </div>
		</div>
		<div class='body'>
		  <div class='user'>
			<div class='face'>
			  <img src='img/3.jpg'>
			</div>
			<div class='details'>
			  <h2>megan fox</h2>
			  <h3>subj: i miss you</h3>
			</div>
		  </div>
		  <div class='content'>
			<p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna...</p>
			<span>Reply:</span>
			<textarea></textarea>
		  </div>
		</div>
	  </div>
	</label>
	<input id='message-4' type='checkbox'>
	<label for='message-4'>
	  <div class='container_ui__item'>
		<div class='face'>
		  <img src='img/4.jpg'>
		  <div class='color_bar four'>
			<p>Now Reading</p>
			<span>Read</span>
		  </div>
		</div>
		<h2>Linkedin</h2>
		<div class='dot active'></div>
		<h3>subj: Message from bill gates</h3>
		<h4>I want to add you to my personal network...</h4>
	  </div>
	  <div class='container_ui__expand'>
		<div class='heading four'>
		  <div class='heading_head'>
			<label for='message-4'>
			  x
			</label>
		  </div>
		</div>
		<div class='body'>
		  <div class='user'>
			<div class='face'>
			  <img src='img/4.jpg'>
			</div>
			<div class='details'>
			  <h2>Linkedin</h2>
			  <h3>Message from bill gates</h3>
			</div>
		  </div>
		  <div class='content'>
			<p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna...</p>
			<span>Reply:</span>
			<textarea></textarea>
		  </div>
		</div>
	  </div>
	</label>
	<input id='message-5' type='checkbox'>
	<label for='message-5'>
	  <div class='container_ui__item'>
		<div class='face'>
		  <img src='img/5.jpg'>
		  <div class='color_bar five'>
			<p>Now Reading</p>
			<span>Read</span>
		  </div>
		</div>
		<h2>Jesse pinkman</h2>
		<div class='dot'></div>
		<h3>subj: Let's get together sometime yo!</h3>
		<h4>Hey, how's it going? You free at all this weekend...</h4>
	  </div>
	  <div class='container_ui__expand'>
		<div class='heading five'>
		  <div class='heading_head'>
			<label for='message-5'>
			  x
			</label>
		  </div>
		</div>
		<div class='body'>
		  <div class='user'>
			<div class='face'>
			  <img src='img/5.jpg'>
			</div>
			<div class='details'>
			  <h2>Jesse pinkman</h2>
			  <h3>subj: Let's get together sometime yo!</h3>
			</div>
		  </div>
		  <div class='content'>
			<p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna...</p>
			<span>Reply:</span>
			<textarea></textarea>
		  </div>
		</div>
	  </div>
	</label>
	<input id='message-6' type='checkbox'>
	<label for='message-6'>
	  <div class='container_ui__item'>
		<div class='face'>
		  <img src='img/6.jpg'>
		  <div class='color_bar six'>
			<p>Now Reading</p>
			<span>Read</span>
		  </div>
		</div>
		<h2>James cameron</h2>
		<div class='dot active'></div>
		<h3>subj: avatar 2</h3>
		<h4>Please consider writing the script...</h4>
	  </div>
	  <div class='container_ui__expand'>
		<div class='heading six'>
		  <div class='heading_head'>
			<label for='message-6'>
			  x
			</label>
		  </div>
		</div>
		<div class='body'>
		  <div class='user'>
			<div class='face'>
			  <img src='img/6.jpg'>
			</div>
			<div class='details'>
			  <h2>James cameron</h2>
			  <h3>subj: avatar 2</h3>
			</div>
		  </div>
		  <div class='content'>
			<p><b>Email text</b></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.<br/><br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna...</p>
			<span>Reply:</span>
			<textarea></textarea>
		  </div>
		</div>
	  </div>
	</label>
  </div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表