html5双屏显示文字内容响应式布局效果



83 330 111



特效描述:html5 双屏显示 文字内容 响应式布局效果,html5双屏显示预览,双屏文字内容布局效果,响应式布局

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/styles.css" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/stopExecutionOnTimeout.js"></script>

3. HTML代码

		<div class="m-container">
			<div class="slider">
				<div class="slide slide--1">
					<div class="slide__darkbg slide--1__darkbg"></div>
					<div class="container-fluid">
						<!-- one -->
						<div class="m-center fz-lg">CSS3<BR><p style="font-size: 30px;text-align: center">使用鼠标滚轮进行切换</p></div>
					</div>
				</div>
				<div class="slide slide--2">
					<div class="slide__darkbg slide--2__darkbg"></div>
					<div class="container-fluid">
						<div class="m-center fz-md">
							<ul class="items">
								<li class="animated" data-class="fadeInRight" data-delay="1s">1. CSS3 边框属性</li>
								<li class="animated" data-class="fadeInRight" data-delay="2s">2. CSS3 文本效果</li>
								<li class="animated" data-class="fadeInRight" data-delay="3s">
									<font color="red">3. CSS3 2D转换</font>
								</li>
								<li class="animated" data-class="fadeInRight" data-delay="4s">
									<font color="red">4. CSS3 3D转换</font>
								</li>
								<li class="animated" data-class="fadeInRight" data-delay="5s">
									<font color="red">5. CSS3 过渡</font>
								</li>
								<li class="animated" data-class="fadeInRight" data-delay="6s">
									<font color="red">6. CSS3 动画</font>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="slide slide--3">
					<div class="slide__darkbg slide--3__darkbg"></div>
					<div class="container-fluid">
						<!-- three -->
						<div class="row marginb">
							<div class="col-sm-8 subject animated" data-class="pulse" data-delay="1s">
								<h1>一、边框属性<span class="dot-right"></span> </h1>
							</div>
						</div>
						<div class="demo">
							<div class="demo__close-menu"></div>
							<div class="demo__section demo__section-1 active" data-section="1">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">1.border-radius</h2>
								<div class="demo-container">
									<h2>border-radius:   圆角边框,圆</h2>
									<h3>*语法:border-radius: length | %</h3>
									<div class="border-r1 animated" data-class="zoomInDown" data-delay="3s">圆角边框</div>
									<div class="border-r2 animated" data-class="rollIn" data-delay="5s">圆</div>
									<div class="border-r3 animated" data-class="rollIn" data-delay="7s">半圆</div>
								</div>
							</div>
							<div class="demo__section demo__section-2 inactive" data-section="2">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">2.box-shadow</h2>
								<div class="demo-container">
									<h2>box-shadow:  阴影</h2>
									<h3>*语法:box-shadow: h-shadow v-shadow blur spread color inset</h3>
									<h4>水平阴影的位置, 垂直阴影的位置, 模糊距离, 阴影的尺寸, 阴影的颜色, 将外部阴影 (outset) 改为内部阴影</h4>
									<div class="box-s"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="slide slide--4">
					<div class="slide__darkbg slide--4__darkbg"></div>
					<div class="container-fluid">
						<!-- four-->
						<div class="row marginb">
							<div class="col-sm-8 subject animated" data-class="pulse" data-delay="1s">
								<h1>二、文本效果<span class="dot-right"></span> </h1>
							</div>
						</div>
						<div class="demo">
							<div class="demo__close-menu"></div>
							<div class="demo__section demo__section-1 active" data-section="1">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">1.text-shadow</h2>
								<div class="demo-container">
									<h2>text-shadow: 文本阴影</h2>
									<h3>*text-shadow: h-shadow v-shadow blur color</h3>
									<h4>水平阴影、垂直阴影、模糊距离,以及阴影的颜色</h4>
									<div class="text-s animated" data-class="shake" data-delay="3s">文本阴影效果</div>
								</div>
							</div>
							<div class="demo__section demo__section-2 inactive" data-section="2">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">2.word-wrap</h2>
								<div class="demo-container">
									<h2>word-wrap: 自动换行</h2>
									<h3>*语法: word-warp: normal | break-word</h3>
									<div class="word-w animated" data-class="wobble" data-delay="4s">Honorificabilitudinitatibus, in Latin</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="slide slide--5">
					<div class="slide__darkbg slide--5__darkbg"></div>
					<div class="container-fluid">
						<!-- four-->
						<div class="row marginb">
							<div class="col-sm-8 subject animated" data-class="pulse" data-delay="1s">
								<h1>三、2D转换<span class="dot-right"></span> </h1>
							</div>
						</div>
						<div class="demo">
							<div class="demo__close-menu"></div>
							<div class="demo__section demo__section-1 active" data-section="1">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">1.transform</h2>
								<div class="demo-container">
									<h3>实现元素的位移、旋转、变形、缩放</h3>
								</div>
								<ul class="transform-ul">
									<li class="animated" data-class="swing" data-delay="3s"><span>移动 translate(x, y)</span> 可以改变元素的位置,x、y可为负值;</li>
									<li class="animated" data-class="swing" data-delay="4s"><span>缩放 scale(x, y)</span> 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值;</li>
									<li class="animated" data-class="swing" data-delay="5s"><span>旋转 rotate(deg)</span> 可以对元素进行旋转,正值为顺时针,负值为逆时针;</li>
									<li class="animated" data-class="swing" data-delay="6s"><span>倾斜 skew(deg, deg)</span> 可以使元素按一定的角度进行倾斜</li>
								</ul>
							</div>
							<div class="demo__section demo__section-2 inactive" data-section="2">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">2.transform: translate(x, y)</h2>
								<ul class="transform-ul">
									<li class="animated" data-class="zoomIn" data-delay="1s"><span>移动 translateX(n)</span> 沿着X轴移动;</li>
									<li class="animated" data-class="zoomIn" data-delay="2s"><span>移动 translateY(n)</span> 沿着Y轴移动;</li>
									<li class="animated" data-class="zoomIn" data-delay="3s"><span>移动 translate(x,y)</span> 沿着X,Y轴移动;</li>
								</ul>
								<div class="transform-demo">
									<div class="transform-div1"></div>
									<div class="transform-div2"></div>
								</div>
							</div>
							<div class="demo__section demo__section-3 inactive" data-section="3">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">3.transform: scale(x, y)</h2>
								<ul class="transform-ul">
									<li class="animated" data-class="rollInDownLeft" data-delay="1s"><span>缩放 scaleX(n)</span> 改变元素的宽度;</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="1s"><span>缩放 scaleY(n)</span> 改变元素的高度;</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="1s"><span>缩放 scale(x,y)</span> 改变元素的高度和宽度;</li>
								</ul>
								<div class="transform-demo">
									<div class="transform-div1"></div>
									<div class="transform-div3"></div>
								</div>
							</div>
							<div class="demo__section demo__section-4 inactive" data-section="4">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">4.transform: rotate(deg)</h2>
								<h3>*旋转只是在平面内旋转,没有X,Y轴概念,在3D转换中才有X,Y,Z轴,正值为顺时针,负值为逆时针。</h3>
								<div class="transform-demo">
									<div class="transform-div1"></div>
									<div class="transform-div4">旋转</div>
								</div>
							</div>
							<div class="demo__section demo__section-5 inactive" data-section="5">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">5.transform: skew(deg, deg)</h2>
								<ul class="transform-ul">
									<li class="animated" data-class="fadeInRight" data-delay="1s"><span>倾斜 skewX(deg)</span> 定义2D倾斜转换,沿着X轴;</li>
									<li class="animated" data-class="fadeInRight" data-delay="2s"><span>倾斜 skewY(deg)</span> 定义2D倾斜转换,沿着Y轴;</li>
									<li class="animated" data-class="fadeInRight" data-delay="3s"><span>倾斜 skew(deg, deg)</span> 定义2D倾斜转换,沿着X,Y轴;</li>
								</ul>
								<div class="transform-demo">
									<div class="transform-div1"></div>
									<div class="transform-div5">Y轴倾斜</div>
									<div class="transform-div6">X轴倾斜</div>
									<div class="transform-div7">X,Y轴</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="slide slide--6">
					<div class="slide__darkbg slide--6__darkbg"></div>
					<div class="container-fluid">
						<!-- five-->
						<div class="row marginb">
							<div class="col-sm-8 subject animated" data-class="pulse" data-delay="1s">
								<h1>四、3D转换<span class="dot-right"></span> </h1>
							</div>
						</div>
						<div class="demo">
							<div class="demo__close-menu"></div>
							<div class="demo__section demo__section-1 active" data-section="1">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">1.3D坐标轴</h2>
								<div class="demo-container">
									<h3>用X、Y、Z分别表示空间的3个维度,三条轴互相垂直</h3>
								</div>
								<div class="img-container">
									<div class="img-block"><img src="img/1.png" /> </div>
									<button class="btn btn-info btn-lg" data-index="1">3D坐标轴</button>
									<button class="btn btn-info btn-lg" data-index="2">左手坐标系</button>
									<button class="btn btn-info btn-lg" data-index="3">X轴</button>
									<button class="btn btn-info btn-lg" data-index="4">Y轴</button>
									<button class="btn btn-info btn-lg" data-index="5">Z轴</button>
								</div>
							</div>
							<div class="demo__section demo__section-2 inactive" data-section="2">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">2.transform: translate</h2>
								<ul class="transform-ul">
									<li><span>translate3d(x,y,z)</span> 定义3D转化;</li>
									<li><span>translateZ(z)</span> 仅使用于Z轴的值;</li>
								</ul>
								<div class="transform-demo">
									<div class="transform-div1"></div>
									<div class="transform-div8">translate3d</div>
								</div>
							</div>
							<div class="demo__section demo__section-3 inactive" data-section="3">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">3.transform: scale</h2>
								<ul class="transform-ul">
									<li><span>scale3d(n,n,n)</span> 定义3D缩放;</li>
									<li><span>scaleZ(n)</span> 给定Z轴值;</li>
								</ul>
								<div class="transform-demo">
									<div class="transform-div1"></div>
									<div class="transform-div9">scale3d(n,n,n)</div>
								</div>
							</div>
							<div class="demo__section demo__section-4 inactive" data-section="4">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">4.transform: rotate</h2>
								<ul class="transform-ul">
									<li class="animated" data-class="flipInX" data-delay="1s"><span>rotateX(x)</span> 定义沿着X轴旋转;</li>
									<li class="animated" data-class="flipInX" data-delay="2s"><span>rotateY(y)</span> 定义沿着Y轴旋转;</li>
									<li class="animated" data-class="flipInX" data-delay="3s"><span>rotateZ(z)</span> 定义沿着Z轴旋转;</li>
									<li class="animated" data-class="flipInX" data-delay="4s"><span>rotate3d(x,y,z,angle)</span> 定义3D旋转;</li>
								</ul>
								<h4>x<number> 类型, 表示旋转轴X坐标方向的矢量。y<number> 类型, 表示旋转轴Y坐标方向的矢量。z<number> 类型, 表示旋转轴Z坐标方向的矢量。a<angle> 类型,表示旋转角度。正的角度值表示顺时针旋转,负值表示逆时针旋转。</h4>
								<div class="transform-demo">
									<div class="transform-div1"></div>
									<div class="transform-div10">X轴旋转</div>
									<div class="transform-div11">Y轴旋转</div>
									<div class="transform-div12">Z轴旋转</div>
									<div class="transform-div13">X,Y,Z</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="slide slide--7">
					<div class="slide__darkbg slide--7__darkbg"></div>
					<div class="container-fluid">
						<div class="row marginb">
							<div class="col-sm-8 subject animated" data-class="pulse" data-delay="1s">
								<h1>五、过渡<span class="dot-right"></span> </h1>
							</div>
						</div>
						<div class="demo">
							<div class="demo__close-menu"></div>
							<div class="demo__section demo__section-1 active" data-section="1">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">1. transition</h2>
								<div class="demo-container">
									<h3>可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果</h3>
									<div class="row">
										<div class="col-md-8">
											<ul class="transition-ul">
												<li class="animated" data-class="bounceIn" data-delay="1s"><span>transition</span>用于在一个属性中设置四个过渡属性</li>
												<li class="animated" data-class="bounceIn" data-delay="3s"><span>transition-property</span>规定应用过渡的 CSS 属性的名称</li>
												<li class="animated" data-class="bounceIn" data-delay="5s"><span>transition-duration</span>定义过渡效果花费的时间</li>
												<li class="animated" data-class="bounceIn" data-delay="7s"><span>transition-timing-function</span>规定过渡效果的时间曲线</li>
												<li class="animated" data-class="bounceIn" data-delay="9s"><span>transition-delay</span>规定过渡效果何时开始</li>
											</ul>
										</div>
										<div class="col-md-4">
											<div class="transition-div1"></div>
										</div>
									</div>
								</div>
							</div>
						</div>	
					</div>
				</div>	
				<div class="slide slide--8">
					<div class="slide__darkbg slide--8__darkbg"></div>
					<div class="container-fluid">
						<div class="row marginb">
							<div class="col-sm-8 subject animated" data-class="pulse" data-delay="1s">
								<h1>六、动画<span class="dot-right"></span> </h1>
							</div>
						</div>
						<div class="demo">
							<div class="demo__close-menu"></div>
							<div class="demo__section demo__section-1 active" data-section="1">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">1. @keyframes</h2>
								<div class="demo-container">
									<h3>在 CSS3 中创建动画,必须要知道 @keyframes 规则,@keyframes 规则用于创建动画,通常使用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%</h3>
									<pre style="font-size: 22px;">
@keyframes changeBg {
	from {background:red;}
	to {background:yellow;}
}
									</pre>
									<h3>在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。必须要规定动画的名称,动画的时长</h3>
								</div>
							</div>
							<div class="demo__section demo__section-2 inactive" data-section="2">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">2. animation</h2>
								<ul class="transition-ul">
									<li class="animated" data-class="rollInDownLeft" data-delay="1s"><span>@keyframes</span> 规定动画;</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="3s"><span>animation</span> 所有动画属性的简写属性,除了 animation-play-state 属性;</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="5s"><span>animation-name</span> 规定 @keyframes 动画的名称;</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="7s"><span>animation-duration</span> 规定动画完成一个周期所花费的秒或毫秒(0);</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="9s"><span>animation-timing-function</span> 规定动画的速度曲线(ease);</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="11s"><span>animation-delay</span> 规定动画何时开始(0);</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="13s"><span>animation-iteration-count</span> 规定动画被播放的次数(1);</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="15s"><span>animation-direction</span> 规定动画是否在下一周期逆向地播放(normal);</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="17s"><span>animation-play-state	</span> 规定动画是否正在运行或暂停(running);</li>
									<li class="animated" data-class="rollInDownLeft" data-delay="19s"><span>animation-fill-mode</span> 规定对象动画时间之外的状态。</li>
								</ul>
							</div>
							<div class="demo__section demo__section-3 inactive" data-section="3">
								<div class="demo__menu-btn"></div>
								<h2 class="demo__section-heading">3. 案例</h2>
								<div class="animation-demo">animation</div>
							</div>
						</div>
					</div>
				</div>	
				<div class="slide slide--9">
					<div class="slide__darkbg slide--9__darkbg"></div>
					<div class="container-fluid">
						<div class="m-center fz-lg animated" data-class="flash" data-delay="1s">thanks</div>
					</div>
				</div>	
			</div>
			<!--页码-->
			<span class="page">1/9</span>
		</div>
		<script type="text/javascript">
			$(document).ready(function() {
				var $demo = $('.demo');
				var numOfSections = $('.demo__section').length;
				$(document).on('click', '.demo__menu-btn', function() {
					$demo.addClass('menu-active');
				});
				$(document).on('click', '.demo__close-menu', function() {
					$demo.removeClass('menu-active');
				});
				$(document).on('click', '.demo.menu-active .demo__section', function() {
					var $section = $(this);
					var index = +$section.data('section');
					$('.demo__section.active').removeClass('active');
					$('.demo__section.inactive').removeClass('inactive');
					$section.addClass('active');
					$demo.removeClass('menu-active');
					for(var i = index + 1; i <= numOfSections; i++) {
						if(window.CP.shouldStopExecution(1)) {
							break;
						}
						$('.demo__section[data-section=' + i + ']').addClass('inactive');
					}
					window.CP.exitedLoop(1);
				});
				//3D转换图片切换
				$(".img-container").on("click", "button", function() {
					var index = $(this).data("index");
					$(".img-block").find("img").attr("src", "img/"+index+".png");
				});
			});
		</script>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 预览 响应式区块列表布局 图片滑动 图片滑块 图片切换 图片选项卡 图标选项卡 文字滑动 文字滑块 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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