Last active
December 27, 2018 11:00
-
-
Save zet777/7fbca9d9d2a129c12e8fae9192338d9b to your computer and use it in GitHub Desktop.
Анимация прямоугольника с появлением надписи.
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 { | |
| height: 100%; | |
| background: linear-gradient(to bottom, #d7ae6c 0%, #2c2416 100%)!important; | |
| } | |
| .fut-block:hover{ | |
| border: 6px solid rgba(255,255,255,.0); | |
| } | |
| .fut-block{ | |
| transition: all 1s; | |
| border: 2px solid #000; | |
| width: 360px; | |
| height: 60px; | |
| margin: 0 auto; | |
| overflow: hidden; | |
| font-size: 15px; | |
| color: #fff; | |
| padding: 12px 5px; | |
| position: relative; | |
| } | |
| .top{ | |
| display: flex; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .top > *{ | |
| overflow: hidden; | |
| } | |
| .bottom-line{ | |
| transition: all .5s .2s; | |
| margin: 0 auto; | |
| background: #fff; | |
| height: 0px; | |
| width: 0%; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translate(-50%, 0%); | |
| } | |
| .center-line{ | |
| transition: all 1s .1s; | |
| background: #fff; | |
| height: 400px; | |
| width: 5px; | |
| margin: 0 4px; | |
| transform: translate(-100%, -20%); | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| } | |
| .first{ | |
| position: absolute; | |
| right: calc(50% + 0px); | |
| } | |
| .second{ | |
| position: absolute; | |
| left: calc(50% + 0px); | |
| } | |
| .first-text{ | |
| transition: all .5s .2s; | |
| transform: translateX(100%); | |
| } | |
| .second-text{ | |
| transition: all .5s .2s; | |
| transform: translateX(-100%); | |
| } | |
| .fut-block:hover .second-text{ | |
| transition: all .5s linear .4s; | |
| transform: translateX(0%); | |
| } | |
| .fut-block:hover .first-text{ | |
| transition: all .5s linear .4s; | |
| transform: translateX(0%); | |
| } | |
| .fut-block:hover .center-line{ | |
| transition: all 1s linear .0s; | |
| transform: translate(-100%, 100%); | |
| } | |
| .fut-block:hover .bottom-line{ | |
| transition: all .5s 1s; | |
| transform: translate(-50%, 0%); | |
| width: 100%; | |
| height: 5px; | |
| } | |
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> | |
| <style> | |
| @font-face { | |
| font-family: "FontAwesome"; | |
| font-style: normal; | |
| font-weight: normal; | |
| src: url("/.s/src/panel-v2/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), | |
| url("/.s/src/panel-v2/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), | |
| url("/.s/src/panel-v2/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), | |
| url("/.s/src/panel-v2/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), | |
| url("/.s/src/panel-v2/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg"); | |
| } | |
| </style> | |
| <table border="0" width="100%" height="75%"> | |
| <tr> | |
| <td align="center"> | |
| <div class="animated fadeInDownBig">$MAINTENANCE$</div> | |
| <div class="animated zoomIn">$ADMIN_LOGIN_FORM$</div> | |
| <div class="animated rollIn" style ="margin-top:17px">$POWERED_BY$</div> | |
| </td> | |
| </tr> | |
| </table> | |
| <div class="fut-block animated rollIn"> | |
| <div class="top"> | |
| <div class="first"> | |
| <div class="first-text"><span class="none"></span>Роман Ташев | Все пр</div> | |
| </div> | |
| <div> | |
| <div class="center-line"></div> | |
| </div> | |
| <div class="second"> | |
| <div class="second-text">ава защищены © 2018</div> | |
| </div> | |
| </div> | |
| <div class="bottom-line"></div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment