Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .widget-AlertBox {
- position: relative;
- }
- body,
- html {
- height: 100%;
- width: 100%;
- overflow: hidden;
- text-transform: uppercase;
- font-family: 'Roboto', sans-serif;
- }
- #wrap {
- position: relative;
- height: 100%;
- width: 100%;
- }
- #alert-box {
- height: 100%;
- width: 100%;
- position: absolute;
- }
- #alert-box.hidden,
- .hidden {
- opacity: 0;
- -webkit-animation-name: hidden;
- -webkit-animation-duration: 9s;
- animation-name: hidden;
- animation-duration: 9s;
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- }
- @-webkit-keyframes hidden {
- 0% {opacity: 0;}
- 10% {opacity: 0;}
- 20% {opacity: 1;}
- 80% {opacity: 1;}
- 90% {opacity: 0;}
- 100% {opacity: 0;}
- }
- @keyframes hidden {
- 0% {opacity; 0;}
- 10% {opacity: 0;}
- 20% {opacity: 1;}
- 80% {opacity: 1;}
- 90% {opacity: 0;}
- 100% {opacity: 0;}
- }
- #alert-text {
- /*
- display: none;
- margin: 0;
- padding: 0;
- animation-iteration-count: 1;
- animation-fill-mode: backwards;
- */
- /* hide the name until the animation starts */
- display: none;
- text-align: left;
- background-color: #FFFFFF;
- /* animation */
- -webkit-animation-name: follower;
- -webkit-animation-duration: 9s;
- animation-name: follower;
- animation-duration: 9s;
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- }
- @-webkit-keyframes follower {
- 0% {height: 0; box-shadow: 0; }
- 15% {height: 76px; box-shadow: 10px -11px 9px 10px rgba(0,0,0,0.65); }
- 85% {height: 76px; box-shadow: 10px -11px 9px 10px rgba(0,0,0,0.65); }
- 100% {height: 0; box-shadow: 0; }
- }
- @keyframes follower {
- 0% {height: 0; box-shadow: 0; }
- 15% {height: 76px; box-shadow: 10px -11px 9px 10px rgba(0,0,0,0.65); }
- 85% {height: 76px; box-shadow: 10px -11px 9px 10px rgba(0,0,0,0.65); }
- 100% {height: 0; box-shadow: 0; }
- }
- #alert-message {
- text-align: left;
- margin-top: 20px;
- }
- #alert-user-message {
- text-align: right;
- }
- #alert-user-message img {
- vertical-align: middle;
- }
- #alert-image {
- position: relative;
- }
- #alert-image video {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- }
- #alert-message > span > span {
- display: inline-block;
- margin-top: -107px;
- margin-left: 80px;
- }
- #alert-image {
- z-index: 6;
- position: relative;
- }
- #alert-text {
- position: absolute;
- }
- #alert-text-wrap {
- z-index: 6;
- position: relative;
- }
- #just-followed {
- z-index: -999;
- position: relative;
- top: -100px;
- left: 595px;
- text-align: left;
- color: #d96363 !important;
- font-weight: 400 !important;
- font-size: 32px !important;
- padding: 15px;
- text-transform: lowercase;
- opacity: 0;
- box-shadow: 5px 10px 12px 4px rgba(0,0,0,0.65);
- /* hide by default */
- /*display: none;*/
- /* animation */
- -webkit-animation-name: motion;
- -webkit-animation-duration: 10s;
- -webkit-animation-delay: 1.5s;
- animation-name: motion;
- animation-duration: 9s;
- animation-delay: 1.5s;
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- }
- @-webkit-keyframes motion {
- 0% {top: -100px; opacity: 0; background-color: transparent; }
- 10% {opacity: 1; }
- 15% {top: -30px; background-color: white; }
- 60% {top:-30px; }
- 65% {top: -100px;}
- 65% {opacity: 1;}
- 70% {opacity: 0;}
- 90% {opacity: 0;}
- 95% {opacity: 0; background-color: white; }
- 100% {top: -100px; background-color: transparent; }
- }
- #follow {
- z-index: 10;
- position: relative;
- top: -8px;
- left: -370px;
- font-size: 70px !important;
- font-weight: 600;
- color: #d96363 !important;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement