html5 css3人物头像提示框动画显示特效



187 747 250



特效描述:html5 css3 人物头像提示框 动画显示特效,html5 css3提示框

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/alpha.js"></script>

3. HTML代码

	<section id="testimonials">
		<div class="testim-ovl"></div>
		<div class="testimonials-wrapper">
		 <ul class="testimonials-line">
		   <li class="customer">
			   <div class="testimonial-bubble">
				   <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc,</p>
			   </div>
			   <div class="cus-profile">
				  <span class="cus-image"><img src="images/te1.jpg"></span>
				 <span class="cus-name">
					 Customer
					 <span class="cus-title">His title</span>
				  </span>  
			   </div>
		   </li>
		   <li class="customer">
			   <div class="testimonial-bubble">
				   <p> Lor separat existentie es un myth. Por scientie, musica, sport etc,</p>
			   </div>
			   <div class="cus-profile">
				  <span class="cus-image"><img src="images/te2.jpg"></span>
				  <span class="cus-name">
					 Customer
					 <span class="cus-title">His title</span>
				  </span>   
			   </div>
		   </li>
		   <li class="customer">
			   <div class="testimonial-bubble">
				   <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc,</p>
			   </div>
			   <div class="cus-profile">
				  <span class="cus-image"><img src="images/te3.jpg"></span>
				  <span class="cus-name">
					 Customer
					 <span class="cus-title">His title</span>
				  </span>  
			   </div>
		   </li>
		   <li class="customer">
			   <div class="testimonial-bubble">
				   <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. </p>
			   </div>
			   <div class="cus-profile">
				  <span class="cus-image"><img src="images/te4.jpg"></span>
				  <span class="cus-name">
					 Customer
					 <span class="cus-title">His title</span>
				  </span>  
			 </div>
		   </li>
		 <span id="prev"></span>
		 <span id="next"></span>   
		 </ul><!-- .testimonials-line -->
		 </div><!-- .testimonials-wrapper -->
  </section><!-- .testimonials -->  
<script type="text/javascript">
$(document).ready(function(){
	$('#testimonials').alpha();
})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 悬浮浮动漂浮 弹出层拖动 窗口提示框 滑动星星打分 浮动提示框 html5弹窗动画 html5动画h5动画 其他更多 html5按钮动画 图片广告 文字提示框 html5图片动画 提示框/弹出层 鼠标滑过

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到