html5雙屏顯示文字內容響應式布局效果



87 347 116



特效描述: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

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

老夫子电子