Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url('https://fonts.googleapis.com/css?family=Almendra|Almendra+SC');
- .widget-AlertBox {
- position: relative;
- }
- body,
- html {
- height: 100%;
- width: 100%;
- overflow: hidden;
- }
- #wrap {
- position: relative;
- height: 100%;
- width: 100%;
- }
- #alert-box {
- height: 100%;
- width: 100%;
- position: absolute;
- }
- #alert-box.hidden,
- .hidden {
- opacity: 0;
- }
- #alert-text {
- text-align: center;
- font-family: 'Almendra SC', serif;
- color: #e3e6e8;
- text-shadow: 2px 0px #676d6e;
- }
- #alert-message-box {
- position: absolute;
- width: 470px; height: 54px;
- line-height: 54px;
- left: 50.2%; top: 141px;
- transform: translate(-50%, -50%);
- overflow: hidden;
- text-transform: uppercase;
- letter-spacing: 0.3em;
- /*
- Container animation goes here
- */
- }
- #alert-user-message-box {
- position: absolute;
- width: 500px; height: 125px;
- left: 50%; top: 246px;
- transform: translate(-50%, -50%);
- overflow: hidden;
- /*
- Container animation goes here, fade?
- */
- }
- .alert-message-anim {
- /*Message text animation goes here*/
- opacity: 0;
- animation: fadeIn 7s linear;
- }
- .alert-user-message-anim {
- /*User Message text animation goes here*/
- opacity: 0;
- animation: fadeIn 7s linear;
- }
- #alert-message {
- }
- #alert-user-message {
- font-family: 'Almendra', serif;
- }
- #alert-user-message img {
- vertical-align: middle;
- height: 1em;
- }
- #alert-image {
- position: relative;
- }
- #alert-image video {
- position: absolute;
- width: 100%; height: 100%;
- top: 0; left: 0;
- opacity: 0;
- animation: fadeOut 7s linear 0s 1; -webkit-animation: fadeOut 7s linear 0s 1;
- }
- #alert-message > span > span {
- display: inline-block;
- }
- #alert-image {
- z-index: 6;
- position: relative;
- }
- #alert-text {
- z-index: 6;
- position: relative;
- }
- #alert-text-wrap {
- z-index: 6;
- position: relative;
- }
- @-webkit-keyframes fadeIn {
- 17% {opacity: 0; animation-timing-function: cubic-bezier(0.56, 0.00, 0.19, 1.00);}
- 24% {opacity: 1; animation-timing-function: linear;}
- 72% {opacity: 1; animation-timing-function: cubic-bezier(0.94, 0.00, 0.43, 1.00);}
- 77% {opacity: 0; animation-timing-function: linear;}
- }
- @keyframes fadeIn {
- 17% {opacity: 0; animation-timing-function: cubic-bezier(0.56, 0.00, 0.19, 1.00);}
- 24% {opacity: 1; animation-timing-function: linear;}
- 72% {opacity: 1; animation-timing-function: cubic-bezier(0.94, 0.00, 0.43, 1.00);}
- 77% {opacity: 0; animation-timing-function: linear;}
- }
- @-webkit-keyframes fadeOut {
- 0% {opacity: 1; animation-timing-function: linear;}
- 90% {opacity: 1; animation-timing-function: linear;}
- 95% {opacity: 0; animation-timing-function: linear;}
- }
- @keyframes fadeOut {
- 0% {opacity: 1; animation-timing-function: linear;}
- 90% {opacity: 1; animation-timing-function: linear;}
- 95% {opacity: 0; animation-timing-function: linear;}
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement