* * * Magic! * * *

Developer
Brandon Kennedy
Size
9,415 Kb
Views
16,192
  1. * * * Magic! * * * Previews
  2. * * * Magic! * * * HTML Codes
  3. * * * Magic! * * * CSS Codes
  4. * * * Magic! * * * JS Codes

How do I make an * * * magic! * * *?

Cast spells like a wizard from the world of Harry Potter.This is some stuff I made for a presentation my wife is giving at NCDevCon on jQuery widgets. She needed "something that wasn't boring.". What is a * * * magic! * * *? How do you make a * * * magic! * * *? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.

* * * Magic! * * * Previews
IQ Test

* * * Magic! * * * - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>* * * Magic! * * *</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h2>Select a spell hold the mouse down near the wand to charge it up.</h2> <label><input type="radio" name="spell" value="expeliarmus" checked>expeliarmus</label> <label><input type="radio" name="spell" value="stupify">stupify</label> <label><input type="radio" name="spell" value="levicorpus">levicorpus</label> <label><input type="radio" name="spell" value="avada">avada kedavra</label> <button id="reset" type="button">reset</button>
</header>
<div class="arena"> <div class="my-wand"></div> <div class="spell"></div> <div class="opponent"> <figure> <div class="body"> <div class="head"></div> <div class="arms"> <div class="arm left"> <div class="wand"></div> </div> <div class="arm right"></div> </div> <div class="legs"> <div class="leg left"></div> <div class="leg right"></div> </div> </div> </figure> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

* * * Magic! * * * - Script Codes CSS Codes

/* start pen display only */
header { text-align: center;
}
label { margin-right: .5em;
}
input { margin: 0 .2em;
}
/* end pen display only */
.arena { height: 340px; position: relative;
}
.my-wand { background: brown; height: 50px; left: 10%; position: absolute; top: 160px; -webkit-transform: rotate(60deg); transform: rotate(60deg); width: 3px;
}
.spell { border-radius: 50%; display: block; -webkit-filter: blur(0.05em); filter: blur(0.05em); font-size: .05em; height: 1em; left: calc(10% + 30px); opacity: 0; position: absolute; top: 170px; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 1em;
}
.spell.expeliarmus { background: whitesmoke;
}
.spell.expeliarmus:before, .spell.expeliarmus:after { background: white;
}
.spell.expeliarmus.build:before, .spell.expeliarmus.build:after { background: whitesmoke; box-shadow: 0 -0.24641em 0.2em 0.05em white, -0.2em 0.07321em 0.2em 0.05em white, 0.2em 0.07321em 0.2em 0.05em white;
}
.spell.expeliarmus.build:after { -webkit-animation-name: rotate, box-shadow-exp; animation-name: rotate, box-shadow-exp;
}
.spell.expeliarmus.travel { -webkit-animation-name: travel-exp; animation-name: travel-exp; box-shadow: inset -0.1em 0 0 0.05em #f8f8f8, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f8f8f8, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f8f8f8, inset -0.1em 0 0.3em 0.05em whitesmoke;
}
@-webkit-keyframes box-shadow-exp { 0% { box-shadow: -0.45em 0.2em 0 white, 0 0.45em 0.2em 0 white, 0.45em 0 0.2em 0 white, -0.45em 0 0.2em 0 white; } 25% { box-shadow: -0.35em 0.2em 0 white, 0 0.35em 0.2em 0 white, 0.35em 0 0.2em 0 white, -0.35em 0 0.2em 0 white; } 50% { box-shadow: -0.25em 0.2em 0 white, 0 0.25em 0.2em 0 white, 0.25em 0 0.2em 0 white, -0.25em 0 0.2em 0 white; }
}
@keyframes box-shadow-exp { 0% { box-shadow: -0.45em 0.2em 0 white, 0 0.45em 0.2em 0 white, 0.45em 0 0.2em 0 white, -0.45em 0 0.2em 0 white; } 25% { box-shadow: -0.35em 0.2em 0 white, 0 0.35em 0.2em 0 white, 0.35em 0 0.2em 0 white, -0.35em 0 0.2em 0 white; } 50% { box-shadow: -0.25em 0.2em 0 white, 0 0.25em 0.2em 0 white, 0.25em 0 0.2em 0 white, -0.25em 0 0.2em 0 white; }
}
@-webkit-keyframes travel-exp { 0% { box-shadow: inset 0 0 0 0 #f8f8f8, 0 0 0 0 #f9f9f9, 0 0 0 0 #f8f8f8, 0 0 0 0 whitesmoke, 0 0 0 0 #f8f8f8, inset -0.1em 0 0.3em 0.05em whitesmoke; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 20% { box-shadow: inset -0.1em 0 0 0.05em #f8f8f8, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f8f8f8, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f8f8f8, inset -0.1em 0 0.3em 0.05em whitesmoke; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 70% { box-shadow: inset -0.1em 0 0 0.05em #f8f8f8, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f8f8f8, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f8f8f8, inset -0.1em 0 0.3em 0.05em whitesmoke; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 100% { box-shadow: inset -0.1em 0 0 0.05em #f8f8f8, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f8f8f8, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f8f8f8, inset -0.1em 0 0.3em 0.05em whitesmoke; opacity: 0; -webkit-transform: scale(30) translateX(0%) translateY(0%); transform: scale(30) translateX(0%) translateY(0%); }
}
@keyframes travel-exp { 0% { box-shadow: inset 0 0 0 0 #f8f8f8, 0 0 0 0 #f9f9f9, 0 0 0 0 #f8f8f8, 0 0 0 0 whitesmoke, 0 0 0 0 #f8f8f8, inset -0.1em 0 0.3em 0.05em whitesmoke; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 20% { box-shadow: inset -0.1em 0 0 0.05em #f8f8f8, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f8f8f8, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f8f8f8, inset -0.1em 0 0.3em 0.05em whitesmoke; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 70% { box-shadow: inset -0.1em 0 0 0.05em #f8f8f8, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f8f8f8, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f8f8f8, inset -0.1em 0 0.3em 0.05em whitesmoke; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 100% { box-shadow: inset -0.1em 0 0 0.05em #f8f8f8, -0.8em 0 0.4em -0.35em #f9f9f9, -0.6em 0 0.3em -0.3em #f8f8f8, -0.4em 0 0.2em -0.2em whitesmoke, -0.2em 0 0.1em -0.1em #f8f8f8, inset -0.1em 0 0.3em 0.05em whitesmoke; opacity: 0; -webkit-transform: scale(30) translateX(0%) translateY(0%); transform: scale(30) translateX(0%) translateY(0%); }
}
.spell.stupify { background: crimson;
}
.spell.stupify:before, .spell.stupify:after { background: red;
}
.spell.stupify.build:before, .spell.stupify.build:after { background: crimson; box-shadow: 0 -0.24641em 0.2em 0.05em red, -0.2em 0.07321em 0.2em 0.05em red, 0.2em 0.07321em 0.2em 0.05em red;
}
.spell.stupify.build:after { -webkit-animation-name: rotate, box-shadow-stu; animation-name: rotate, box-shadow-stu;
}
.spell.stupify.travel { -webkit-animation-name: travel-stu; animation-name: travel-stu; box-shadow: inset -0.1em 0 0 0.05em #e54f6d, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e54f6d, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e54f6d, inset -0.1em 0 0.3em 0.05em crimson;
}
@-webkit-keyframes box-shadow-stu { 0% { box-shadow: -0.45em 0.2em 0 red, 0 0.45em 0.2em 0 red, 0.45em 0 0.2em 0 red, -0.45em 0 0.2em 0 red; } 25% { box-shadow: -0.35em 0.2em 0 red, 0 0.35em 0.2em 0 red, 0.35em 0 0.2em 0 red, -0.35em 0 0.2em 0 red; } 50% { box-shadow: -0.25em 0.2em 0 red, 0 0.25em 0.2em 0 red, 0.25em 0 0.2em 0 red, -0.25em 0 0.2em 0 red; }
}
@keyframes box-shadow-stu { 0% { box-shadow: -0.45em 0.2em 0 red, 0 0.45em 0.2em 0 red, 0.45em 0 0.2em 0 red, -0.45em 0 0.2em 0 red; } 25% { box-shadow: -0.35em 0.2em 0 red, 0 0.35em 0.2em 0 red, 0.35em 0 0.2em 0 red, -0.35em 0 0.2em 0 red; } 50% { box-shadow: -0.25em 0.2em 0 red, 0 0.25em 0.2em 0 red, 0.25em 0 0.2em 0 red, -0.25em 0 0.2em 0 red; }
}
@-webkit-keyframes travel-stu { 0% { box-shadow: inset 0 0 0 0 #e54f6d, 0 0 0 0 #ea728a, 0 0 0 0 #e54f6d, 0 0 0 0 crimson, 0 0 0 0 #e54f6d, inset -0.1em 0 0.3em 0.05em crimson; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 20% { box-shadow: inset -0.1em 0 0 0.05em #e54f6d, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e54f6d, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e54f6d, inset -0.1em 0 0.3em 0.05em crimson; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 70% { box-shadow: inset -0.1em 0 0 0.05em #e54f6d, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e54f6d, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e54f6d, inset -0.1em 0 0.3em 0.05em crimson; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 100% { box-shadow: inset -0.1em 0 0 0.05em #e54f6d, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e54f6d, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e54f6d, inset -0.1em 0 0.3em 0.05em crimson; opacity: 0; -webkit-transform: scale(30) translateX(0%) translateY(0%); transform: scale(30) translateX(0%) translateY(0%); }
}
@keyframes travel-stu { 0% { box-shadow: inset 0 0 0 0 #e54f6d, 0 0 0 0 #ea728a, 0 0 0 0 #e54f6d, 0 0 0 0 crimson, 0 0 0 0 #e54f6d, inset -0.1em 0 0.3em 0.05em crimson; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 20% { box-shadow: inset -0.1em 0 0 0.05em #e54f6d, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e54f6d, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e54f6d, inset -0.1em 0 0.3em 0.05em crimson; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 70% { box-shadow: inset -0.1em 0 0 0.05em #e54f6d, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e54f6d, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e54f6d, inset -0.1em 0 0.3em 0.05em crimson; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 100% { box-shadow: inset -0.1em 0 0 0.05em #e54f6d, -0.8em 0 0.4em -0.35em #ea728a, -0.6em 0 0.3em -0.3em #e54f6d, -0.4em 0 0.2em -0.2em crimson, -0.2em 0 0.1em -0.1em #e54f6d, inset -0.1em 0 0.3em 0.05em crimson; opacity: 0; -webkit-transform: scale(30) translateX(0%) translateY(0%); transform: scale(30) translateX(0%) translateY(0%); }
}
.spell.levicorpus { background: gold;
}
.spell.levicorpus:before, .spell.levicorpus:after { background: #ffeb00;
}
.spell.levicorpus.build:before, .spell.levicorpus.build:after { background: gold; box-shadow: 0 -0.24641em 0.2em 0.05em #ffeb00, -0.2em 0.07321em 0.2em 0.05em #ffeb00, 0.2em 0.07321em 0.2em 0.05em #ffeb00;
}
.spell.levicorpus.build:after { -webkit-animation-name: rotate, box-shadow-lev; animation-name: rotate, box-shadow-lev;
}
.spell.levicorpus.travel { -webkit-animation-name: travel-lev; animation-name: travel-lev; box-shadow: inset -0.1em 0 0 0.05em #ffe140, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe140, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe140, inset -0.1em 0 0.3em 0.05em gold;
}
@-webkit-keyframes box-shadow-lev { 0% { box-shadow: -0.45em 0.2em 0 #ffeb00, 0 0.45em 0.2em 0 #ffeb00, 0.45em 0 0.2em 0 #ffeb00, -0.45em 0 0.2em 0 #ffeb00; } 25% { box-shadow: -0.35em 0.2em 0 #ffeb00, 0 0.35em 0.2em 0 #ffeb00, 0.35em 0 0.2em 0 #ffeb00, -0.35em 0 0.2em 0 #ffeb00; } 50% { box-shadow: -0.25em 0.2em 0 #ffeb00, 0 0.25em 0.2em 0 #ffeb00, 0.25em 0 0.2em 0 #ffeb00, -0.25em 0 0.2em 0 #ffeb00; }
}
@keyframes box-shadow-lev { 0% { box-shadow: -0.45em 0.2em 0 #ffeb00, 0 0.45em 0.2em 0 #ffeb00, 0.45em 0 0.2em 0 #ffeb00, -0.45em 0 0.2em 0 #ffeb00; } 25% { box-shadow: -0.35em 0.2em 0 #ffeb00, 0 0.35em 0.2em 0 #ffeb00, 0.35em 0 0.2em 0 #ffeb00, -0.35em 0 0.2em 0 #ffeb00; } 50% { box-shadow: -0.25em 0.2em 0 #ffeb00, 0 0.25em 0.2em 0 #ffeb00, 0.25em 0 0.2em 0 #ffeb00, -0.25em 0 0.2em 0 #ffeb00; }
}
@-webkit-keyframes travel-lev { 0% { box-shadow: inset 0 0 0 0 #ffe140, 0 0 0 0 #ffe766, 0 0 0 0 #ffe140, 0 0 0 0 gold, 0 0 0 0 #ffe140, inset -0.1em 0 0.3em 0.05em gold; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 20% { box-shadow: inset -0.1em 0 0 0.05em #ffe140, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe140, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe140, inset -0.1em 0 0.3em 0.05em gold; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 70% { box-shadow: inset -0.1em 0 0 0.05em #ffe140, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe140, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe140, inset -0.1em 0 0.3em 0.05em gold; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 100% { box-shadow: inset -0.1em 0 0 0.05em #ffe140, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe140, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe140, inset -0.1em 0 0.3em 0.05em gold; opacity: 0; -webkit-transform: scale(30) translateX(0%) translateY(0%); transform: scale(30) translateX(0%) translateY(0%); }
}
@keyframes travel-lev { 0% { box-shadow: inset 0 0 0 0 #ffe140, 0 0 0 0 #ffe766, 0 0 0 0 #ffe140, 0 0 0 0 gold, 0 0 0 0 #ffe140, inset -0.1em 0 0.3em 0.05em gold; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 20% { box-shadow: inset -0.1em 0 0 0.05em #ffe140, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe140, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe140, inset -0.1em 0 0.3em 0.05em gold; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 70% { box-shadow: inset -0.1em 0 0 0.05em #ffe140, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe140, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe140, inset -0.1em 0 0.3em 0.05em gold; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 100% { box-shadow: inset -0.1em 0 0 0.05em #ffe140, -0.8em 0 0.4em -0.35em #ffe766, -0.6em 0 0.3em -0.3em #ffe140, -0.4em 0 0.2em -0.2em gold, -0.2em 0 0.1em -0.1em #ffe140, inset -0.1em 0 0.3em 0.05em gold; opacity: 0; -webkit-transform: scale(30) translateX(0%) translateY(0%); transform: scale(30) translateX(0%) translateY(0%); }
}
.spell.avada { background: limegreen;
}
.spell.avada:before, .spell.avada:after { background: chartreuse;
}
.spell.avada.build:before, .spell.avada.build:after { background: limegreen; box-shadow: 0 -0.24641em 0.2em 0.05em chartreuse, -0.2em 0.07321em 0.2em 0.05em chartreuse, 0.2em 0.07321em 0.2em 0.05em chartreuse;
}
.spell.avada.build:after { -webkit-animation-name: rotate, box-shadow-ava; animation-name: rotate, box-shadow-ava;
}
.spell.avada.travel { -webkit-animation-name: travel-ava; animation-name: travel-ava; box-shadow: inset -0.1em 0 0 0.05em #65da65, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65da65, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65da65, inset -0.1em 0 0.3em 0.05em limegreen;
}
@-webkit-keyframes box-shadow-ava { 0% { box-shadow: -0.45em 0.2em 0 chartreuse, 0 0.45em 0.2em 0 chartreuse, 0.45em 0 0.2em 0 chartreuse, -0.45em 0 0.2em 0 chartreuse; } 25% { box-shadow: -0.35em 0.2em 0 chartreuse, 0 0.35em 0.2em 0 chartreuse, 0.35em 0 0.2em 0 chartreuse, -0.35em 0 0.2em 0 chartreuse; } 50% { box-shadow: -0.25em 0.2em 0 chartreuse, 0 0.25em 0.2em 0 chartreuse, 0.25em 0 0.2em 0 chartreuse, -0.25em 0 0.2em 0 chartreuse; }
}
@keyframes box-shadow-ava { 0% { box-shadow: -0.45em 0.2em 0 chartreuse, 0 0.45em 0.2em 0 chartreuse, 0.45em 0 0.2em 0 chartreuse, -0.45em 0 0.2em 0 chartreuse; } 25% { box-shadow: -0.35em 0.2em 0 chartreuse, 0 0.35em 0.2em 0 chartreuse, 0.35em 0 0.2em 0 chartreuse, -0.35em 0 0.2em 0 chartreuse; } 50% { box-shadow: -0.25em 0.2em 0 chartreuse, 0 0.25em 0.2em 0 chartreuse, 0.25em 0 0.2em 0 chartreuse, -0.25em 0 0.2em 0 chartreuse; }
}
@-webkit-keyframes travel-ava { 0% { box-shadow: inset 0 0 0 0 #65da65, 0 0 0 0 #84e184, 0 0 0 0 #65da65, 0 0 0 0 limegreen, 0 0 0 0 #65da65, inset -0.1em 0 0.3em 0.05em limegreen; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 20% { box-shadow: inset -0.1em 0 0 0.05em #65da65, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65da65, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65da65, inset -0.1em 0 0.3em 0.05em limegreen; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 70% { box-shadow: inset -0.1em 0 0 0.05em #65da65, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65da65, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65da65, inset -0.1em 0 0.3em 0.05em limegreen; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 100% { box-shadow: inset -0.1em 0 0 0.05em #65da65, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65da65, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65da65, inset -0.1em 0 0.3em 0.05em limegreen; opacity: 0; -webkit-transform: scale(30) translateX(0%) translateY(0%); transform: scale(30) translateX(0%) translateY(0%); }
}
@keyframes travel-ava { 0% { box-shadow: inset 0 0 0 0 #65da65, 0 0 0 0 #84e184, 0 0 0 0 #65da65, 0 0 0 0 limegreen, 0 0 0 0 #65da65, inset -0.1em 0 0.3em 0.05em limegreen; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 20% { box-shadow: inset -0.1em 0 0 0.05em #65da65, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65da65, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65da65, inset -0.1em 0 0.3em 0.05em limegreen; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 70% { box-shadow: inset -0.1em 0 0 0.05em #65da65, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65da65, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65da65, inset -0.1em 0 0.3em 0.05em limegreen; opacity: 1; -webkit-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } 100% { box-shadow: inset -0.1em 0 0 0.05em #65da65, -0.8em 0 0.4em -0.35em #84e184, -0.6em 0 0.3em -0.3em #65da65, -0.4em 0 0.2em -0.2em limegreen, -0.2em 0 0.1em -0.1em #65da65, inset -0.1em 0 0.3em 0.05em limegreen; opacity: 0; -webkit-transform: scale(30) translateX(0%) translateY(0%); transform: scale(30) translateX(0%) translateY(0%); }
}
.spell:before, .spell:after { border-radius: 50%; content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.spell.build { -webkit-transform-origin: center; transform-origin: center; -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out;
}
.spell.build:before, .spell.build:after { -webkit-animation: rotate .5s linear infinite; animation: rotate .5s linear infinite; height: .4em; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; width: .4em;
}
.spell.build:after { -webkit-animation-delay: -1s, 0; animation-delay: -1s, 0; -webkit-animation-direction: reverse, alternate; animation-direction: reverse, alternate; -webkit-animation-duration: .3s, .4s; animation-duration: .3s, .4s; height: .2em; width: .2em;
}
.spell.travel { -webkit-animation: .3s ease-in forwards; animation: .3s ease-in forwards;
}
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0) translateX(-50%) translateY(-50%); transform: rotate(0) translateX(-50%) translateY(-50%); } to { -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%); transform: rotate(360deg) translateX(-50%) translateY(-50%); }
}
@keyframes rotate { from { -webkit-transform: rotate(0) translateX(-50%) translateY(-50%); transform: rotate(0) translateX(-50%) translateY(-50%); } to { -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%); transform: rotate(360deg) translateX(-50%) translateY(-50%); }
}
.opponent { box-shadow: inset 0 -5px 0 0 black; margin: 150px 0 0; position: absolute; right: 0; width: 230px;
}
figure { display: inline-block; font-size: 30px; margin: .8em 2.2em 3em; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform .4s ease-in; transition: -webkit-transform .4s ease-in; transition: transform .4s ease-in; transition: transform .4s ease-in, -webkit-transform .4s ease-in;
}
.body { height: 2em; position: relative; width: 2px;
}
.body, .body div { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; background: dodgerblue; -webkit-transition: all .3 ease-in-out; transition: all .3 ease-in-out;
}
.head { border-radius: 50%; height: .8em; left: 0; position: absolute; top: 0; -webkit-transform: translateX(-50%) translateY(-100%); transform: translateX(-50%) translateY(-100%); width: .8em;
}
.head:before, .head:after { background: black; border-radius: 50%; box-shadow: 0 0 0 0.03em black, inset -0.01em 0 0 0.06em dodgerblue; content: ""; height: .2em; left: .11em; position: absolute; top: .16em; width: .2em;
}
.head:after { left: auto; right: .11em;
}
.arms, .arm, .legs, .leg { left: 0; position: absolute; -webkit-transform-origin: top center; transform-origin: top center; width: 2px;
}
.arms { top: .15em; -webkit-transition: -webkit-transform .4s ease-in; transition: -webkit-transform .4s ease-in; transition: transform .4s ease-in; transition: transform .4s ease-in, -webkit-transform .4s ease-in;
}
.arm { height: 2.2em;
}
.arm.left { -webkit-transform: rotate(40deg); transform: rotate(40deg);
}
.arm.right { -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
.wand { background: brown !important; bottom: 0; height: 1em; position: absolute; -webkit-transform: rotate(-105deg); transform: rotate(-105deg); -webkit-transform-origin: bottom center; transform-origin: bottom center; width: 2px;
}
.legs { top: 2em;
}
.leg { height: 3em;
}
.leg.left { -webkit-transform: rotate(10deg); transform: rotate(10deg);
}
.leg.right { -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
figure.exp div.body { -webkit-transform-origin: .5em 4.85em; transform-origin: .5em 4.85em;
}
figure.exp div.head { -webkit-transform: rotate(15deg) translateX(-50%) translateY(-77%); transform: rotate(15deg) translateX(-50%) translateY(-77%); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: -webkit-transform .2s ease-out 2.8s; transition: -webkit-transform .2s ease-out 2.8s; transition: transform .2s ease-out 2.8s; transition: transform .2s ease-out 2.8s, -webkit-transform .2s ease-out 2.8s;
}
figure.exp div.head:before, figure.exp div.head:after { -webkit-animation: exp-eyes 3s cubic-bezier(0.15, 0.5, 0.85, 0.5) forwards; animation: exp-eyes 3s cubic-bezier(0.15, 0.5, 0.85, 0.5) forwards;
}
figure.exp div.arms { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s; transition: -webkit-transform 1.5s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s; transition: transform 1.5s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s; transition: transform 1.5s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s, -webkit-transform 1.5s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s;
}
figure.exp div.arm.right { -webkit-transform: rotate(20deg); transform: rotate(20deg); -webkit-transition: -webkit-transform .2s ease-out 2.8s; transition: -webkit-transform .2s ease-out 2.8s; transition: transform .2s ease-out 2.8s; transition: transform .2s ease-out 2.8s, -webkit-transform .2s ease-out 2.8s;
}
figure.exp div.wand { -webkit-animation: exp-wand 1.8s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s forwards; animation: exp-wand 1.8s cubic-bezier(0.15, 0.5, 0.85, 0.5) 0.1s forwards; -webkit-transform-origin: center; transform-origin: center;
}
figure.exp.exp-bend div { -webkit-transition: -webkit-transform .6s ease-out .2s; transition: -webkit-transform .6s ease-out .2s; transition: transform .6s ease-out .2s; transition: transform .6s ease-out .2s, -webkit-transform .6s ease-out .2s;
}
figure.exp.exp-bend div.body { -webkit-transform: rotate(115deg); transform: rotate(115deg); -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
figure.exp.exp-bend div.head { -webkit-transform: rotate(0deg) translateX(-50%) translateY(-100%); transform: rotate(0deg) translateX(-50%) translateY(-100%);
}
figure.exp.exp-bend div.arm.left { -webkit-transform: rotate(-85deg); transform: rotate(-85deg);
}
figure.exp.exp-bend div.arm.right { -webkit-transform: rotate(20deg); transform: rotate(20deg);
}
figure.exp.exp-bend div.legs { -webkit-transform: rotate(-115deg); transform: rotate(-115deg); -webkit-transform-origin: top center; transform-origin: top center;
}
figure.exp.exp-bend div.leg.left { -webkit-transform: rotate(55deg); transform: rotate(55deg); -webkit-transition: -webkit-transform .3s ease-out .2s; transition: -webkit-transform .3s ease-out .2s; transition: transform .3s ease-out .2s; transition: transform .3s ease-out .2s, -webkit-transform .3s ease-out .2s;
}
figure.exp.exp-return div { -webkit-transition: -webkit-transform .6s ease-out; transition: -webkit-transform .6s ease-out; transition: transform .6s ease-out; transition: transform .6s ease-out, -webkit-transform .6s ease-out;
}
figure.exp.exp-return div.body { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
figure.exp.exp-return div.arms { -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
figure.exp.exp-return div.arm.left { -webkit-transform: rotate(40deg); transform: rotate(40deg);
}
figure.exp.exp-return div.arm.right { -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
figure.exp.exp-return div.wand { -webkit-animation: exp-r-wand .6s ease-out forwards; animation: exp-r-wand .6s ease-out forwards; opacity: 1; -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
figure.exp.exp-return div.legs { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: top center; transform-origin: top center;
}
figure.exp.exp-return div.leg.left { -webkit-transform: rotate(10deg); transform: rotate(10deg); -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
figure.stu div.body { -webkit-animation: stu-body 2s linear .2s forwards; animation: stu-body 2s linear .2s forwards; left: 1em; -webkit-transform-origin: .5em 4.85em; transform-origin: .5em 4.85em; -webkit-transition: left .2s linear .2s; transition: left .2s linear .2s;
}
figure.stu div.head:before, figure.stu div.head:after { -webkit-animation: stu-eyes .2s linear .2s forwards; animation: stu-eyes .2s linear .2s forwards; box-shadow: 0 -0.01em 0 0.01em black, inset 0.01em 0 0 0.06em dodgerblue;
}
figure.stu div.arm.left { -webkit-transform: rotate(120deg); transform: rotate(120deg); -webkit-transition: -webkit-transform .2s ease-in .2s; transition: -webkit-transform .2s ease-in .2s; transition: transform .2s ease-in .2s; transition: transform .2s ease-in .2s, -webkit-transform .2s ease-in .2s;
}
figure.stu div.arm.right { -webkit-transform: rotate(-105deg); transform: rotate(-105deg); -webkit-transition: -webkit-transform .2s ease-in .2s; transition: -webkit-transform .2s ease-in .2s; transition: transform .2s ease-in .2s; transition: transform .2s ease-in .2s, -webkit-transform .2s ease-in .2s;
}
figure.stu.stu-return div.body { left: 0; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}
figure.stu.stu-return div.head:before, figure.stu.stu-return div.head:after { -webkit-animation: stu-eyes .5s linear reverse forwards; animation: stu-eyes .5s linear reverse forwards;
}
figure.stu.stu-return div.arm { -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}
figure.stu.stu-return div.arm.left { -webkit-transform: rotate(40deg); transform: rotate(40deg);
}
figure.stu.stu-return div.arm.right { -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
figure.stu.stu-return div.leg { -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}
figure.stu.stu-return div.leg.left { -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
figure.stu.stu-return div.leg.right { -webkit-transform: rotate(10deg); transform: rotate(10deg);
}
figure.lev { -webkit-transform: rotate(-170deg) translateY(4.2em); transform: rotate(-170deg) translateY(4.2em); -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
figure.lev div.body { -webkit-animation: lev-body 1s ease-in-out .2s infinite alternate forwards running; animation: lev-body 1s ease-in-out .2s infinite alternate forwards running; -webkit-transform-origin: .5em 4.85em; transform-origin: .5em 4.85em; -webkit-transition: all .3s ease-in-out .2s; transition: all .3s ease-in-out .2s;
}
figure.lev div.head:before, figure.lev div.head:after { -webkit-transform: rotate(90deg) scaleX(0.7); transform: rotate(90deg) scaleX(0.7); -webkit-transition: -webkit-transform .3s ease-in .2s; transition: -webkit-transform .3s ease-in .2s; transition: transform .3s ease-in .2s; transition: transform .3s ease-in .2s, -webkit-transform .3s ease-in .2s;
}
figure.lev div.arms { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
figure.lev div.arm { -webkit-animation: 1s ease-in-out -.3s infinite alternate forwards running; animation: 1s ease-in-out -.3s infinite alternate forwards running;
}
figure.lev div.arm.left { -webkit-animation-name: lev-arms-left; animation-name: lev-arms-left;
}
figure.lev div.arm.right { -webkit-animation-name: lev-arms-right; animation-name: lev-arms-right;
}
figure.lev div.wand { -webkit-transform: rotate(-165deg); transform: rotate(-165deg); -webkit-transition: -webkit-transform .2s ease-in .2s; transition: -webkit-transform .2s ease-in .2s; transition: transform .2s ease-in .2s; transition: transform .2s ease-in .2s, -webkit-transform .2s ease-in .2s;
}
figure.lev div.leg.left { -webkit-animation: lev-legs .2s ease-in .2s forwards running; animation: lev-legs .2s ease-in .2s forwards running;
}
figure.ava { -webkit-transform: rotate(82deg) translateX(1.12em) translateY(2em); transform: rotate(82deg) translateX(1.12em) translateY(2em); -webkit-transform-origin: 1em 4.85em; transform-origin: 1em 4.85em; -webkit-transition: -webkit-transform 1s cubic-bezier(0.85, 0.3, 0.95, 0.7) 0.2s; transition: -webkit-transform 1s cubic-bezier(0.85, 0.3, 0.95, 0.7) 0.2s; transition: transform 1s cubic-bezier(0.85, 0.3, 0.95, 0.7) 0.2s; transition: transform 1s cubic-bezier(0.85, 0.3, 0.95, 0.7) 0.2s, -webkit-transform 1s cubic-bezier(0.85, 0.3, 0.95, 0.7) 0.2s;
}
figure.ava div.head:before, figure.ava div.head:after { -webkit-animation: ava-eyes 1.2s linear .2s forwards; animation: ava-eyes 1.2s linear .2s forwards;
}
figure.ava div.arms { -webkit-animation: ava-arms .5s ease-out .2s 2 alternate forwards; animation: ava-arms .5s ease-out .2s 2 alternate forwards;
}
figure.ava div.arm, figure.ava div.leg, figure.ava div.wand { -webkit-transform: rotate(2deg); transform: rotate(2deg); -webkit-transition: -webkit-transform 1s ease-in .2s; transition: -webkit-transform 1s ease-in .2s; transition: transform 1s ease-in .2s; transition: transform 1s ease-in .2s, -webkit-transform 1s ease-in .2s;
}
figure.ava div.leg { -webkit-transform: rotate(8deg); transform: rotate(8deg);
}
figure.ava div.wand { -webkit-transform: rotate(-174deg); transform: rotate(-174deg);
}
figure.ava div.legs { -webkit-animation: ava-legs .5s ease-out .2s 2 alternate forwards; animation: ava-legs .5s ease-out .2s 2 alternate forwards;
}
@-webkit-keyframes exp-eyes { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); } 10% { -webkit-transform: scaleY(1) rotate(0); transform: scaleY(1) rotate(0); } 50% { -webkit-transform: scaleY(1) rotate(245deg); transform: scaleY(1) rotate(245deg); } 90% { border-radius: 50%; -webkit-transform: scaleY(1) rotate(245deg); transform: scaleY(1) rotate(245deg); } 100% { border-radius: 50% 50% 0 0; -webkit-transform: scaleY(0.4) rotate(180deg); transform: scaleY(0.4) rotate(180deg); }
}
@keyframes exp-eyes { 0% { -webkit-transform: scaleY(0); transform: scaleY(0); } 10% { -webkit-transform: scaleY(1) rotate(0); transform: scaleY(1) rotate(0); } 50% { -webkit-transform: scaleY(1) rotate(245deg); transform: scaleY(1) rotate(245deg); } 90% { border-radius: 50%; -webkit-transform: scaleY(1) rotate(245deg); transform: scaleY(1) rotate(245deg); } 100% { border-radius: 50% 50% 0 0; -webkit-transform: scaleY(0.4) rotate(180deg); transform: scaleY(0.4) rotate(180deg); }
}
@-webkit-keyframes exp-wand { 0% { bottom: 0; left: 0; -webkit-transform: rotate(-105deg); transform: rotate(-105deg); } 30% { bottom: 15em; left: -4em; -webkit-transform: rotate(1160deg); transform: rotate(1160deg); } 60% { bottom: 15em; left: .5em; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 90% { bottom: -2.6em; left: 4em; -webkit-transform: rotate(1160deg); transform: rotate(1160deg); } 95% { bottom: -1.6em; left: 3.5em; -webkit-transform: rotate(620deg); transform: rotate(620deg); } 99.9% { bottom: -2.6em; left: 3em; opacity: 1; -webkit-transform: rotate(80deg); transform: rotate(80deg); } 100% { bottom: 0; left: 0; opacity: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
}
@keyframes exp-wand { 0% { bottom: 0; left: 0; -webkit-transform: rotate(-105deg); transform: rotate(-105deg); } 30% { bottom: 15em; left: -4em; -webkit-transform: rotate(1160deg); transform: rotate(1160deg); } 60% { bottom: 15em; left: .5em; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 90% { bottom: -2.6em; left: 4em; -webkit-transform: rotate(1160deg); transform: rotate(1160deg); } 95% { bottom: -1.6em; left: 3.5em; -webkit-transform: rotate(620deg); transform: rotate(620deg); } 99.9% { bottom: -2.6em; left: 3em; opacity: 1; -webkit-transform: rotate(80deg); transform: rotate(80deg); } 100% { bottom: 0; left: 0; opacity: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
}
@-webkit-keyframes exp-r-wand { from { -webkit-transform: rotate(90deg); transform: rotate(90deg); } to { -webkit-transform: rotate(-105deg); transform: rotate(-105deg); }
}
@keyframes exp-r-wand { from { -webkit-transform: rotate(90deg); transform: rotate(90deg); } to { -webkit-transform: rotate(-105deg); transform: rotate(-105deg); }
}
@-webkit-keyframes stu-body { 0% { -webkit-transform: rotate(0) translateX(0) translateY(0); transform: rotate(0) translateX(0) translateY(0); } 10% { -webkit-transform: rotate(10deg) translateX(0) translateY(-1em); transform: rotate(10deg) translateX(0) translateY(-1em); } 30% { -webkit-transform: rotate(10deg) translateX(0) translateY(-1em); transform: rotate(10deg) translateX(0) translateY(-1em); } 40% { -webkit-transform: rotate(10deg) translateX(0) translateY(0); transform: rotate(10deg) translateX(0) translateY(0); } 52% { -webkit-transform: rotate(0deg) translateX(0) translateY(-0.6em); transform: rotate(0deg) translateX(0) translateY(-0.6em); } 62% { -webkit-transform: rotate(-7.5deg) translateX(0) translateY(0); transform: rotate(-7.5deg) translateX(0) translateY(0); } 72% { -webkit-transform: rotate(0deg) translateX(0) translateY(-0.3em); transform: rotate(0deg) translateX(0) translateY(-0.3em); } 80% { -webkit-transform: rotate(5deg) translateX(0) translateY(0); transform: rotate(5deg) translateX(0) translateY(0); } 88% { -webkit-transform: rotate(0deg) translateX(0) translateY(-0.1em); transform: rotate(0deg) translateX(0) translateY(-0.1em); } 94% { -webkit-transform: rotate(-2.5deg) translateX(0) translateY(0); transform: rotate(-2.5deg) translateX(0) translateY(0); } 100% { -webkit-transform: rotate(0) translateX(0) translateY(0); transform: rotate(0) translateX(0) translateY(0); }
}
@keyframes stu-body { 0% { -webkit-transform: rotate(0) translateX(0) translateY(0); transform: rotate(0) translateX(0) translateY(0); } 10% { -webkit-transform: rotate(10deg) translateX(0) translateY(-1em); transform: rotate(10deg) translateX(0) translateY(-1em); } 30% { -webkit-transform: rotate(10deg) translateX(0) translateY(-1em); transform: rotate(10deg) translateX(0) translateY(-1em); } 40% { -webkit-transform: rotate(10deg) translateX(0) translateY(0); transform: rotate(10deg) translateX(0) translateY(0); } 52% { -webkit-transform: rotate(0deg) translateX(0) translateY(-0.6em); transform: rotate(0deg) translateX(0) translateY(-0.6em); } 62% { -webkit-transform: rotate(-7.5deg) translateX(0) translateY(0); transform: rotate(-7.5deg) translateX(0) translateY(0); } 72% { -webkit-transform: rotate(0deg) translateX(0) translateY(-0.3em); transform: rotate(0deg) translateX(0) translateY(-0.3em); } 80% { -webkit-transform: rotate(5deg) translateX(0) translateY(0); transform: rotate(5deg) translateX(0) translateY(0); } 88% { -webkit-transform: rotate(0deg) translateX(0) translateY(-0.1em); transform: rotate(0deg) translateX(0) translateY(-0.1em); } 94% { -webkit-transform: rotate(-2.5deg) translateX(0) translateY(0); transform: rotate(-2.5deg) translateX(0) translateY(0); } 100% { -webkit-transform: rotate(0) translateX(0) translateY(0); transform: rotate(0) translateX(0) translateY(0); }
}
@-webkit-keyframes stu-eyes { from { box-shadow: 0 0 0 0.03em black, inset -0.01em 0 0 0.06em dodgerblue; } to { box-shadow: 0 0 0 0.03em black, inset 0 0 0 0.06em dodgerblue; }
}
@keyframes stu-eyes { from { box-shadow: 0 0 0 0.03em black, inset -0.01em 0 0 0.06em dodgerblue; } to { box-shadow: 0 0 0 0.03em black, inset 0 0 0 0.06em dodgerblue; }
}
@-webkit-keyframes ava-eyes { 0% { border-radius: 50%; box-shadow: 0 0 0 0.03em black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue; -webkit-transform: scaleY(1); transform: scaleY(1); } 70% { border-radius: 50%; box-shadow: 0 0 0 0.03em black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue; -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 70.01% { border-radius: 0; box-shadow: 0 0 0 0 black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue; -webkit-transform: rotate(45deg) scaleX(0.1) scaleY(0.1); transform: rotate(45deg) scaleX(0.1) scaleY(0.1); } 100% { border-radius: 0; box-shadow: 0 0 0 0 black, 0.23em 0 0 0 black, 0 0.23em 0 0 black, -0.23em 0 0 0 black, 0 -0.23em 0 0 black; -webkit-transform: rotate(45deg) scaleX(0.4) scaleY(0.4); transform: rotate(45deg) scaleX(0.4) scaleY(0.4); }
}
@keyframes ava-eyes { 0% { border-radius: 50%; box-shadow: 0 0 0 0.03em black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue; -webkit-transform: scaleY(1); transform: scaleY(1); } 70% { border-radius: 50%; box-shadow: 0 0 0 0.03em black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue; -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 70.01% { border-radius: 0; box-shadow: 0 0 0 0 black, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset 0 0 0 0 dodgerblue, inset -0.01em 0 0 0.06em dodgerblue; -webkit-transform: rotate(45deg) scaleX(0.1) scaleY(0.1); transform: rotate(45deg) scaleX(0.1) scaleY(0.1); } 100% { border-radius: 0; box-shadow: 0 0 0 0 black, 0.23em 0 0 0 black, 0 0.23em 0 0 black, -0.23em 0 0 0 black, 0 -0.23em 0 0 black; -webkit-transform: rotate(45deg) scaleX(0.4) scaleY(0.4); transform: rotate(45deg) scaleX(0.4) scaleY(0.4); }
}
@-webkit-keyframes ava-arms { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
}
@keyframes ava-arms { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
}
@-webkit-keyframes ava-legs { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(20deg); transform: rotate(20deg); }
}
@keyframes ava-legs { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(20deg); transform: rotate(20deg); }
}
@-webkit-keyframes lev-body { from { -webkit-transform: rotate(10deg); transform: rotate(10deg); } to { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
}
@keyframes lev-body { from { -webkit-transform: rotate(10deg); transform: rotate(10deg); } to { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
}
@-webkit-keyframes lev-arms-left { from { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } to { -webkit-transform: rotate(20deg); transform: rotate(20deg); }
}
@keyframes lev-arms-left { from { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } to { -webkit-transform: rotate(20deg); transform: rotate(20deg); }
}
@-webkit-keyframes lev-arms-right { from { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes lev-arms-right { from { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@-webkit-keyframes lev-legs { from { -webkit-transform: rotate(10deg); transform: rotate(10deg); } to { -webkit-transform: rotate(40deg); transform: rotate(40deg); }
}
@keyframes lev-legs { from { -webkit-transform: rotate(10deg); transform: rotate(10deg); } to { -webkit-transform: rotate(40deg); transform: rotate(40deg); }
}

* * * Magic! * * * - Script Codes JS Codes

var $fig = $('figure'), buildPower;
var actions = { "expeliarmus": function() { $fig.addClass("exp"); setTimeout(function() { $fig.addClass("exp-bend"); setTimeout(function() { $fig.removeClass("exp-bend").addClass("exp-return"); setTimeout(function() { $fig.removeClass("exp exp-return"); }, 600); }, 600); }, 4000); }, "stupify": function() { $fig.addClass("stu"); setTimeout(function() { $fig.addClass("stu-return"); setTimeout(function() { $fig.removeClass("stu stu-return"); }, 500); }, 4000); }, "levicorpus": function() { $fig.addClass("lev"); setTimeout(function() { $fig.removeClass("lev"); }, 4000); }, "avada": function() { $fig.addClass("ava"); }
}
$('body') .on('mousedown', '.arena', function(e) { var $obj = $(this).find('.spell'), power = .05; $obj.addClass("build"); // get spell class from whatever it is you are using to set this... a drop down maybe??? var spellClass = $('input[name=spell]:checked').val(); $obj.addClass(spellClass); buildPower = setInterval(function() { power += .05; $obj.css({ fontSize: power + "em", opacity: power }); }, 100); }) .on('mouseup', '.arena', function(e) { var $obj = $(this).find('.spell'), spellClass = $('input[name=spell]:checked').val(); clearInterval(buildPower); $obj.addClass("travel"); spellAnimation($obj); actions[spellClass](); setTimeout(function() { $obj .removeClass("travel build expeliarmus stupify levicorpus avada") .css({ fontSize: .05 + "em", opacity: 0 }); }, 1500); })
;
function spellAnimation($spell) { var $victim = $spell.siblings('.opponent'), $origLeft = $spell.css("left"), $origTop = $spell.css("top"); $spell.animate({ left: $victim.offset().left + 300, top: $victim.offset().top + 100 }, 400, function() { setTimeout(function() { $spell.css({ left: $origLeft, top: $origTop }); }, 200); });
}
// original button controls
$('body') .on('click', '#exp', function(e) { e.preventDefault(); $fig.addClass("exp"); setTimeout(function() { $fig.addClass("exp-bend"); setTimeout(function() { $fig.removeClass("exp-bend").addClass("exp-return"); setTimeout(function() { $fig.removeClass("exp exp-return"); }, 1000); }, 1000); }, 4000); }) .on('click', '#stu', function(e) { e.preventDefault(); $fig.addClass("stu"); setTimeout(function() { $fig.addClass("stu-return"); setTimeout(function() { $fig.removeClass("stu stu-return"); }, 500); }, 4000); }) .on('click', '#lev', function(e) { e.preventDefault(); $fig.addClass("lev"); setTimeout(function() { $fig.removeClass("lev"); }, 4000); }) .on('click', '#ava', function(e) { e.preventDefault(); $fig.addClass("ava"); }) .on('click', '#reset', function(e) { e.preventDefault(); $fig.animate({opacity: 0}, 500); setTimeout(function() { $fig.removeClass("exp stu lev ava"); setTimeout(function() { $fig.animate({opacity: 1}, 500); }, 500); }, 500); })
;
* * * Magic! * * * - Script Codes
* * * Magic! * * * - Script Codes
Home Page Home
Developer Brandon Kennedy
Username brandonkennedy
Uploaded September 18, 2022
Rating 3.5
Size 9,415 Kb
Views 16,192
Do you need developer help for * * * Magic! * * *?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brandon Kennedy (brandonkennedy) Script Codes
Name
Browser Detection
Crooked section dividers
CSS Only Banner Rotation
Digital Static Search Box
And yet another box shadow loader
Lazyload.js
Button disabled and loading states
SCSS Tick Marks Function
Slug loader
CSS Animated Search Box Concepts
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!