Skip to content

Instantly share code, notes, and snippets.

@starpause
Created May 18, 2021 05:27
Show Gist options
  • Save starpause/fd6b3fd80c226c68d625bc2c782e1bf9 to your computer and use it in GitHub Desktop.
Save starpause/fd6b3fd80c226c68d625bc2c782e1bf9 to your computer and use it in GitHub Desktop.
birhtday 70
<canvas id="canv"></canvas>
<div class="snowflakes">
<div class="snowflake">
<img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="60" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
</div>
<div class="snowflake">
<img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="50" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
</div>
<div class="snowflake">
<img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="70" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
</div>
<div class="snowflake">
<img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="50" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
</div>
<div class="snowflake">
<img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="50" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
</div>
<div class="snowflake">
<img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="50" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
</div>
<div class="snowflake">
<img src="https://proxy.everskies.com/a/https%3A%2F%2Fimg.cloudygif.com%2Fsmall%2Ff3420fa09ea62f55.gif" width="90" alt="f3420fa09ea62f55.gif" />
</div>
<div class="snowflake">
<img src="https://stationeers-wiki.com/images/d/da/Flowers.gif" width="150" alt="f3420fa09ea62f55.gif" />
</div>
<div class="snowflake">
<img src="https://stationeers-wiki.com/images/d/da/Flowers.gif" width="260" alt="f3420fa09ea62f55.gif" />
</div>
<div class="snowflake">
<img src="https://stationeers-wiki.com/images/d/da/Flowers.gif" width="170" alt="f3420fa09ea62f55.gif" />
</div>
<div class="snowflake">
<img src="https://stationeers-wiki.com/images/d/da/Flowers.gif" width="190" alt="f3420fa09ea62f55.gif" />
</div>
</div>
<div class="msg">
<span title="H"></span>
<span title="A"></span>
<span title="P"></span>
<span title="i"></span>
<span title=" "></span>
<span title=" "></span>
<span title="7"></span>
<span title="d"></span>
<br>
<span title=" "></span>
<span title=" "></span>
<span title="m"></span>
<span title="0"></span>
<span title="m"></span>
<span title="^"></span>
<span title="◡"></span>
<span title="^"></span>
</div>
const res = Math.ceil(window.innerHeight / 60);
let w = Math.ceil(window.innerWidth / res);
let h = Math.ceil(window.innerHeight / res);
const $b = document.querySelector('body');
const $c = document.createElement('canvas');
const ctx = $c.getContext('2d');
$c.width = window.innerWidth;
$c.height = window.innerHeight;
$b.appendChild($c);
const speed = 0.0005;
function setSize () {
w = Math.ceil(window.innerWidth / res);
h = Math.ceil(window.innerHeight / res);
$c.width = window.innerWidth;
$c.height = window.innerHeight;
}
let progress = 0;
noise.seed(Math.random());
function doit () {
progress += speed;
for (let x = 0; x < w; x++) {
for (let y = 0; y < h; y++) {
const sim = noise.simplex3((progress + x) / (w * 1.5), progress + y / (h * 1.5), progress);
//const per = noise.perlin3((progress + x) / (w * 1.25), progress + y / (h * 1.25), progress);
ctx.fillStyle = `hsl(${(1360 * Math.abs(sim)) % 360},100%,73%)`;
ctx.fillRect(x * res,y * res,res,res);
}
}
requestAnimationFrame(doit);
}
doit();
document.addEventListener('click', function(){
noise.seed(Math.random());
});
setSize();
window.addEventListener('resize', setSize);
<script src="https://cdn.rawgit.com/josephg/noisejs/master/perlin.js"></script>
@import url(https://fonts.googleapis.com/css?family=PT+Sans:700|Pacifico|Changa+One);
canvas{
z-index:99;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background: linear-gradient(#B7B0E3, #FFD3D6);
}
body{
background:transparent;
}
/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial;
text-shadow: 0 0 1px #000;
}
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-40%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-40%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
/* Demo Purpose Only*/
.demo {
font-family: 'Raleway', sans-serif;
color:#fff;
display: block;
margin: 0 auto;
padding: 15px 0;
text-align: center;
}
.demo a{
font-family: 'Raleway', sans-serif;
color: #000;
}
body {
overflow: hidden;
}
.page-bg{
z-index: 70;
}
.msg{
z-index: 70;
}
h2 {
text-shadow: 3px 3px #ff0000;
-webkit-text-stroke: 2px black;
position: absolute;
z-index: 2;
margin: 0;
font-size: 14.333vw;
left: 50%; top: 50%;
transform: translate(-50%,-50%);
color: #00f;
mix-blend-mode: difference;
background: #000;
line-height: 1;
padding: 0.25em;
}
h1 {
text-shadow: 3px 3px #ff0000;
-webkit-text-stroke: 2px black;
position: absolute;
z-index: 2;
margin: 0;
font-size: 43.333vw;
left: 50%; top: 50%;
transform: translate(-50%,-50%);
color: #00f;
mix-blend-mode: difference;
background: #fff;
line-height: 1;
padding: 0.25em;
}
canvas {
z-index: 1;
position: absolute;
}
.msg {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
line-height: 200px;
margin: -100px 0 0 -300px;
text-align: center;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform-origin: 50% 80%;
-moz-transform-origin: 50% 80%;
-o-transform-origin: 50% 80%;
-ms-transform-origin: 50% 80%;
transform-origin: 50% 80%;
transform-type: preserve-3d;
}
.msg span {
display: inline-block;
font: 110px serif;
position: relative;
border-bottom: 5px solid #000;
border-top: 5px solid #000;
-webkit-box-shadow: 0 0 25px rgba(0,0,0,0.3);
box-shadow: 0 0 25px rgba(0,0,0,0.3);
background: #fff;
-webkit-animation: pulsate 3s infinite linear;
-moz-animation: pulsate 3s infinite linear;
-o-animation: pulsate 3s infinite linear;
-ms-animation: pulsate 3s infinite linear;
animation: pulsate 3s infinite linear;
}
.msg span:nth-of-type(1) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
.msg span:nth-of-type(2) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.msg span:nth-of-type(3) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.msg span:nth-of-type(4) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.msg span:nth-of-type(5) {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-o-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
}
.msg span:nth-of-type(6) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.msg span:nth-of-type(7) {
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
-ms-animation-delay: 7s;
animation-delay: 7s;
}
.msg span:nth-of-type(8) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
.msg span:nth-of-type(9) {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.msg span:nth-of-type(10) {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-o-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
}
.msg span:nth-of-type(11) {
-webkit-animation-delay: 11s;
-moz-animation-delay: 11s;
-o-animation-delay: 11s;
-ms-animation-delay: 11s;
animation-delay: 11s;
}
.msg span:nth-of-type(12) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.msg span:nth-of-type(13) {
-webkit-animation-delay: 13s;
-moz-animation-delay: 13s;
-o-animation-delay: 13s;
-ms-animation-delay: 13s;
animation-delay: 13s;
}
.msg span:nth-of-type(14) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-o-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.msg span:nth-of-type(15) {
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-o-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
.msg span:nth-of-type(16) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
.msg span:nth-of-type(17) {
-webkit-animation-delay: 17s;
-moz-animation-delay: 17s;
-o-animation-delay: 17s;
-ms-animation-delay: 17s;
animation-delay: 17s;
}
.msg span:nth-of-type(18) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.msg span:nth-of-type(19) {
-webkit-animation-delay: 19s;
-moz-animation-delay: 19s;
-o-animation-delay: 19s;
-ms-animation-delay: 19s;
animation-delay: 19s;
}
.msg span:nth-of-type(20) {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
}
.msg span:nth-of-type(21) {
-webkit-animation-delay: 21s;
-moz-animation-delay: 21s;
-o-animation-delay: 21s;
-ms-animation-delay: 21s;
animation-delay: 21s;
}
.msg span:nth-of-type(22) {
-webkit-animation-delay: 22s;
-moz-animation-delay: 22s;
-o-animation-delay: 22s;
-ms-animation-delay: 22s;
animation-delay: 22s;
}
.msg span:nth-of-type(23) {
-webkit-animation-delay: 23s;
-moz-animation-delay: 23s;
-o-animation-delay: 23s;
-ms-animation-delay: 23s;
animation-delay: 23s;
}
.msg span:nth-of-type(24) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.msg span:nth-of-type(25) {
-webkit-animation-delay: 25s;
-moz-animation-delay: 25s;
-o-animation-delay: 25s;
-ms-animation-delay: 25s;
animation-delay: 25s;
}
.msg span:nth-of-type(26) {
-webkit-animation-delay: 26s;
-moz-animation-delay: 26s;
-o-animation-delay: 26s;
-ms-animation-delay: 26s;
animation-delay: 26s;
}
.msg span:nth-of-type(27) {
-webkit-animation-delay: 27s;
-moz-animation-delay: 27s;
-o-animation-delay: 27s;
-ms-animation-delay: 27s;
animation-delay: 27s;
}
.msg span:nth-of-type(28) {
-webkit-animation-delay: 28s;
-moz-animation-delay: 28s;
-o-animation-delay: 28s;
-ms-animation-delay: 28s;
animation-delay: 28s;
}
.msg span:nth-of-type(29) {
-webkit-animation-delay: 29s;
-moz-animation-delay: 29s;
-o-animation-delay: 29s;
-ms-animation-delay: 29s;
animation-delay: 29s;
}
.msg span:nth-of-type(30) {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.msg span:nth-of-type(31) {
-webkit-animation-delay: 31s;
-moz-animation-delay: 31s;
-o-animation-delay: 31s;
-ms-animation-delay: 31s;
animation-delay: 31s;
}
.msg span:nth-of-type(32) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
.msg span:nth-of-type(33) {
-webkit-animation-delay: 33s;
-moz-animation-delay: 33s;
-o-animation-delay: 33s;
-ms-animation-delay: 33s;
animation-delay: 33s;
}
.msg span:nth-of-type(34) {
-webkit-animation-delay: 34s;
-moz-animation-delay: 34s;
-o-animation-delay: 34s;
-ms-animation-delay: 34s;
animation-delay: 34s;
}
.msg span:nth-of-type(35) {
-webkit-animation-delay: 35s;
-moz-animation-delay: 35s;
-o-animation-delay: 35s;
-ms-animation-delay: 35s;
animation-delay: 35s;
}
.msg span:nth-of-type(36) {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.msg span:nth-of-type(37) {
-webkit-animation-delay: 37s;
-moz-animation-delay: 37s;
-o-animation-delay: 37s;
-ms-animation-delay: 37s;
animation-delay: 37s;
}
.msg span:nth-of-type(38) {
-webkit-animation-delay: 38s;
-moz-animation-delay: 38s;
-o-animation-delay: 38s;
-ms-animation-delay: 38s;
animation-delay: 38s;
}
.msg span:nth-of-type(39) {
-webkit-animation-delay: 39s;
-moz-animation-delay: 39s;
-o-animation-delay: 39s;
-ms-animation-delay: 39s;
animation-delay: 39s;
}
.msg span:nth-of-type(40) {
-webkit-animation-delay: 40s;
-moz-animation-delay: 40s;
-o-animation-delay: 40s;
-ms-animation-delay: 40s;
animation-delay: 40s;
}
.msg span:nth-of-type(41) {
-webkit-animation-delay: 41s;
-moz-animation-delay: 41s;
-o-animation-delay: 41s;
-ms-animation-delay: 41s;
animation-delay: 41s;
}
.msg span:nth-of-type(42) {
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
.msg span:nth-of-type(43) {
-webkit-animation-delay: 43s;
-moz-animation-delay: 43s;
-o-animation-delay: 43s;
-ms-animation-delay: 43s;
animation-delay: 43s;
}
.msg span:nth-of-type(44) {
-webkit-animation-delay: 44s;
-moz-animation-delay: 44s;
-o-animation-delay: 44s;
-ms-animation-delay: 44s;
animation-delay: 44s;
}
.msg span:nth-of-type(45) {
-webkit-animation-delay: 45s;
-moz-animation-delay: 45s;
-o-animation-delay: 45s;
-ms-animation-delay: 45s;
animation-delay: 45s;
}
.msg span:nth-of-type(46) {
-webkit-animation-delay: 46s;
-moz-animation-delay: 46s;
-o-animation-delay: 46s;
-ms-animation-delay: 46s;
animation-delay: 46s;
}
.msg span:nth-of-type(47) {
-webkit-animation-delay: 47s;
-moz-animation-delay: 47s;
-o-animation-delay: 47s;
-ms-animation-delay: 47s;
animation-delay: 47s;
}
.msg span:nth-of-type(48) {
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
-ms-animation-delay: 48s;
animation-delay: 48s;
}
.msg span:nth-of-type(49) {
-webkit-animation-delay: 49s;
-moz-animation-delay: 49s;
-o-animation-delay: 49s;
-ms-animation-delay: 49s;
animation-delay: 49s;
}
.msg span:nth-of-type(50) {
-webkit-animation-delay: 50s;
-moz-animation-delay: 50s;
-o-animation-delay: 50s;
-ms-animation-delay: 50s;
animation-delay: 50s;
}
.msg span:nth-of-type(51) {
-webkit-animation-delay: 51s;
-moz-animation-delay: 51s;
-o-animation-delay: 51s;
-ms-animation-delay: 51s;
animation-delay: 51s;
}
.msg span:nth-of-type(52) {
-webkit-animation-delay: 52s;
-moz-animation-delay: 52s;
-o-animation-delay: 52s;
-ms-animation-delay: 52s;
animation-delay: 52s;
}
.msg span:nth-of-type(53) {
-webkit-animation-delay: 53s;
-moz-animation-delay: 53s;
-o-animation-delay: 53s;
-ms-animation-delay: 53s;
animation-delay: 53s;
}
.msg span:nth-of-type(54) {
-webkit-animation-delay: 54s;
-moz-animation-delay: 54s;
-o-animation-delay: 54s;
-ms-animation-delay: 54s;
animation-delay: 54s;
}
.msg span:nth-of-type(55) {
-webkit-animation-delay: 55s;
-moz-animation-delay: 55s;
-o-animation-delay: 55s;
-ms-animation-delay: 55s;
animation-delay: 55s;
}
.msg span:nth-of-type(56) {
-webkit-animation-delay: 56s;
-moz-animation-delay: 56s;
-o-animation-delay: 56s;
-ms-animation-delay: 56s;
animation-delay: 56s;
}
.msg span:nth-of-type(57) {
-webkit-animation-delay: 57s;
-moz-animation-delay: 57s;
-o-animation-delay: 57s;
-ms-animation-delay: 57s;
animation-delay: 57s;
}
.msg span:nth-of-type(58) {
-webkit-animation-delay: 58s;
-moz-animation-delay: 58s;
-o-animation-delay: 58s;
-ms-animation-delay: 58s;
animation-delay: 58s;
}
.msg span:nth-of-type(59) {
-webkit-animation-delay: 59s;
-moz-animation-delay: 59s;
-o-animation-delay: 59s;
-ms-animation-delay: 59s;
animation-delay: 59s;
}
.msg span:nth-of-type(60) {
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.msg span:nth-of-type(61) {
-webkit-animation-delay: 61s;
-moz-animation-delay: 61s;
-o-animation-delay: 61s;
-ms-animation-delay: 61s;
animation-delay: 61s;
}
.msg span:nth-of-type(62) {
-webkit-animation-delay: 62s;
-moz-animation-delay: 62s;
-o-animation-delay: 62s;
-ms-animation-delay: 62s;
animation-delay: 62s;
}
.msg span:nth-of-type(63) {
-webkit-animation-delay: 63s;
-moz-animation-delay: 63s;
-o-animation-delay: 63s;
-ms-animation-delay: 63s;
animation-delay: 63s;
}
.msg span:nth-of-type(64) {
-webkit-animation-delay: 64s;
-moz-animation-delay: 64s;
-o-animation-delay: 64s;
-ms-animation-delay: 64s;
animation-delay: 64s;
}
.msg span:nth-of-type(65) {
-webkit-animation-delay: 65s;
-moz-animation-delay: 65s;
-o-animation-delay: 65s;
-ms-animation-delay: 65s;
animation-delay: 65s;
}
.msg span:nth-of-type(66) {
-webkit-animation-delay: 66s;
-moz-animation-delay: 66s;
-o-animation-delay: 66s;
-ms-animation-delay: 66s;
animation-delay: 66s;
}
.msg span:nth-of-type(67) {
-webkit-animation-delay: 67s;
-moz-animation-delay: 67s;
-o-animation-delay: 67s;
-ms-animation-delay: 67s;
animation-delay: 67s;
}
.msg span:nth-of-type(68) {
-webkit-animation-delay: 68s;
-moz-animation-delay: 68s;
-o-animation-delay: 68s;
-ms-animation-delay: 68s;
animation-delay: 68s;
}
.msg span:nth-of-type(69) {
-webkit-animation-delay: 69s;
-moz-animation-delay: 69s;
-o-animation-delay: 69s;
-ms-animation-delay: 69s;
animation-delay: 69s;
}
.msg span:nth-of-type(70) {
-webkit-animation-delay: 70s;
-moz-animation-delay: 70s;
-o-animation-delay: 70s;
-ms-animation-delay: 70s;
animation-delay: 70s;
}
.msg span:nth-of-type(71) {
-webkit-animation-delay: 71s;
-moz-animation-delay: 71s;
-o-animation-delay: 71s;
-ms-animation-delay: 71s;
animation-delay: 71s;
}
.msg span:nth-of-type(72) {
-webkit-animation-delay: 72s;
-moz-animation-delay: 72s;
-o-animation-delay: 72s;
-ms-animation-delay: 72s;
animation-delay: 72s;
}
.msg span:nth-of-type(73) {
-webkit-animation-delay: 73s;
-moz-animation-delay: 73s;
-o-animation-delay: 73s;
-ms-animation-delay: 73s;
animation-delay: 73s;
}
.msg span:nth-of-type(74) {
-webkit-animation-delay: 74s;
-moz-animation-delay: 74s;
-o-animation-delay: 74s;
-ms-animation-delay: 74s;
animation-delay: 74s;
}
.msg span:nth-of-type(75) {
-webkit-animation-delay: 75s;
-moz-animation-delay: 75s;
-o-animation-delay: 75s;
-ms-animation-delay: 75s;
animation-delay: 75s;
}
.msg span:nth-of-type(76) {
-webkit-animation-delay: 76s;
-moz-animation-delay: 76s;
-o-animation-delay: 76s;
-ms-animation-delay: 76s;
animation-delay: 76s;
}
.msg span:nth-of-type(77) {
-webkit-animation-delay: 77s;
-moz-animation-delay: 77s;
-o-animation-delay: 77s;
-ms-animation-delay: 77s;
animation-delay: 77s;
}
.msg span:nth-of-type(78) {
-webkit-animation-delay: 78s;
-moz-animation-delay: 78s;
-o-animation-delay: 78s;
-ms-animation-delay: 78s;
animation-delay: 78s;
}
.msg span:nth-of-type(79) {
-webkit-animation-delay: 79s;
-moz-animation-delay: 79s;
-o-animation-delay: 79s;
-ms-animation-delay: 79s;
animation-delay: 79s;
}
.msg span:nth-of-type(80) {
-webkit-animation-delay: 80s;
-moz-animation-delay: 80s;
-o-animation-delay: 80s;
-ms-animation-delay: 80s;
animation-delay: 80s;
}
.msg span:nth-of-type(81) {
-webkit-animation-delay: 81s;
-moz-animation-delay: 81s;
-o-animation-delay: 81s;
-ms-animation-delay: 81s;
animation-delay: 81s;
}
.msg span:nth-of-type(82) {
-webkit-animation-delay: 82s;
-moz-animation-delay: 82s;
-o-animation-delay: 82s;
-ms-animation-delay: 82s;
animation-delay: 82s;
}
.msg span:nth-of-type(83) {
-webkit-animation-delay: 83s;
-moz-animation-delay: 83s;
-o-animation-delay: 83s;
-ms-animation-delay: 83s;
animation-delay: 83s;
}
.msg span:nth-of-type(84) {
-webkit-animation-delay: 84s;
-moz-animation-delay: 84s;
-o-animation-delay: 84s;
-ms-animation-delay: 84s;
animation-delay: 84s;
}
.msg span:nth-of-type(85) {
-webkit-animation-delay: 85s;
-moz-animation-delay: 85s;
-o-animation-delay: 85s;
-ms-animation-delay: 85s;
animation-delay: 85s;
}
.msg span:nth-of-type(86) {
-webkit-animation-delay: 86s;
-moz-animation-delay: 86s;
-o-animation-delay: 86s;
-ms-animation-delay: 86s;
animation-delay: 86s;
}
.msg span:nth-of-type(87) {
-webkit-animation-delay: 87s;
-moz-animation-delay: 87s;
-o-animation-delay: 87s;
-ms-animation-delay: 87s;
animation-delay: 87s;
}
.msg span:nth-of-type(88) {
-webkit-animation-delay: 88s;
-moz-animation-delay: 88s;
-o-animation-delay: 88s;
-ms-animation-delay: 88s;
animation-delay: 88s;
}
.msg span:nth-of-type(89) {
-webkit-animation-delay: 89s;
-moz-animation-delay: 89s;
-o-animation-delay: 89s;
-ms-animation-delay: 89s;
animation-delay: 89s;
}
.msg span:nth-of-type(90) {
-webkit-animation-delay: 90s;
-moz-animation-delay: 90s;
-o-animation-delay: 90s;
-ms-animation-delay: 90s;
animation-delay: 90s;
}
.msg span:nth-of-type(91) {
-webkit-animation-delay: 91s;
-moz-animation-delay: 91s;
-o-animation-delay: 91s;
-ms-animation-delay: 91s;
animation-delay: 91s;
}
.msg span:nth-of-type(92) {
-webkit-animation-delay: 92s;
-moz-animation-delay: 92s;
-o-animation-delay: 92s;
-ms-animation-delay: 92s;
animation-delay: 92s;
}
.msg span:nth-of-type(93) {
-webkit-animation-delay: 93s;
-moz-animation-delay: 93s;
-o-animation-delay: 93s;
-ms-animation-delay: 93s;
animation-delay: 93s;
}
.msg span:nth-of-type(94) {
-webkit-animation-delay: 94s;
-moz-animation-delay: 94s;
-o-animation-delay: 94s;
-ms-animation-delay: 94s;
animation-delay: 94s;
}
.msg span:nth-of-type(95) {
-webkit-animation-delay: 95s;
-moz-animation-delay: 95s;
-o-animation-delay: 95s;
-ms-animation-delay: 95s;
animation-delay: 95s;
}
.msg span:nth-of-type(96) {
-webkit-animation-delay: 96s;
-moz-animation-delay: 96s;
-o-animation-delay: 96s;
-ms-animation-delay: 96s;
animation-delay: 96s;
}
.msg span:nth-of-type(97) {
-webkit-animation-delay: 97s;
-moz-animation-delay: 97s;
-o-animation-delay: 97s;
-ms-animation-delay: 97s;
animation-delay: 97s;
}
.msg span:nth-of-type(98) {
-webkit-animation-delay: 98s;
-moz-animation-delay: 98s;
-o-animation-delay: 98s;
-ms-animation-delay: 98s;
animation-delay: 98s;
}
.msg span:nth-of-type(99) {
-webkit-animation-delay: 99s;
-moz-animation-delay: 99s;
-o-animation-delay: 99s;
-ms-animation-delay: 99s;
animation-delay: 99s;
}
.msg span:nth-of-type(100) {
-webkit-animation-delay: 100s;
-moz-animation-delay: 100s;
-o-animation-delay: 100s;
-ms-animation-delay: 100s;
animation-delay: 100s;
}
.msg span:first-of-type {
border-left: 5px solid #000;
}
.msg span:last-of-type {
border-right: 5px solid #000;
}
.msg span:nth-of-type(even) {
-webkit-transform: scale(1.1) rotate(2deg);
-moz-transform: scale(1.1) rotate(2deg);
-o-transform: scale(1.1) rotate(2deg);
-ms-transform: scale(1.1) rotate(2deg);
transform: scale(1.1) rotate(2deg);
}
.msg span:nth-of-type(odd) {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.msg span:before {
display: block;
content: attr(title);
}
.msg span:after {
content: attr(title);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.15;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
filter: alpha(opacity=15);
-webkit-transform-origin: 50% 80%;
-moz-transform-origin: 50% 80%;
-o-transform-origin: 50% 80%;
-ms-transform-origin: 50% 80%;
transform-origin: 50% 80%;
transform-type: preserve-3d;
-webkit-transform: rotateX(50deg);
-moz-transform: rotateX(50deg);
-o-transform: rotateX(50deg);
-ms-transform: rotateX(50deg);
transform: rotateX(50deg);
text-shadow: 0 0 5px #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment