html5 3D手机端界面交互提示文字信息代码



119 473 158



特效描述:html5 3D手机端 界面交互 提示文字信息,点击按钮打开3D手机界面

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script>

3. HTML代码

	<section class="cd-product">
		<div class="cd-product-intro">
			<h1>3D动画展示特效</h1>
			<div class="cd-triggers">
				<a href="#cd-product-tour" id="cd-start" class="cd-btn">Start</a>
			</div>
		</div> <!-- cd-product-intro -->
		<div id="cd-product-tour" class="cd-product-mockup">
			<img src="img/cd-app-image.png" alt="Preview image">
			<ul class="cd-points-container">
				<li class="cd-single-point">
					<a class="cd-img-replace" href="#0">More info</a>
					<div class="cd-more-info cd-left">
						<h2>诚品书店</h2>
						<p>
							诚品信义旗舰店集合了图书、购物、服装、美食等于一体,运用“连锁而不复制”的诚品经验,创造国际化的台北城市意象与诚品life style的文化品牌,成为华人市场最具指针性的“国际文创交流平台”。
						</p>
						<a href="#0" class="cd-close-info cd-img-replace">Close</a>
					</div>
				</li> <!-- .cd-single-point -->
				<li class="cd-single-point">
					<a class="cd-img-replace" href="#0">More info</a>
					<div class="cd-more-info cd-left">
						<h2>诚品书店</h2>
						<p>
							诚品信义旗舰店集合了图书、购物、服装、美食等于一体,运用“连锁而不复制”的诚品经验,创造国际化的台北城市意象与诚品life style的文化品牌,成为华人市场最具指针性的“国际文创交流平台”。
						</p>
						<a href="#0" class="cd-close-info cd-img-replace">Close</a>
					</div>
				</li> <!-- .cd-single-point -->
				<li class="cd-single-point">
					<a class="cd-img-replace" href="#0">More info</a>
					<div class="cd-more-info cd-right">
						<h2>诚品书店</h2>
						<p>
							诚品信义旗舰店集合了图书、购物、服装、美食等于一体,运用“连锁而不复制”的诚品经验,创造国际化的台北城市意象与诚品life style的文化品牌,成为华人市场最具指针性的“国际文创交流平台”。
						</p>
						<a href="#0" class="cd-close-info cd-img-replace">Close</a>
					</div>
				</li> <!-- .cd-single-point -->
			</ul> <!-- .cd-points-container -->
			<div class="cd-3d-right-side"></div>
			<div class="cd-3d-bottom-side"></div>
		</div> <!-- .cd-product-mockup -->
		<a href="#0" class="cd-close-product-tour cd-img-replace"></a>
	</section> <!-- .cd-product -->
<script src="js/main.js"></script> <!-- Resource jQuery -->



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


热门标签: 右键菜单 文字标签 文字提示框 彩色文字 提示框/弹出层 文字闪烁 layer 打字机 lightbox 文字列表 Tooltip工具提示框 文字弹幕 浮动提示框 文字高亮 html5弹窗动画 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 文字滚动 文字滑动 文字切换 弹出层拖动 窗口提示框 图片文字 文字导航菜单 文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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