A Pen by Lonely Whale on CodePen.
Created
September 23, 2019 02:36
-
-
Save bhandarisaurav/4009fac5024b72477db332a37fe27dee to your computer and use it in GitHub Desktop.
Download Button
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="container jumbotron"> | |
| <h1 class="text-center"><i class="fa fa-paper-plane float shadow"></i> Flyaway<a href="">.css</a></h1> | |
| <p class="lead text-right">~ created by <small><a href="http://takentech.com/about"><i class="glyphicon glyphicon-fire"></i> 進擊的燊</a></small> ~</p> | |
| <p><i class="fa fa-quote-left fa-pull-left"></i>Flyaway<a href="">.css</a> is a pure CSS3 animation tool, which can help you create an vivid paper-plane animation.</p> | |
| <br> | |
| <section class="center-block"> | |
| <button class="download" onClick="window.location='https://github.com/lushen/flyaway/archive/v0.0.2.zip'; return false;"> | |
| <span>Download</span> | |
| <i class="fa fa-paper-plane"></i> | |
| </button> | |
| <small class="center-block text-center">Currently v0.0.2</small> | |
| </section> | |
| <br> | |
| <br> | |
| <section class="text-center block"> | |
| <ul class="social list-inline"> | |
| <li> | |
| <i id="demo" class="fa fa-paper-plane fa-3x float shadow"></i> | |
| </li> | |
| </ul> | |
| </section> | |
| <section class="text-center block"> | |
| <select class="select"> | |
| <optgroup label="Flyout"> | |
| <option value="pushOut">pushOut</option> | |
| <option value="popUp">popUp</option> | |
| </optgroup> | |
| <optgroup label="Shake"> | |
| <option value="linearShake">linearShake</option> | |
| <option value="rotateShake">rotateShake</option> | |
| </optgroup> | |
| </select> | |
| <button class="animate">Animate</button> | |
| </section> | |
| <footer class="footer text-center"> | |
| <small><i class="fa fa-paper-plane float shadow"></i> Powered by <a href="https://github.com/mojombo/jekyll">Jekyll</a> on GitHub | Copyright © 2015 - 2016, <a href="https://github.com/lushen">進擊的燊</a>, all the rights reserved.</small> | |
| <ul class="social list-inline"> | |
| <li><a href="http://weibo.com/shenlu89dev"><i class="fa fa-weibo fa-l float shadow"></i></a></li> | |
| <li><a href="https://github.com/lushen"><i class="fa fa-github fa-l float shadow"></i></a></li> | |
| <li><a href="https://www.linkedin.com/in/shen-lu-ba758567"><i class="fa fa-linkedin fa-l float shadow"></i></a></li> | |
| <li><a href="http://stackoverflow.com/users/5560940/shenlu"><i class="fa fa-stack-overflow fa-l float shadow"></i></a></li> | |
| </ul> | |
| </footer> | |
| </div> | |
| <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |
| <script src="https://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> | |
| <!-- Include all compiled plugins (below), or include individual files as needed --> | |
| <script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> | |
| <script type="text/javascript" src="js/back-to-top.js"></script> | |
| <script type="text/javascript" src="js/flyaway.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function animate(x) { | |
| $('#demo').removeClass('float shadow').addClass('flyaway ' + x).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { | |
| $('#demo').addClass('shadow float').removeClass('flyaway ' + x); | |
| }); | |
| }; | |
| $(document).ready(function() { | |
| $('.download').click(function() { | |
| $(this).addClass('bounce-in').find('span').text(function(span, text) { | |
| return "Success!"; | |
| }); | |
| $(this).find('i').addClass('flyaway pushOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { | |
| $('.download').find('i').removeClass('flyaway pushOut'); | |
| $('.download').removeClass('bounce-in').find('span').text(function(span, text) { | |
| return "Download"; | |
| }); | |
| }); | |
| }); | |
| $('.animate').click(function(e) { | |
| e.preventDefault(); | |
| var anim = $('.select').val(); | |
| animate(anim); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| transition: all .2s ease-in-out; | |
| outline: none; | |
| } | |
| @keyframes text-fade { | |
| 0% { | |
| opacity: 0; | |
| } | |
| } | |
| body { | |
| background-color: #2d7586; | |
| font-family: Galdeano, "Hiragino Sans GB", "Microsoft YaHei", Trebuchet, "Trebuchet MS", Tahoma, "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; | |
| color: #fff; | |
| animation: text-fade 2s ease-in-out; | |
| } | |
| @media (min-width: 768px) { | |
| .container { | |
| max-width: 750px; | |
| animation: text-fade 1s; | |
| } | |
| } | |
| .jumbotron { | |
| background-color: transparent; | |
| } | |
| a { | |
| color: #CCD1D9; | |
| } | |
| a:hover { | |
| color: rgba(170, 178, 189, 0.3); | |
| text-decoration: none; | |
| } | |
| @keyframes bounce-in { | |
| 0% { | |
| padding-right: 30px; | |
| } | |
| 40% { | |
| padding-right: 6px; | |
| } | |
| 50% { | |
| padding-left: 30px; | |
| } | |
| 100% { | |
| padding-left: 6px; | |
| } | |
| } | |
| .download { | |
| font-size: 20px; | |
| font-family: 'Pacifico'; | |
| overflow: visible; | |
| border-radius: 3px; | |
| position: relative; | |
| padding-right: 30px; | |
| border: none; | |
| background-color: #fff; | |
| color: #2d7586; | |
| display: block; | |
| margin: 5px auto; | |
| height: 50px; | |
| width: 150px; | |
| } | |
| .download:hover { | |
| background-color: #fff; | |
| } | |
| .download:hover i { | |
| transform: rotate(10deg); | |
| } | |
| .download i { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| } | |
| .download.bounce-in { | |
| background-color: rgb(50, 130, 149); | |
| border: none; | |
| color: #fff; | |
| padding-right: 6px; | |
| animation: bounce-in 0.4s; | |
| } | |
| .block { | |
| height: 80px; | |
| } | |
| .animate { | |
| font-size: 20px; | |
| overflow: visible; | |
| border-radius: 4px; | |
| background-color: transparent; | |
| position: relative; | |
| border: 1.5px solid white; | |
| margin-top: 15px; | |
| margin-bottom: 15px; | |
| height: 40px; | |
| } | |
| .select { | |
| border: none; | |
| border-radius: 4px; | |
| padding: .75rem; | |
| margin: 15px; | |
| background-color: white; | |
| color: #2d7586; | |
| font-size: 20px; | |
| } | |
| .float { | |
| animation: float 4s infinite ease-in-out alternate; | |
| } | |
| @keyframes zoom { | |
| from, | |
| to { | |
| background-color: rgba(170, 178, 189, 0.3); | |
| transform: scale(.6) rotate(0.01deg); | |
| } | |
| 50% { | |
| background-color: rgba(170, 178, 189, 0.6); | |
| transform: scale(.8) rotate(0.01deg); | |
| } | |
| } | |
| .shadow:after { | |
| position: relative; | |
| display: block; | |
| width: 1em; | |
| height: .5em; | |
| border-radius: 100%; | |
| content: ""; | |
| animation: zoom 4s ease-in-out infinite alternate; | |
| } | |
| @keyframes rotateShake { | |
| from { | |
| transform: rotate(-10deg); | |
| } | |
| to { | |
| transform: rotate(10deg); | |
| } | |
| } | |
| @keyframes float { | |
| from, | |
| to { | |
| transform: transofrmY(0); | |
| } | |
| 50% { | |
| transform: translateY(4px); | |
| } | |
| } | |
| @charset "UTF-8"; | |
| /*! | |
| * Flyaway.css (http://takentech.com/flyaway) | |
| * Version: 0.0.2 | |
| * Author: 進擊的燊 | |
| * Author URL: http://takentech.com/ | |
| * Github: https://github.com/lushen/flyaway | |
| * Made available under a MIT License: | |
| * https://www.opensource.org/licenses/mit-license.php | |
| */ | |
| .flyaway { | |
| -webkit-animation-duration: 1s; | |
| animation-duration: 1s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both | |
| } | |
| @-webkit-keyframes pushOut { | |
| 0% { | |
| -webkit-transform: translate(0, 0) rotate(0) scale(1); | |
| transform: translate(0, 0) rotate(0) scale(1) | |
| } | |
| 5% { | |
| -webkit-transform: translate(15px, -2px) rotate(10deg) scale(1.2); | |
| transform: translate(15px, -2px) rotate(10deg) scale(1.2) | |
| } | |
| 20% { | |
| -webkit-transform: translate(130px, -2px) rotate(-20deg) scale(1.5); | |
| transform: translate(130px, -2px) rotate(-20deg) scale(1.5) | |
| } | |
| 40% { | |
| -webkit-transform: translate(280px, -40px) rotate(10deg) scale(.8); | |
| transform: translate(280px, -40px) rotate(10deg) scale(.8); | |
| opacity: .8 | |
| } | |
| 100% { | |
| -webkit-transform: translate(1000px, -200px) rotate(60deg) scale(0); | |
| transform: translate(1000px, -200px) rotate(60deg) scale(0); | |
| opacity: 0 | |
| } | |
| } | |
| @keyframes pushOut { | |
| 0% { | |
| -webkit-transform: translate(0, 0) rotate(0) scale(1); | |
| transform: translate(0, 0) rotate(0) scale(1) | |
| } | |
| 5% { | |
| -webkit-transform: translate(15px, -2px) rotate(10deg) scale(1.2); | |
| transform: translate(15px, -2px) rotate(10deg) scale(1.2) | |
| } | |
| 20% { | |
| -webkit-transform: translate(130px, -2px) rotate(-20deg) scale(1.5); | |
| transform: translate(130px, -2px) rotate(-20deg) scale(1.5) | |
| } | |
| 40% { | |
| -webkit-transform: translate(280px, -40px) rotate(10deg) scale(.8); | |
| transform: translate(280px, -40px) rotate(10deg) scale(.8); | |
| opacity: .8 | |
| } | |
| 100% { | |
| -webkit-transform: translate(1000px, -200px) rotate(60deg) scale(0); | |
| transform: translate(1000px, -200px) rotate(60deg) scale(0); | |
| opacity: 0 | |
| } | |
| } | |
| @-webkit-keyframes popUp { | |
| 0% { | |
| -webkit-transform: translate(0, 0) scale(1); | |
| transform: translate(0, 0) scale(1) | |
| } | |
| 10% { | |
| -webkit-transform: translate(-10px, 10px) scale(1); | |
| transform: translate(-10px, 10px) scale(1) | |
| } | |
| 50% { | |
| -webkit-transform: translate(-15px, 15px) scale(1); | |
| transform: translate(-15px, 15px) scale(1); | |
| opacity: 1 | |
| } | |
| 100% { | |
| -webkit-transform: translate(500px, -500px) scale(0); | |
| transform: translate(500px, -500px) scale(0); | |
| opacity: 0 | |
| } | |
| } | |
| @keyframes popUp { | |
| 0% { | |
| -webkit-transform: translate(0, 0) scale(1); | |
| transform: translate(0, 0) scale(1) | |
| } | |
| 10% { | |
| -webkit-transform: translate(-10px, 10px) scale(1); | |
| transform: translate(-10px, 10px) scale(1) | |
| } | |
| 50% { | |
| -webkit-transform: translate(-15px, 15px) scale(1); | |
| transform: translate(-15px, 15px) scale(1); | |
| opacity: 1 | |
| } | |
| 100% { | |
| -webkit-transform: translate(500px, -500px) scale(0); | |
| transform: translate(500px, -500px) scale(0); | |
| opacity: 0 | |
| } | |
| } | |
| .flyaway.pushOut { | |
| -webkit-animation-name: pushOut; | |
| animation-name: pushOut; | |
| -webkit-animation-timing-function: linear; | |
| animation-timing-function: lienar | |
| } | |
| .flyaway.popUp { | |
| -webkit-animation-name: popUp; | |
| animation-name: popUp | |
| } | |
| .flyaway.rotateShake { | |
| -webkit-animation-name: rotateShake; | |
| animation-name: rotateShake | |
| } | |
| .flyaway.linearShake { | |
| -webkit-animation-name: linearShake; | |
| animation-name: linearShake | |
| } | |
| @-webkit-keyframes linearShake { | |
| 10%, | |
| 20%, | |
| 30%, | |
| 40%, | |
| 50%, | |
| 60%, | |
| 70%, | |
| 80%, | |
| 90%, | |
| from, | |
| to { | |
| -webkit-transform: translateX(-4px); | |
| transform: translateX(-4px) | |
| } | |
| 15%, | |
| 25%, | |
| 35%, | |
| 45%, | |
| 5%, | |
| 55%, | |
| 65%, | |
| 75%, | |
| 85%, | |
| 95% { | |
| -webkit-transform: translateX(4px); | |
| transform: translateX(4px) | |
| } | |
| } | |
| @keyframes linearShake { | |
| 10%, | |
| 20%, | |
| 30%, | |
| 40%, | |
| 50%, | |
| 60%, | |
| 70%, | |
| 80%, | |
| 90%, | |
| from, | |
| to { | |
| -webkit-transform: translateX(-4px); | |
| transform: translateX(-4px) | |
| } | |
| 15%, | |
| 25%, | |
| 35%, | |
| 45%, | |
| 5%, | |
| 55%, | |
| 65%, | |
| 75%, | |
| 85%, | |
| 95% { | |
| -webkit-transform: translateX(4px); | |
| transform: translateX(4px) | |
| } | |
| } | |
| @-webkit-keyframes rotateShake { | |
| 10%, | |
| 20%, | |
| 30%, | |
| 40%, | |
| 50%, | |
| 60%, | |
| 70%, | |
| 80%, | |
| 90%, | |
| from, | |
| to { | |
| -webkit-transform: rotate(-10deg); | |
| transform: rotate(-10deg) | |
| } | |
| 15%, | |
| 25%, | |
| 35%, | |
| 45%, | |
| 5%, | |
| 55%, | |
| 65%, | |
| 75%, | |
| 85%, | |
| 95% { | |
| -webkit-transform: rotate(10deg); | |
| transform: rotate(10deg) | |
| } | |
| } | |
| @keyframes rotateShake { | |
| 10%, | |
| 20%, | |
| 30%, | |
| 40%, | |
| 50%, | |
| 60%, | |
| 70%, | |
| 80%, | |
| 90%, | |
| from, | |
| to { | |
| -webkit-transform: rotate(-10deg); | |
| transform: rotate(-10deg) | |
| } | |
| 15%, | |
| 25%, | |
| 35%, | |
| 45%, | |
| 5%, | |
| 55%, | |
| 65%, | |
| 75%, | |
| 85%, | |
| 95% { | |
| -webkit-transform: rotate(10deg); | |
| transform: rotate(10deg) | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment