js实现checkbox组成的点击波纹动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现checkbox组成的点击波纹动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { font-family: Helvetica, sans-serif; } .wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; zoom: 1.4; } input { position: absolute; will-change: transform; } input.grow { -webkit-animation: grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-animation: grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @-webkit-keyframes grow { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(2.5); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes grow { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(2.5); } 100% { -moz-transform: scale(1); } } @keyframes grow { 0% { transform: scale(1); } 30% { transform: scale(2.5); } 100% { transform: scale(1); } } </style> </head> <body> <script> var RES_X = 20; var RES_Y = 20; var SIZE = 22; // super laggy on mobile devices so ease up the res if( /iphone|ipad|android/ig.test( navigator.userAgent ) ) { RES_X = 16; RES_Y = 16; SIZE = 25; } var entities = []; var wrapper = document.createElement( 'div' ); wrapper.className = 'wrapper'; wrapper.style.width = ( RES_X * SIZE ) + 'px'; wrapper.style.height = ( RES_Y * SIZE ) + 'px'; document.body.appendChild( wrapper ); for( var x = 0; x < RES_X; x++ ) { for( var y = 0; y < RES_Y; y++ ) { var el = document.createElement( 'input' ); el.setAttribute( 'type', &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0