JS高性能页面滚动触发元素代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS高性能页面滚动触发元素代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS高性能页面滚动触发元素代码</title>
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link href="css/style.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">

</head>
<body>
<div class="block">
	<h1 data-scroll="toggle(.scaleUpIn, .scaleUpOut) addHeight" class="title">高性能页面滚动触发HTML元素动画JS插件<span></span></h1>
	<div class="htmleaf-demo center">
	  <a href="index.html" class="current">垂直布局</a>
	  <a href="index2.html">水平布局</a>
	</div>
	<svg viewBox="0 0 60 60">
		<path d="M52.254 18.327c0.816-0.804 2.127-0.804 2.937 0s0.813 2.103 0 2.907l-23.724 23.49c-0.81 0.804-2.121 0.804-2.937 0l-23.724-23.49c-0.81-0.804-0.81-2.103 0-2.907 0.813-0.804 2.127-0.804 2.937 0l22.257 21.423 22.254-21.423z"></path>
	</svg>
</div>
<div class="block">
	<h1 data-scroll="toggle(.fromTopIn, .fromTopOut) addHeight">CSS Animations</h1>
	<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) addHeight">All animations are triggered by classes, so you can take advantage of the power that CSS3 animations give you.</h2>
</div>
<div class="block">
	<h1 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight">Vanilla JS</h1>
	<h2 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight">It's written in vanilla javascript, so you can use it with any framework.</h2>
</div>
<div class="block">
	<h1 data-scroll="toggle(.scaleDownIn, .scaleDownOut) addHeight">Request Animation Frame</h1>
	<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) addHeight">It uses the window.requestAnimationFrame method so it doesn't jack the users scroll. Animations are triggered when the browser is ready for it.</h2>
</div>
<div class="block">
	<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight">Simple syntax</h1>
	<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight">You define the options inside the HTML attribute, so after you have initialised the ScrollTrigger you don't have to touch JavaScript again.</h2>
</div>
<div class="block">
	<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight">Custom<span></span>izable</h1>
	<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight">ScrollTrigger offers a range of options, from calling custom JavaScript functions to defining custom offsets and classes.</h2>
	<h3 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight" data-scroll-showCallback="counter">You scrolled past this block <span>0</span> times.</h3>
</div>
<div class="block">
	<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight once">Versatile</h1>
	<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) addHeight once">ScrollTrigger supports vertical and horizontal scrolling, check out the <a href="index2.html">horizontal demo</a>.</h2>
	<h3 data-scroll="toggle(.fromRightIn, .fromRightOut) addHeight once">This block only animates once.</h3>
</div>

<script src="js/ScrollTrigger.min.js"></script>
<script>
window.counter = function() {
	// this refers to the html element with the data-scroll-showCallback tag
	var span = this.querySelector('span');
	var current = parseInt(span.textContent);
	
	span.textContent = current + 1;
};

document.addEventListener('DOMContentLoaded', function(){
  ScrollTrigger.init();
});
</script>
</body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS高性能页面滚动触发元素代码 </title>
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link href="css/style.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">
<style>
body
{
	overflow: auto;
	width: 800vw;
}

div.block
{
	width: 70vw;
	float: left;
}

div.block svg
{
	position: absolute;
	bottom: 50%;
	width: 30px;
	right: 50px;
	
	animation: none;
	transform: rotate(270deg);
}
</style>

</head>
<body>
<div class="block">
	<h1 data-scroll="toggle(.scaleUpIn, .scaleUpOut) offset(-200px,0) addWidth" class="title">高性能页面滚动触发HTML元素动画JS插件<span></span></h1>
	<div class="htmleaf-demo center">
	  <a href="index.html">垂直布局</a>
	  <a href="index2.html" class="current">水平布局</a>
	</div>
	<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) offset(-200px,0) addWidth">Add scroll based animations to your site with ease.</h2>
	
	<svg viewBox="0 0 60 60">
		<path d="M52.254 18.327c0.816-0.804 2.127-0.804 2.937 0s0.813 2.103 0 2.907l-23.724 23.49c-0.81 0.804-2.121 0.804-2.937 0l-23.724-23.49c-0.81-0.804-0.81-2.103 0-2.907 0.813-0.804 2.127-0.804 2.937 0l22.257 21.423 22.254-21.423z"></path>
	</svg>
</div>
<div class="block">
	<h1 data-scroll="toggle(.fromTopIn, .fromTopOut) centerHorizontal">CSS Animations</h1>
	<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) centerHorizontal">All animations are triggered by classes, so you can take advantage of the power that CSS3 animations give you.</h2>
</div>
<div class="block">
	<h1 data-scroll="toggle(.fromLeftIn, .fromLeftOut) centerHorizontal">Vanilla JS</h1>
	<h2 data-scroll="toggle(.fromRightIn, .fromRightOut) centerHorizontal">It's written in vanilla javascript, so you can use it with any framework.</h2>
</div>
<div class="block">
	<h1 data-scroll="toggle(.scaleDownIn, .scaleDownOut) offset(-200px,0) addWidth">Request Animation Frame</h1>
	<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut) offset(-200px,0) addWidth">It uses the window.requestAnimationFrame method so it doesn't jack the users scroll. Animations are triggered when the browser is ready for it.</h2>
</div>
<div class="block">
	<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) offset(-200px,0) addWidth">Simple syntax</h1>
	<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) offset(-200px,0) addWidth">You define the options inside the HTML attribute, so after you have initialised the ScrollTrigger you don't have to touch JavaScript again.</h2>
</div>
<div class="block">
	<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) offset(-200px,0) addWidth">Custom<span></span>izable</h1>
	<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) offset(-200px,0) addWidth">ScrollTrigger offers a range of options, from calling custom JavaScript functions to defining custom offsets and classes.</h2>
	<h3 data-scroll="toggle(.fromRightIn, .fromRightOut) offset(-200px,0) addWidth" data-scroll-showCallback="counter">You scrolled past this block <span>0</span> times.</h3>
</div>
<div class="block">
	<h1 data-scroll="toggle(.fromRightIn, .fromRightOut) offset(-200px,0) addWidth once">Versatile</h1>
	<h2 data-scroll="toggle(.fromLeftIn, .fromLeftOut) offset(-200px,0) addWidth once">ScrollTrigger supports vertical and horizontal scrolling, check out the <a href="index.html">vertical demo</a>.</h2>
	<h3 data-scroll="toggle(.fromRightIn, .fromRightOut) offset(-200px,0) addWidth once">This block only animates once.</h3>
</div>

<script src="js/ScrollTrigger.min.js"></script>
<script>
window.counter = function() {
// this refers to the html element with the data-scrollCall tag
	var span = this.querySelector('span');
	var current = parseInt(span.textContent);
	
	span.textContent = current + 1;
};

document.addEventListener('DOMContentLoaded', function(){
  ScrollTrigger.init();
});
</script>
</body>
</html>

JS代码(ScrollTrigger.min.js):

/* Written by Erik Terwan - MIT license - https://github.com/terwanerik */
!function(){
	"use strict";
	var t=function(t){
	this.element=t,this.showCallback=null,this.hideCallback=null,this.visibleClass="visible",this.hiddenClass="invisible",this.addWidth=!1,this.addHeight=!1,this.once=!1;
	var e=0,n=0;
	this.left=function(t){
	return function(){
	return t.element.getBoundingClientRect().left}
}
(this),this.top=function(t){
	return function(){
	return t.element.getBoundingClientRect().top}
}
(this),this.xOffset=function(t){
	return function(n){
	var i=e;
	return t.addWidth&&!n?i+=t.width():n&&!t.addWidth&&(i-=t.width()),i}
}
(this),this.yOffset=function(t){
	return function(e){
	var i=n;
	return t.addHeight&&!e?i+=t.height():e&&!t.addHeight&&(i-=t.height()),i}
}
(this),this.width=function(t){
	return function(){
	return t.element.offsetWidth}
}
(this),this.height=function(t){
	return function(){
	return t.element.offsetHeight}
}
(this),this.addClass=function(t){
	var e=function(e,n){
	t.element.classList.contains(e)||(t.element.classList.add(e),"function"==typeof n&&n())}
,n=function(e,n){
	e=e.trim();
	var i=new RegExp("(?:^|\\s)"+e+"(?:(\\s\\w)|$)","ig"),l=t.element.className;
	i.test(l)||(t.element.className+=" "+e,"function"==typeof n&&n())}
;
	return t.element.classList?e:n}
(this),this.removeClass=function(t){
	var e=function(e,n){
	t.element.classList.contains(e)&&(t.element.classList.remove(e),"function"==typeof n&&n())}
,n=function(e,n){
	e=e.trim();
	var i=new RegExp("(?:^|\\s)"+e+"(?:(\\s\\w)|$)","ig"),l=t.element.className;
	i.test(l)&&(t.element.className=l.replace(i,"$1").trim(),"function"==typeof n&&n())}
;
	return t.element.classList?e:n}
(this),this.init=function(t){
	return function(){
	var i=t.element.getAttribute("data-scroll");
	t.showCallback=t.element.getAttribute("data-scroll-showCallback"),t.hideCallback=t.element.getAttribute("data-scroll-hideCallback");
	var l=i.split("toggle(");
	if(l.length>1){
	var s=l[1].split(")")[0].split(",");
	String.prototype.trim||(String.prototype.trim=function(){
	return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"")}
),t.visibleClass=s[0].trim().replace(".",""),t.hiddenClass=s[1].trim().replace(".","")}
var o=i.split("offset(");
	if(o.length>1){
	var r=o[1].split(")")[0].split(",");
	e=parseInt(r[0].replace("px","")),n=parseInt(r[1].replace("px",""))}
return t.addWidth=i.indexOf("addWidth")>-1,t.addHeight=i.indexOf("addHeight")>-1,t.once=i.indexOf("once")>-1,i.indexOf("centerHorizontal")>-1&&(e=t.element.offsetWidth/2),i.indexOf("centerVertical")>-1&&(n=t.element.offsetHeight/2),t}
}
(this)}
,e=function(){
	function e(){
	var t=a.scrollElement.innerWidth,c=a.scrollElement.innerHeight,d=a.bindElement.scrollTop?a.bindElement.scrollTop:document.documentElement.scrollTop,u=a.bindElement.scrollLeft?a.bindElement.scrollLeft:document.documentElement.scrollLeft;
	if(s.left!=u||s.top!=d){
	for(var f=0;
	f<i.length;
	f++){
	var h=i[f],m=h.left(),p=h.top();
	s.left>u?m-=h.xOffset(!0):s.left<u&&(m+=h.xOffset(!1)),s.top>d?p-=h.yOffset(!0):s.top<d&&(p+=h.yOffset(!1)),t>m&&m>=0&&c>p&&p>=0?(h.addClass(h.visibleClass,function(){
	h.showCallback&&n(h,h.showCallback)}
),h.removeClass(h.hiddenClass),h.once&&i.splice(f,1)):(h.addClass(h.hiddenClass),h.removeClass(h.visibleClass,function(){
	h.hideCallback&&n(h,h.hideCallback)}
))}
for(var g=0;
	g<l.length;
	g++){
	var v=l[g];
	v.call(a,u,d,t,c)}
s.left=u,s.top=d}
i.length>0||l.length>0?(r=!0,o(e)):r=!1}
function n(t,e){
	var n=e.split("("),i=n[0];
	n=n.length>1?n[1].split(")")[0]:void 0,window[i]&&window[i].call(t.element,n)}
this.scrollElement=window,this.bindElement=document.body;
	var i=[],l=[],s={
	left:-1,top:-1}
,o=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(t){
	setTimeout(t,1e3/60)}
,r=!0;
	this.init=function(n){
	return function(l,s){
	return void 0!=l&&null!=l?n.bindElement=l:n.bindElement=document.body,void 0!=s&&null!=s?n.scrollElement=s:n.scrollElement=window,i=[].slice.call(n.bindElement.querySelectorAll("[data-scroll]")),i=i.map(function(e){
	var n=new t(e);
	return n.init()}
),i.length>0?(r=!0,e()):r=!1,n}
}
(this),this.attach=function(t){
	return function(n){
	return l.push(n),r||(r=!0,e()),t}
}
(this),this.detach=function(t){
	return function(e){
	return l.splice(l.indexOf(e),1),t}
}
(this);
	var a=this}
;
	window.ScrollTrigger=new e}
();

CSS代码(demo.css):

/** * Animations */
.fromTopIn{transition:transform 1.0s ease,opacity 1.0s ease;transform:translate(0,0);opacity:1.0;}
.fromTopOut{transition:transform 1.0s ease,opacity 1.0s ease;transform:translate(0,-10px);opacity:0.0;}
.fromBottomIn{transition:transform 1.0s ease,opacity 1.0s ease;transform:translate(0,0);opacity:1.0;}
.fromBottomOut{transition:transform 1.0s ease,opacity 1.0s ease;transform:translate(0,10px);opacity:0.0;}
.fromLeftIn{transition:transform 1.0s ease,opacity 1.0s ease;transform:translate(0,0);opacity:1.0;}
.fromLeftOut{transition:transform 1.0s ease,opacity 1.0s ease;transform:translate(-10px,0);opacity:0.0;}
.fromRightIn{transition:transform 1.0s ease,opacity 1.0s ease;transform:translate(0,0);opacity:1.0;}
.fromRightOut{transition:transform 1.0s ease,opacity 1.0s ease;transform:translate(10px,0);opacity:0.0;}
.scaleUpIn{transition:transform 1.0s ease,opacity 1.0s ease;transform:scale(1.0,1.0);opacity:1.0;}
.scaleUpOut{transition:transform 1.0s ease,opacity 1.0s ease;transform:scale(1.3,1.3);opacity:0.0;}
.scaleDownIn{transition:transform 1.0s ease,opacity 1.0s ease;transform:scale(1.0,1.0);opacity:1.0;}
.scaleDownOut{transition:transform 1.0s ease,opacity 1.0s ease;transform:scale(0.7,0.7);opacity:0.0;}

CSS代码(htmleaf-demo.css):

@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.htmleaf-container{margin:0 auto;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;background:#66677c;}
.htmleaf-header h1{color:#D5D6E2;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.htmleaf-header h1 span{font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#fff;text-decoration:none;font-family:"Microsoft YaHei",Arial,sans-serif;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #fff;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:transparent;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:1024px){.htmleaf-header{padding:2em 10% 2em;}
.htmleaf-header h1{font-size:1.4em;}
.htmleaf-links{font-size:1.4em}
}
@media screen and (max-width:960px){.htmleaf-header{padding:2em 10% 2em;}
.htmleaf-header h1{font-size:1.2em;}
.htmleaf-links{font-size:1.2em}
.related h3{font-size:1em;}
.related a h3{font-size:0.8em;}
}
@media screen and (max-width:766px){.htmleaf-header h1{font-size:1.3em;}
.htmleaf-links{font-size:1.3em}
}
@media screen and (max-width:640px){.htmleaf-header{padding:2em 10% 2em;}
.htmleaf-header h1{font-size:1em;}
.htmleaf-links{font-size:1em}
.related h3{font-size:0.8em;}
.related a h3{font-size:0.6em;}
}

CSS代码(style.css):

/** * Basic layout,for animation examples,check demo.css */
html,body{margin:0;padding:0;}
body{background:#061c2d;color:#d7e7f3;font-family:'Work Sans',sans-serif;font-size:22px;line-height:33px;text-align:center;}
a{color:#d7e7f3;text-decoration:none;font-weight:500;transition:color 0.25s ease;}
a:hover{color:#fff;}
h1{font-size:4em;font-weight:200;letter-spacing:1px;text-transform:uppercase;line-height:normal;-webkit-font-smoothing:subpixel-antialiased;}
h1.title{font-size:2em;font-weight:600;font-family:"Microsoft YaHei",Arial,sans-serif;}
h2{font-weight:300;font-size:1.3em;line-height:1.5em;color:#779dba;-webkit-font-smoothing:subpixel-antialiased;}
h3{font-weight:500;font-size:1em;line-height:1.5em;color:#d7e7f3;margin:80px 0 0 0;-webkit-font-smoothing:subpixel-antialiased;}
div.block{position:relative;height:80vh;padding:20vh 15vw 0 15vw;}
div.block svg{position:absolute;bottom:50px;width:30px;animation:chevronAnimation 4s ease-in-out 0s infinite;}
div.block svg path{fill:#7e9aae;}
div.block:nth-child(1n){background:#061c2d;}
div.block:nth-child(2n){background:hsl(205,84%,14%);}
div.block:nth-child(3n){background:hsl(205,90%,22%);}
/** * Simple keyframes animation for the chevron on the first slide */
@keyframes chevronAnimation{0%{transform:translate(0,0) scale(1.0,1.0);}
50%{transform:translate(0,5px) scale(0.8,0.8);}
100%{transform:translate(0,0) scale(1.0,1.0);}
}
/** * Responsiveness */
@media screen and (max-width:1024px){body{font-size:18px;line-height:27px;}
}
@media screen and (max-width:800px){h1 span{display:block;}
div.block{height:85vh;padding:15vh 15vw 0 15vw;}
}
@media screen and (max-width:420px){body{font-size:12px;line-height:18px;}
}
@media screen and (max-width:360px){h1{font-size:3em;}
}

附件:下载该文件资源,减少时间成本(增值服务)