123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- <style>
- .offline {
- display: flex;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 21;
- pointer-events: none;
- background-color: rgb(34, 35, 31);
- }
- @keyframes screen-turn-on {
- 0% {
- width: 0%;
- height: 1px;
- border-radius: 0px;
- background-color: #b0b0b0;
- }
- 50% {
- width: 100%;
- height: 1px;
- border-radius: 0px;
- background-color: #b0b0b0;
- }
- 51% {
- width: 100%;
- height: 1px;
- border-radius: 0px;
- background-color: #b0b0b0;
- }
- 70% {
- width: 100%;
- height: 1px;
- border-radius: 0px;
- background-color: #b0b0b0;
- }
- 80% {
- width: 100%;
- height: 100%;
- border-radius: 5px;
- background-color: #b0b0b0;
- }
- 100% {
- width: 100%;
- height: 100%;
- border-radius: 5px;
- background-color: #454545;
- }
- }
- @keyframes shiver {
- 0% {
- transform: translate(1px, 1px);
- text-shadow: 6px 0 rgba(255, 0, 0, 0.9), -6px 0 rgba(0, 0, 255, 0.9);
- }
- 5% {
- transform: translate(1px, 1px);
- text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
- }
- 10% {
- transform: translate(1px, 1px);
- text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
- }
- 15% {
- transform: translate(1px, 1px);
- text-shadow: 7px 0 rgba(255, 0, 0, 0.9), -7px 0 rgba(0, 0, 255, 0.9);
- }
- 20% {
- transform: translate(1px, 2px);
- text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
- }
- 25% {
- transform: translate(1px, 2px);
- text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
- }
- 30% {
- transform: translate(1px, 2px);
- text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
- }
- 35% {
- transform: translate(1px, 2px);
- text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
- }
- 40% {
- transform: translate(2px, 1px);
- text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
- }
- 45% {
- transform: translate(2px, 1px);
- text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
- }
- 50% {
- transform: translate(2px, 1px);
- text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
- }
- 55% {
- transform: translate(2px, 1px);
- text-shadow: 4px 0 rgba(255, 0, 0, 0.9), -4px 0 rgba(0, 0, 255, 0.9);
- }
- 60% {
- transform: translate(1px, 1px);
- text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
- }
- 65% {
- transform: translate(1px, 1px);
- text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
- }
- 70% {
- transform: translate(1px, 1px);
- text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
- }
- 75% {
- transform: translate(1px, 1px);
- text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
- }
- 80% {
- transform: translate(2px, 1px);
- text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
- }
- 85% {
- transform: translate(2px, 1px);
- text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
- }
- 90% {
- transform: translate(2px, 2px);
- text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
- }
- 95% {
- transform: translate(2px, 2px);
- text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
- }
- 100% {
- transform: translate(1px, 2px);
- text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
- }
- }
- #screen:after {
- content: "";
- position: absolute;
- top: 0px;
- right: 0px;
- bottom: 0px;
- left: 0px;
- background-image: -webkit-linear-gradient(
- bottom,
- rgba(255, 255, 255, 0.2) 33.3%,
- rgba(255, 255, 255, 0.4) 33.3%,
- rgba(255, 255, 255, 0.4) 66.7%,
- rgba(255, 255, 255, 0.6) 66.7%
- ),
- -webkit-linear-gradient(left, rgba(255, 0, 0, 0.7) 33.3%, rgba(
- 0,
- 255,
- 0,
- 0.7
- )
- 33.3%, rgba(0, 255, 0, 0.6) 66.7%, rgba(0, 0, 255, 0.6) 66.7%);
- background-image: -moz-linear-gradient(
- bottom,
- rgba(255, 255, 255, 0.2) 33.3%,
- rgba(255, 255, 255, 0.4) 33.3%,
- rgba(255, 255, 255, 0.4) 66.7%,
- rgba(255, 255, 255, 0.6) 66.7%
- ),
- -webkit-linear-gradient(left, rgba(255, 0, 0, 0.7) 33.3%, rgba(
- 0,
- 255,
- 0,
- 0.7
- )
- 33.3%, rgba(0, 255, 0, 0.6) 66.7%, rgba(0, 0, 255, 0.6) 66.7%);
- background-image: linear-gradient(
- to top,
- rgba(255, 255, 255, 0.2) 33.3%,
- rgba(255, 255, 255, 0.4) 33.3%,
- rgba(255, 255, 255, 0.4) 66.7%,
- rgba(255, 255, 255, 0.6) 66.7%
- ),
- linear-gradient(
- to right,
- rgba(255, 0, 0, 0.7) 33.3%,
- rgba(0, 255, 0, 0.7) 33.3%,
- rgba(0, 255, 0, 0.6) 66.7%,
- rgba(0, 0, 255, 0.6) 66.7%
- );
- background-size: 3px 3px;
- mix-blend-mode: multiply;
- background-color: #00f;
- }
- #screen {
- height: 100%;
- width: 100%;
- background: #0a0a0a;
- color: #fff;
- text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
- border-radius: 5px;
- }
- #screen {
- background-color: #222;
- }
- #content-holder {
- padding: 0;
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- align-content: center;
- text-align: center;
- overflow: hidden;
- }
- #content {
- background-color: #b0b0b0;
- display: flex;
- justify-content: center;
- align-items: center;
- align-content: center;
- text-align: center;
- overflow: hidden;
- height: 0;
- position: relative;
- }
- #content {
- animation: screen-turn-on 0.4s linear 0.5s 1 forwards;
- }
- /* #channel {
- position: absolute;
- top: 15px;
- left: 25px;
- font-size: 2rem;
- font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
- "Courier New", monospace;
- vertical-align: middle;
- color: #fbff68;
- animation: shiver 1s linear 0.5s infinite;
- } */
- #text {
- color: #ededed;
- text-align: left;
- font-weight: 200;
- /* text-transform: uppercase; */
- font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
- "Courier New", monospace;
- font-size: 3rem;
- animation: shiver 1s linear 0.5s infinite;
- }
- </style>
- <div class="offline">
- <div id="screen">
- <div id="content-holder">
- <div id="content">
- <div id="app">
- <!-- <div id="channel">OT CHANNEL</div> -->
- <div id="text">Non siamo live!</div>
- </div>
- </div>
- </div>
- </div>
- </div>
|