Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 26, 2017 14:56
Show Gist options
  • Save anonymous/6a98e652bc52ce8ae18f0dc3ed28dc54 to your computer and use it in GitHub Desktop.
Save anonymous/6a98e652bc52ce8ae18f0dc3ed28dc54 to your computer and use it in GitHub Desktop.
Download ZIP
vZevOX
Raw
index.html
<form>
<div class="input-group input-group-lg ">
<span class="input-group-addon" id="UnInd">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1" pattern="([A-Z]){4}-([a-z]){4}">
</div>
<small id="fileHelp" class="form-text text-muted">Input Your Username</small>
</form>
<div class="anim"></div>
Raw
script.js
$("input").on("change",()=>{
var result = $("form")[0].checkValidity();
if(result){
$("div.input-group").removeClass("has-danger"); $("div.input-group").addClass("has-success");
}else{
$("div.input-group").removeClass("has-success"); $("div.input-group").addClass("has-danger");
}
console.log("Ev");
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
Raw
style.css
.anim{
background-image:url(http://i.imgur.com/af1RSLn.png);
background-size:cover;
width: 200px;
height: 200px;
}
.anim{
animation: animationFrames linear 6s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
}
.anim:hover{
animation: animationFrames linear 2s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
}
@keyframes animationFrames{
0% {
transform: rotate(360deg) ;
}
100% {
transform: rotate(0deg) ;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment