以下是 CSS3可自动输入登录表单动画js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3可自动输入登录表单动画</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div id="window" style="display:none;">
<div class="page page-front">
<div class="page-content">
<div class="input-row">
<label class="label fadeIn">Username</label>
<input id="username" type="text" data-fyll="pineapple" class="input fadeIn delay1"/>
</div>
<div class="input-row">
<label class="label fadeIn delay2">Password</label>
<input id="password" type="password" data-fyll="hackmeplease" class="input fadeIn delay3"/>
</div>
<div class="input-row perspective">
<button id="submit" class="button load-btn fadeIn delay4"><span class="default"><i class="ion-arrow-right-b"></i>Login</span>
<div class="load-state">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</button>
</div>
</div>
</div>
<div class="page page-back">
<div class="page-content"><img src="avatar.jpg" class="avatar"/>
<p class="welcome">Welcome back, Dog!</p>
<div class="perspective">
<button class="button inline trigger-anim-replay"><i class="ion-refresh"></i>Replay animation</button>
</div>
</div>
</div>
</div>
<div class="browser-warning hidden">Glitchy or weird animation? Let it play through once, then press Replay.</div>
<script src='js/jquery.js'></script>
<script src='js/fyll.js'></script>
<script src="js/index.js"></script>
</body>
</html>
JS代码(fyll.js):
/** * Fyll.js * Distributed under MIT license. * Source:https://github.com/nicklassandell/Fyll.js*/
;
(function(){
"use strict";
window.fyll ={
// Default configurationconfig:{
actionDelay:500,keyPressInterval:100,humanisePressInterval:true,focusClass:'fyll-focus',complete:false}
,// Initializergo:function(query,config){
// Make sure it's not already runningif(this.isRunning){
console.warn('Fyll:Only one instance of Fyll can be run at once.');
return false;
}
// Merge supplied config with defaultif(typeof config === 'object'){
this.config = this.helpers.mergeObjects(this.config,config);
}
// If function was passed,set it as callback functionelse if(typeof config === 'function'){
this.config.complete = config;
}
this.isRunning = true;
this.queue = this.parseQuery(query);
this.readQueue();
}
,// Looper;
initiates every action and calls the next one// after. Also responsible for pausing inbetween.readQueue:function(){
var fyll = window.fyll;
// Is queue empty? If so,run "complete" callback.if(!fyll.queue.length){
if(typeof fyll.config.complete === 'function'){
fyll.config.complete();
}
fyll.isRunning = false;
return false;
}
var next = fyll.queue.pop(),instr = fyll.parseInstruction(next),action = fyll.actions[instr.action];
// Does the action exist?if(typeof action === 'object'){
action.execute(instr.value,function(){
// As long as there are any instructions left,continueif(fyll.queue.length > 0){
// Default pause is 0msvar pauseAfter = 0;
if(action.pauseAfter){
pauseAfter = fyll.config.actionDelay;
}
setTimeout(fyll.readQueue,pauseAfter);
// This was the last one,no need to pause}
else{
fyll.readQueue();
}
}
);
// Action didn't exist,let's continue but throw an error}
else{
console.error('Fyll:The specified action `'+ instr.action +'` does not exist.');
fyll.readQueue();
}
}
,// Parses full query into small instructionsparseQuery:function(instr){
var then = instr.split('then');
for(var i=0;
i < then.length;
++i){
then[i] = this.helpers.betterTrim(then[i]);
}
return then.reverse();
}
,// Parses single instruction into action/value pairsparseInstruction:function(query){
var kv = query.split(' '),res ={
}
;
res.action = kv[0];
res.value = kv[1];
return res;
}
,// Get press interval// Dependent on config.humanisePressIntervalgetPressInterval:function(){
var interval = this.config.humanisePressInterval ? this.config.keyPressInterval + ((Math.random()*1.5-.5)*100):this.config.keyPressInterval;
return interval;
}
,// Various helpershelpers:{
betterTrim:function(text){
return text.replace(/\s+(?=\s)/g,'').trim();
}
,mergeObjects:function (originalObject,objectToAppend){
for (var item in objectToAppend){
if (objectToAppend.hasOwnProperty(item)){
originalObject[item] = objectToAppend[item];
}
}
return originalObject;
}
}
,// Action helpersactionHelpers:{
setFocus:function(target,callback){
var fyll = window.fyll;
// Add focus classtarget.className += ' ' + fyll.config.focusClass;
// Wait a keystroke after focusif(typeof callback === 'function'){
setTimeout(callback,fyll.getPressInterval());
}
}
,removeFocus:function(target,callback){
var fyll = window.fyll;
setTimeout(function(){
target.className = target.className.replace(fyll.config.focusClass,'');
if(typeof callback === 'function'){
callback();
}
}
,fyll.getPressInterval());
}
}
,// All available actions are in here. This object can be extended.actions:{
// Fill a text fieldfill:{
pauseAfter:true,execute:function(value,callback){
var fyll = window.fyll,target = document.getElementById(value);
if(!target){
console.warn('Fyll:The specified target `'+ value +'` does was not found.');
callback();
return false;
}
// Reset target valuetarget.value = '';
var fillValue = target.getAttribute('data-fyll');
// Check if there is a value to fill withif(fillValue){
var letters = fillValue.split('').reverse();
// Wait a keystroke after focusfyll.actionHelpers.setFocus(target,function(){
// Function to run for each keypressvar pressFunc = function(){
target.value += letters.pop();
// Last letter,let's run the callbackif(letters.length < 1){
fyll.actionHelpers.removeFocus(target);
callback();
// Not last letter,let's self invoke}
else{
setTimeout(pressFunc,fyll.getPressInterval());
}
}
// Call press once. It will self invoke after.pressFunc();
}
);
// No fill value was attached to element}
else{
console.warn('Fyll:No fill value was attached to element #' + value);
callback();
}
}
}
,// Click a buttonclick:{
pauseAfter:true,execute:function(value,callback){
var fyll = window.fyll,target = document.getElementById(value);
if(!target){
console.warn('Fyll:The specified target `'+ value +'` does was not found.');
callback();
return false;
}
fyll.actionHelpers.setFocus(target,function(){
fyll.actionHelpers.removeFocus(target,function(){
callback();
}
);
}
);
}
}
,// Toggle checkbox/radiotoggle:{
pauseAfter:true,execute:function(value,callback){
var fyll = window.fyll,target = document.getElementById(value);
if(!target){
console.warn('Fyll:The specified target `'+ value +'` does was not found.');
callback();
return false;
}
if(typeof target.checked === 'boolean'){
target.checked = !target.checked;
}
callback();
}
}
,// Pause for specified time before continuingpause:{
pauseAfter:false,execute:function(value,callback){
setTimeout(callback,value);
}
}
}
}
;
}
)();
JS代码(index.js):
jQuery(document).ready(function($){
// If firefoxif(navigator.userAgent.toLowerCase().match(/firefox/)){
$('.browser-warning').removeClass('hidden');
setTimeout(function(){
$('.browser-warning').addClass('hidden');
}
,6*1000);
}
// Display window (and start animation) when document is ready// This mininizes the risk of firefox messing up$('#window').attr('style','');
initAnimation();
$(document).on('click','.trigger-anim-replay',resetAnimation);
function initAnimation(){
setTimeout(function(){
fyll.go('fill username then fill password then click submit',function(){
$('#submit').addClass('loading');
setTimeout(function(){
$('#submit').addClass('done').closest('#window').addClass('flip');
}
,1500);
}
);
}
,3*1000);
}
function resetAnimation(){
var win = $('#window');
win.stop().fadeOut(500,function(){
// Reset thingswin.attr('style','');
win.find('input[type=text],input[type=password]').val('');
win.find('.load-btn.loading').removeClass('loading done');
// Clone and re-create window element to trigger animation restartwin.removeClass('flip');
win.before(win.clone(true)).remove();
// Restart animationinitAnimation();
}
);
}
}
);
CSS代码(reset.css):
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
CSS代码(style.css):
html,body{height:100%;}
body{background-image:-moz-radial-gradient(ellipse closest-side,#ffffff,#d4e2af);background-image:-webkit-radial-gradient(ellipse closest-side,#ffffff,#d4e2af);background-image:radial-gradient(ellipse closest-side,#ffffff,#d4e2af);-moz-perspective:1000px;-webkit-perspective:1000px;perspective:1000px;font-family:'Open Sans';font-weight:300;}
*,*::after,*::before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#window{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;height:350px;width:450px;color:#FFF;-webkit-animation:1.5s window ease-in-out backwards;-moz-animation:1.5s window ease-in-out backwards;animation:1.5s window ease-in-out backwards;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-moz-transition-property:height,width;-o-transition-property:height,width;-webkit-transition-property:height,width;transition-property:height width;}
#window,#window .page,#window .page-content{-moz-transition-duration:1s;-o-transition-duration:1s;-webkit-transition-duration:1s;transition-duration:1s;}
#window.flip{height:460px;width:350px;}
#window.flip .page-front{-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg);}
#window.flip .page-back{-moz-transform:rotateX(360deg);-ms-transform:rotateX(360deg);-webkit-transform:rotateX(360deg);transform:rotateX(360deg);}
#window.flip .page-back .page-content{opacity:1;}
#window.flip .page-back .avatar,#window.flip .page-back .welcome,#window.flip .page-back .perspective{opacity:1;-moz-transform:none;-ms-transform:none;-webkit-transform:none;transform:none;-moz-transition-duration:0.6s;-o-transition-duration:0.6s;-webkit-transition-duration:0.6s;transition-duration:0.6s;}
#window.flip .page-back .avatar{-moz-transition-delay:0.8s;-o-transition-delay:0.8s;-webkit-transition-delay:0.8s;transition-delay:0.8s;}
#window.flip .page-back .welcome{-moz-transition-delay:0.8s;-o-transition-delay:0.8s;-webkit-transition-delay:0.8s;transition-delay:0.8s;}
#window.flip .page-back .perspective{-moz-transition-delay:0.9s;-o-transition-delay:0.9s;-webkit-transition-delay:0.9s;transition-delay:0.9s;}
#window .page{position:absolute;top:20px;left:0;right:0;bottom:0;overflow:hidden;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-transform:translateZ(0);-ms-transform:translateZ(0);-webkit-transform:translateZ(0);transform:translateZ(0);background:#444;background-image:-moz-linear-gradient(bottom,#444444,#333333);background-image:-webkit-linear-gradient(bottom,#444444,#333333);background-image:linear-gradient(to top,#444444,#333333);-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;padding:60px;}
#window .page-back{text-align:center;-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg);}
#window .page-back .page-content{opacity:0;}
#window .page-back .avatar{height:150px;width:150px;border:5px solid #FFF;margin:30px auto 40px auto;display:block;opacity:0;-moz-transform:scale(0.1);-ms-transform:scale(0.1);-webkit-transform:scale(0.1);transform:scale(0.1);-moz-border-radius:1000px;-webkit-border-radius:1000px;border-radius:1000px;}
#window .page-back .welcome{font-size:22px;margin-bottom:40px;}
#window .page-back .welcome,#window .page-back .perspective{opacity:0;-moz-transform:translateY(-30px);-ms-transform:translateY(-30px);-webkit-transform:translateY(-30px);transform:translateY(-30px);}
#window .input-row{margin:0 0 30px;}
#window .input-row:last-of-type{margin-bottom:0;}
#window .perspective{-moz-perspective:1000px;-webkit-perspective:1000px;perspective:1000px;}
#window .label{font-family:sans-serif;text-transform:uppercase;font-size:12px;margin:0 0 10px 0;color:#FFF;display:block;cursor:pointer;}
#window .input{padding:0 15px;height:40px;line-height:40px;outline:none;border:0;background:#FFF;display:block;width:100%;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s;}
#window .input:focus,#window .input.fyll-focus{-moz-box-shadow:0 0 0 3px #d85c89;-webkit-box-shadow:0 0 0 3px #d85c89;box-shadow:0 0 0 3px #d85c89;}
#window .button{height:50px;line-height:50px;padding:0 20px;margin:0;text-align:center;color:#FFF;border:0;display:block;width:100%;outline:none;cursor:pointer;overflow:hidden;font-size:17px;background:#D85C89;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-image:-moz-linear-gradient(bottom,#d85c89,#e7779f);background-image:-webkit-linear-gradient(bottom,#d85c89,#e7779f);background-image:linear-gradient(to top,#d85c89,#e7779f);-moz-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.4),0 0 4px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.4),0 0 4px rgba(0,0,0,0.5);box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.4),0 0 4px rgba(0,0,0,0.5);-moz-transition-duration:0.1s;-o-transition-duration:0.1s;-webkit-transition-duration:0.1s;transition-duration:0.1s;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-moz-transform-origin:bottom 50%;-ms-transform-origin:bottom 50%;-webkit-transform-origin:bottom 50%;transform-origin:bottom 50%;-moz-transform:translateZ(0);-ms-transform:translateZ(0);-webkit-transform:translateZ(0);transform:translateZ(0);-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
#window .button i{margin-right:10px;}
#window .button:active,#window .button.fyll-focus{background:#D85C89;background-image:-moz-linear-gradient(bottom,#d85c89,#d85c89);background-image:-webkit-linear-gradient(bottom,#d85c89,#d85c89);background-image:linear-gradient(to top,#d85c89,#d85c89);-moz-transform:rotateX(20deg);-ms-transform:rotateX(20deg);-webkit-transform:rotateX(20deg);transform:rotateX(20deg);}
#window .button.inline{width:auto;display:inline-block;}
#window .button.load-btn .default,#window .button.load-btn .load-state{-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s;}
#window .button.load-btn .load-state{position:absolute;top:-50px;left:0;right:0;height:100%;text-align:center;line-height:50px;pointer-events:none;}
#window .button.load-btn .load-state .ball{height:10px;width:10px;margin-right:10px;background:#FFF;display:inline-block;-moz-border-radius:1000px;-webkit-border-radius:1000px;border-radius:1000px;-webkit-animation:ballBounce 0.3s alternate infinite;-moz-animation:ballBounce 0.3s alternate infinite;animation:ballBounce 0.3s alternate infinite;-webkit-animation-timing-function:cubic-bezier(0.2,0.4,0.3,1);-moz-animation-timing-function:cubic-bezier(0.2,0.4,0.3,1);animation-timing-function:cubic-bezier(0.2,0.4,0.3,1);-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-webkit-transition-duration:0.3s;transition-duration:0.3s;}
#window .button.load-btn .load-state .ball:nth-child(2n){-webkit-animation-delay:0.05s;-moz-animation-delay:0.05s;animation-delay:0.05s;}
#window .button.load-btn .load-state .ball:nth-child(3n){-webkit-animation-delay:0.1s;-moz-animation-delay:0.1s;animation-delay:0.1s;}
#window .button.load-btn .load-state .ball:last-child{margin-right:0;}
#window .button.load-btn.done .ball{opacity:0;}
#window .button.load-btn.loading .default{-moz-transform:translateY(50px);-ms-transform:translateY(50px);-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0;}
#window .button.load-btn.loading .load-state{-moz-transform:translateY(50px);-ms-transform:translateY(50px);-webkit-transform:translateY(50px);transform:translateY(50px);}
.browser-warning{background:rgba(0,0,0,0.7);padding:15px 0;color:#FFF;position:absolute;top:50px;left:0;right:0;margin:auto;width:530px;text-align:center;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;-webkit-transition-duration:0.5s;transition-duration:0.5s;-moz-transition-timing-function:cubic-bezier(0.015,0.695,0.34,1.365);-o-transition-timing-function:cubic-bezier(0.015,0.695,0.34,1.365);-webkit-transition-timing-function:cubic-bezier(0.015,0.695,0.34,1.365);transition-timing-function:cubic-bezier(0.015,0.695,0.34,1.365);}
.browser-warning.hidden{opacity:0;-moz-transform:scale(0.2);-ms-transform:scale(0.2);-webkit-transform:scale(0.2);transform:scale(0.2);}
.fadeIn{-webkit-animation:1s fadeIn cubic-bezier(0.015,0.695,0.34,1.365) backwards;-moz-animation:1s fadeIn cubic-bezier(0.015,0.695,0.34,1.365) backwards;animation:1s fadeIn cubic-bezier(0.015,0.695,0.34,1.365) backwards;-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s;}
.delay1{-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;animation-delay:1.6s;}
.delay2{-webkit-animation-delay:1.7s;-moz-animation-delay:1.7s;animation-delay:1.7s;}
.delay3{-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s;}
.delay4{-webkit-animation-delay:1.9s;-moz-animation-delay:1.9s;animation-delay:1.9s;}
@-webkit-keyframes window{0%{-moz-transform:scale(0) rotateX(360deg);-ms-transform:scale(0) rotateX(360deg);-webkit-transform:scale(0) rotateX(360deg);transform:scale(0) rotateX(360deg);height:150px;width:150px;}
50%{-moz-transform:none;-ms-transform:none;-webkit-transform:none;transform:none;height:150px;}
75%{height:350px;width:150px;}
100%{width:450px;}
}
@-moz-keyframes window{0%{-moz-transform:scale(0) rotateX(360deg);-ms-transform:scale(0) rotateX(360deg);-webkit-transform:scale(0) rotateX(360deg);transform:scale(0) rotateX(360deg);height:150px;width:150px;}
50%{-moz-transform:none;-ms-transform:none;-webkit-transform:none;transform:none;height:150px;}
75%{height:350px;width:150px;}
100%{width:450px;}
}
@keyframes window{0%{-moz-transform:scale(0) rotateX(360deg);-ms-transform:scale(0) rotateX(360deg);-webkit-transform:scale(0) rotateX(360deg);transform:scale(0) rotateX(360deg);height:150px;width:150px;}
50%{-moz-transform:none;-ms-transform:none;-webkit-transform:none;transform:none;height:150px;}
75%{height:350px;width:150px;}
100%{width:450px;}
}
@-webkit-keyframes fadeIn{0%{opacity:0;-moz-transform:translateY(30px);-ms-transform:translateY(30px);-webkit-transform:translateY(30px);transform:translateY(30px);}
100%{opacity:1;-moz-transform:none;-ms-transform:none;-webkit-transform:none;transform:none;}
}
@-moz-keyframes fadeIn{0%{opacity:0;-moz-transform:translateY(30px);-ms-transform:translateY(30px);-webkit-transform:translateY(30px);transform:translateY(30px);}
100%{opacity:1;-moz-transform:none;-ms-transform:none;-webkit-transform:none;transform:none;}
}
@keyframes fadeIn{0%{opacity:0;-moz-transform:translateY(30px);-ms-transform:translateY(30px);-webkit-transform:translateY(30px);transform:translateY(30px);}
100%{opacity:1;-moz-transform:none;-ms-transform:none;-webkit-transform:none;transform:none;}
}
@-webkit-keyframes ballBounce{0%{-moz-transform:translateY(25%);-ms-transform:translateY(25%);-webkit-transform:translateY(25%);transform:translateY(25%);}
100%{-moz-transform:translateY(-75%);-ms-transform:translateY(-75%);-webkit-transform:translateY(-75%);transform:translateY(-75%);}
}
@-moz-keyframes ballBounce{0%{-moz-transform:translateY(25%);-ms-transform:translateY(25%);-webkit-transform:translateY(25%);transform:translateY(25%);}
100%{-moz-transform:translateY(-75%);-ms-transform:translateY(-75%);-webkit-transform:translateY(-75%);transform:translateY(-75%);}
}
@keyframes ballBounce{0%{-moz-transform:translateY(25%);-ms-transform:translateY(25%);-webkit-transform:translateY(25%);transform:translateY(25%);}
100%{-moz-transform:translateY(-75%);-ms-transform:translateY(-75%);-webkit-transform:translateY(-75%);transform:translateY(-75%);}
}
分享到QQ
分享到微博
微信扫一扫
