normalize.css

文章，侧边，细节，图表标题，图形，页脚，页眉，组，主要，导航，部分，摘要{显示：block}音频、画布、视频{ display : inline-block；} audio : not([controls]){ display : none；高度：0}[隐藏]{ display : none；} html { font-family : sans-serif；-ms-text-size-adjust :；-web kit-text-size-调整：；}车身{ margin :0 } a : focus { outline : thin }虚线；}a:active，a : hover { outline :0 } h1 { font-size :2 em；边距：0.67 em 0；}缩写[标题]{border-bottom:1px虚线；}b、strong { font-weight : bold；} dfn { font-style : italic；} HR {-moz-box-size :内容盒；盒子大小：内容盒；高度：0}标记{ background : # ff 0 color : # 000 } code，kbd，pre，samp{font-family:monospace，serifont-size :1 em；} pre { white-space : pre wrap} q { quote : ' \ 201 C ' ' \ 201D ' ' \ 2018 ' ' \ 2019 '；}小{ font-size :80%；}sub，sup { font-size :75%；线高：0;位置：相对；垂直对齐：基线；} sup { top :-0.5 em；} sub { bottom :-0.25 em；} img { border :0 } SVG : not(: root){ overflow : hidden；}图{ margin:0}字段集{ border :1 px solid # c0c 0 c 0margin:0 2px划水划水：0.35em 0.625em 0.75em}图例{ border:0padding:0 }按钮，输入，选择，文本区域{ font-family : inheritfont-size :；margin:0}按钮，输入{行高： normal}按钮，选择{ text-transform : none；}按钮，html输入[type='button']，input[type='reset']，input[type=' submit ']{-web kit-appearance : button；光标：指针指针；}按钮[禁用]，html输入[禁用]{光标：默认；}input[type='checkbox']，input[type=' radio ']{ box-size : border-box；padd :0 } input[type=' search ']{-web kit-appearance : textfield；-moz-box-size :内容盒；-web kit-box-size :内容盒；盒子大小：内容盒；}输入[type=' search ']:-web kit-search-cancel-button，输入[type=' search ']:-web kit-search-decoration {-web kit-appearance : none；}按钮：-moz-focus-inner，输入：-moz-focus-inner { border :0；padd :0 } textarea { overflow : auto垂直对齐：顶；}表格{边框-折叠：折叠；边框间距：0;}

zzsc.css

正文，html { font-size : ；padd : 0；边距：0；}

/*重置*/

*,

* :之后，

*:before {

-web kit-box-size : border-box；

-moz-box-size :边框-box；

框尺寸：边框；

}

/*尼古拉斯加拉格尔的清除浮动黑客攻击： http://nicolasgallagher.com/micro-clearfix-hack/*/。clearfix:before以前，clearfix:after {

内容： " "；

显示器：表格；

}。clearfix:after {

clear:两者；

}

body{

背景： # 494A5F

color: # D5D6E2

font-weight : 500；

font-size : 1.05 em

字体系列： '微软雅黑'，'世嘉用户界面'，'露西达格兰德'，Helvetica，阿里亚，无衬线；

}

a{ color: rgba(255，255，255，0.6)；outline:无；text-decoration : none-web kit-transit : 0.2s；transition: 0.2s }

a:hover，a : focus { color : # 74777 b；text-decoration : none}

网站代码

！声明文档类型

超文本标记语言

头

meta charset='UTF-8 '

meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 '

元名称='视口'内容='宽度=设备宽度，初始比例=1.0 '

标题HTML5画布逼真水波纹动画/title

链接rel='样式表type=' text/CSS ' href=' CSS/normalize。CSS '/

链接rel='样式表type=' text/CSS ' href=' CSS/zzsc。' CSS '

脚本src='js/jquery-1.11.0.min.js '类型=' text/JavaScript '/脚本

脚本类型=' text/JavaScript ' src=' js/jquery。waterrippleeffect。量滴js '/脚本

style type='text/css '

html、body、div、span、applet、object、iframe、

h1，h2，h3，h4，h5，h6，p，blockquote，pre，

缩写，缩写，地址，大，引用，代码，

del，dfn，em，font，img，ins，kbd，q，s，samp，

小，强，次，超，tt，var，

你，我，中心，

dl、dt、dd、ol、ul、li、

字段集、表单、标签、图例、

表，标题，tbody，tfoot，thead，tr，th，td {

边距：0；

padd : 0；

边框： 0；

outline : 0；

font-size : ；

垂直线： 基线；

/*background:透明；*/

框尺寸：边框；

}

body {

隐藏飞越：

}。容器{

宽度： 480 px

高度： 480px

margin:20px auto

相对位置：

}。clear {

clear:两者；

高度：0；

font-size : 0；

线高： 0;

}

/style

脚本

$(文档)。ready(function() {

//-

$('#preloaderDiv ').延迟(1000)。fadeTo(1000，0，function() {

$(这个)。css('display '，' none ')；

} );

$('#startDiv ').css(')光标','指针')。click(function() {

//$(这个)。css('display '，' none ')；

$(这个)。延迟(10)。fadeTo(1000，0，function() {

$(这个)。css('display '，' none ')；

} );

init()；

} );

//-

函数init() {

//设置WaterRippleEffect的参数

定义变量设置={

图像： ' ./img/SwamingPool。jpg '，//图像路径

rippleRadius: 3，//波纹半径

宽度： 480,//宽度

高度： 480,//高度

delay: 1，//如果auto param===true .1===动画延迟一秒

auto : true//如果auto param===true，动画将自动开始

};

//-

//独立

//初始化

var water ripple effect=new water ripple effect(文档。getelementbyid(' holder ')，设置)；

文件。getelementbyid(' holder ')。风格。光标='指针'；

//点击

文件。getelementbyid(' holder ').添加事件侦听器('点击'，函数(e ) {

var mouseX=e.layerX

var mouseY=e.layerY

waterRippleEffect。扰动(mouseX，mouseY)；

} );

//鼠标移动时

文件。getelementbyid(' holder ').addEventListener('mousemove '，函数(e ) {

var mouseX=e.layerX

var mouseY=e.layerY

waterRippleEffect。扰动(mouseX，mouseY)；

} );

//-

//jQuery

//初始化

/*

$('#holder ').waterRippleEffect(设置);

$('#holder ').css(')光标','指针');

*/

//点击

/*

$('#holder ').点击（功能(e ) {

var mouseX=e.pageX - $(this).偏移量()。向左；

var mouseY=e.pageY - $(this).偏移量()。顶端

$('#holder ').waterRippleEffect('打扰，mouseX，mouseY)；

} );

*/

//鼠标移动时

/*

$('#holder ').mousemove(函数(e ) {

var mouseX=e.pageX - $(this).偏移量()。向左；

var mouseY=e.pageY - $(this).偏移量()。顶端

$('#holder ').waterRippleEffect('打扰，mouseX，mouseY)；

} );

*/

};

//-

} );

/script

/head

body script src='/demos/googlegg。js '/脚本

差异

div id=' holder ' style=' width :480 px；高度：480 pxp位置：'/div

div id=' StartDiv ' style=' background-color : # 000；位置：值；宽度宽度：480像素'高度：480像素'

img src=' img/startbt。jpg ' width=' 480 px ' height=' 480 px ' alt=' Start ' style=' position : absolute；前：50%；左侧：50%;页边距-顶部：-240像素；边距-左：-240像素

/div

div id=' PreLoaderDiv ' style=' background-color : # 000；位置：值；宽度宽度：480像素重量：480像素指针-事件' :none '

img src=' img/preloadermark。gif ' width=' 44px ' height=' 48px ' alt=' Preloader ' style=' position : absolute；前：50%；左侧：50%;margin-top :-22px；"左边距-:-24px；"

/div

/div

div style=' text-align : center；边距：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；'

p适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。不支持IE8及以下浏览器/p。

p来源：a href=' http://www .AAA-CG。com。cn/薛/？lcc' target='_blank '素材/a/p

/div

/body

/html