运用HTLM技术设计水波纹动画效果

normalize.css

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{ display:block; } audio,canvas,video{ display:inline-block; } audio:not([controls]){ display:none; height:0; } [hidden]{ display:none; } html{ font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; } body{ margin:0; } a:focus{ outline:thin dotted; } a:active,a:hover{ outline:0; } h1{ font-size:2em; margin:0.67em 0; } abbr[title]{ border-bottom:1px dotted; } b,strong{ font-weight:bold; } dfn{ font-style:italic; } hr{ -moz-box-sizing:content-box; box-sizing:content-box; height:0; } mark{ background:#ff0; color:#000; } code,kbd,pre,samp{ font-family:monospace,serif; font-size:1em; } pre{ white-space:pre-wrap; } q{ quotes:"\201C" "\201D" "\2018" "\2019"; } small{ font-size:80%; } sub,sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup{ top:-0.5em; } sub{ bottom:-0.25em; } img{ border:0; } svg:not(:root){ overflow:hidden; } figure{ margin:0; } fieldset{ border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em; } legend{ border:0; padding:0; } button,input,select,textarea{ font-family:inherit; font-size:100%; margin:0; } button,input{ line-height:normal; } button,select{ text-transform:none; } button,html input[type="button"],input[type="reset"],input[type="submit"]{ -webkit-appearance:button; cursor:pointer; } button[disabled],html input[disabled]{ cursor:default; } input[type="checkbox"],input[type="radio"]{ box-sizing:border-box; padding:0; } input[type="search"]{ -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; } input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; } button::-moz-focus-inner,input::-moz-focus-inner{ border:0; padding:0; } textarea{ overflow:auto; vertical-align:top; } table{ border-collapse:collapse; border-spacing:0; }

zzsc.css

body, html { font-size: 100%; padding: 0; margin: 0; }

/* Reset */

*,

*:after,

*:before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

/* 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;

}

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; }

网站代码

HTML5 Canvas逼真水波纹动画特效

html, body, div, span, applet, object, iframe,

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

a, abbr, acronym, address, big, cite, code,

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

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

/*background: transparent; */

box-sizing: border-box;

}

body {

overflow: hidden;

}

.container{

width: 480px;

height: 480px;

margin:20px auto;

position: relative;

}

.clear {

clear: both;

height: 0;

font-size: 0;

line-height: 0;

}

$( document ).ready( function() {

//------------------------------------------------------------------------

$( '#preloaderDiv' ).delay( 1000 ).fadeTo( 1000 , 0, function() {

$( this ).css( 'display', 'none' );

} );

$( '#startDiv' ).css( 'cursor', 'pointer' ).click( function() {

//$( this ).css( 'display', 'none' );

$( this ).delay( 10 ).fadeTo( 1000 , 0, function() {

$( this ).css( 'display', 'none' );

} );

init();

} );

//------------------------------------------------------------------------

function init() {

//Settings - params for WaterRippleEffect

var settings = {

image: './img/SwimmingPool.jpg',//image path

rippleRadius: 3,//radius of the ripple

width: 480,//width

height: 480,//height

delay: 1,//if auto param === true. 1 === 1 second delay for animation

auto: true//if auto param === true, animation starts on it´s own

} ;

//------------------------------------------------------------------------

//standalone

//init

var waterRippleEffect = new WaterRippleEffect( document.getElementById( 'holder' ), settings );

document.getElementById( 'holder' ).style.cursor = 'pointer';

//on click

document.getElementById( 'holder' ).addEventListener( 'click', function( e ) {

var mouseX = e.layerX;

var mouseY = e.layerY;

waterRippleEffect.disturb( mouseX, mouseY );

} );

//on mousemove

document.getElementById( 'holder' ).addEventListener( 'mousemove', function( e ) {

var mouseX = e.layerX;

var mouseY = e.layerY;

waterRippleEffect.disturb( mouseX, mouseY );

} );

//------------------------------------------------------------------------

//jQuery

//init

/*

$( '#holder' ).waterRippleEffect( settings );

$( '#holder' ).css( 'cursor', 'pointer' );

*/

//on click

/*

$( '#holder' ).click( function( e ) {

var mouseX = e.pageX - $( this ).offset().left;

var mouseY = e.pageY - $( this ).offset().top;

$( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );

} );

*/

//on mousemove

/*

$( '#holder' ).mousemove( function( e ) {

var mouseX = e.pageX - $( this ).offset().left;

var mouseY = e.pageY - $( this ).offset().top;

$( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );

} );

*/

} ;

//------------------------------------------------------------------------

} );

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！