oto<html>
<head>
    <title>✌(‘ω’) Totoro</title>
</head>
<body>
	<div class="image">
    <div id="s1">
			<div id="s2">
				<div class="totoro">
				<div class="t1"></div>
				<div class="eyes">
					<div class="r-eye">
					<div class="r-eye-inner"></div>
					</div>
					<div class="l-eye">
					<div class="l-eye-inner"></div>
					</div>
				</div>
				</div>
				<div class="drop drop-a a1"></div>
				<div class="drop drop-a a2"></div>
				<div class="drop drop-a a3"></div>
				<div class="drop drop-a a4"></div>
				<div class="drop drop-a a5"></div>
				<div class="drop drop-a a6"></div>
				<div class="drop drop-a a7"></div>
				<div class="drop drop-a a8"></div>
				<div class="drop drop-a a9"></div>
				<div class="drop drop-a a10"></div>

				<div class="drop drop-b b1"></div>
				<div class="drop drop-b b2"></div>
				<div class="drop drop-b b3"></div>
				<div class="drop drop-b b4"></div>
				<div class="drop drop-b b5"></div>
				<div class="drop drop-b b6"></div>
				<div class="drop drop-b b7"></div>
				<div class="drop drop-b b8"></div>
				<div class="drop drop-b b9"></div>
				<div class="drop drop-b b10"></div>

				<div class="drop drop-c c1"></div>
				<div class="drop drop-c c2"></div>
				<div class="drop drop-c c3"></div>
				<div class="drop drop-c c4"></div>
				<div class="drop drop-c c5"></div>
				<div class="drop drop-c c6"></div>
				<div class="drop drop-c c7"></div>
				<div class="drop drop-c c8"></div>
				<div class="drop drop-c c9"></div>
				<div class="drop drop-c c10"></div>

				<div class="drop drop-d d1"></div>
				<div class="drop drop-d d2"></div>
				<div class="drop drop-d d3"></div>
				<div class="drop drop-d d4"></div>
				<div class="drop drop-d d5"></div>
				<div class="drop drop-d d6"></div>
				<div class="drop drop-d d7"></div>
				<div class="drop drop-d d8"></div>
				<div class="drop drop-d d9"></div>
				<div class="drop drop-d d10"></div>

				<div class="drop drop-e e1"></div>
				<div class="drop drop-e e2"></div>
				<div class="drop drop-e e3"></div>
				<div class="drop drop-e e4"></div>
				<div class="drop drop-e e5"></div>
				<div class="drop drop-e e6"></div>
				<div class="drop drop-e e7"></div>
				<div class="drop drop-e e8"></div>
				<div class="drop drop-e e9"></div>
				<div class="drop drop-e e10"></div>

				<div class="drop drop-f f1"></div>
				<div class="drop drop-f f2"></div>
				<div class="drop drop-f f3"></div>
				<div class="drop drop-f f4"></div>
				<div class="drop drop-f f5"></div>
				<div class="drop drop-f f6"></div>
				<div class="drop drop-f f7"></div>
				<div class="drop drop-f f8"></div>
				<div class="drop drop-f f9"></div>
				<div class="drop drop-f f10"></div>

				<div class="drop drop-g g1"></div>
				<div class="drop drop-g g2"></div>
				<div class="drop drop-g g3"></div>
				<div class="drop drop-g g4"></div>
				<div class="drop drop-g g5"></div>
				<div class="drop drop-g g6"></div>
				<div class="drop drop-g g7"></div>
				<div class="drop drop-g g8"></div>
				<div class="drop drop-g g9"></div>
				<div class="drop drop-g g10"></div>

				<div class="drop drop-h h1"></div>
				<div class="drop drop-h h2"></div>
				<div class="drop drop-h h3"></div>
				<div class="drop drop-h h4"></div>
				<div class="drop drop-h h5"></div>
				<div class="drop drop-h h6"></div>
				<div class="drop drop-h h7"></div>
				<div class="drop drop-h h8"></div>
				<div class="drop drop-h h9"></div>
				<div class="drop drop-h h10"></div>

				<div class="drop drop-i i1"></div>
				<div class="drop drop-i i2"></div>
				<div class="drop drop-i i3"></div>
				<div class="drop drop-i i4"></div>
				<div class="drop drop-i i5"></div>
				<div class="drop drop-i i6"></div>
				<div class="drop drop-i i7"></div>
				<div class="drop drop-i i8"></div>
				<div class="drop drop-i i9"></div>
				<div class="drop drop-i i10"></div>

				<div class="drop drop-l l1"></div>
				<div class="drop drop-l l2"></div>
				<div class="drop drop-l l3"></div>
				<div class="drop drop-l l4"></div>
				<div class="drop drop-l l5"></div>
				<div class="drop drop-l l6"></div>
				<div class="drop drop-l l7"></div>
				<div class="drop drop-l l8"></div>
				<div class="drop drop-l l9"></div>
				<div class="drop drop-l l10"></div>

				<div class="opening"></div>

			</div>
		</div>	

	<a class="dx" href="#s1"></a>
	<a class="sx" href="#s2"></a>
    
</div>

</body>
</html>
* {
    position:absolute;
    font-size:1px;
}
html {background: black;}
body {overflow: hidden; margin:0;}
.image {
    padding:0;
    margin:0;
    width:100vw;
    height:54vw;
    overflow:hidden;
    text-align: center;
    background: black url(http://www.ruggeromotta.com/totoro.png) center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
a {
    position: absolute;
    display: block;
    width: 100vw;
    height: 54vw;}
a.sx{ 
    left: 50vw; 
    width: 24vw;
}
#s1,#s2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 54vw;
}

.opening {
    top:0;
    left:0;
    width: 100vw;
    height: 54vw;
    background: black;
    animation: opening;
    animation-delay: 2.5s;
    animation-duration:3.5s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

.r-eye {
    animation: eyes;
    animation-duration:120s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    opacity:1;
    top:14.9vw;
    left:66.1vw;
    width:2.6vw;
    height:2.6vw;
    background: rgba(120,120,120,1);
    border-radius: 2.5vw;
    transform: rotateY(10deg) rotateX(-10deg) skewY(8deg);
    box-shadow:0em 0 2em 0em rgba(0,0,0,0.3), 0 0 2em 0em rgba(0,0,0,0.4) inset ;
}
.r-eye-inner {
    animation: bigeyes;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity:1;
    top: 21%;
    left:18%;
    background: #111214;
    border-radius: 100%;
    transform: rotate(10deg);
}
#s1:target .r-eye-inner {
    animation: eye-l-r;
    animation-duration:20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:25%;
    height:29%;
}
.r-eye-inner:after {
    opacity:0.5;
    position: absolute;
    top:35%;
    left:66%;
    width:15%;
    height:15%;
    background: white;
    border-radius: 100%;
    display: block;
    content: '';
}
.l-eye {
    animation: eyes;
    animation-duration:120s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    opacity:1;
    top:14.9vw;
    left:55.8vw;
    width:2.5vw;
    height:2.7vw;
    background: rgba(120,120,120,1);
    border-radius: 2.5vw;
    transform: rotateY(0deg) rotateX(0deg) skewY(-5deg);
    box-shadow:0px 0px 2em 0em rgba(0,0,0,0.3), 0px 0px 2em 0em rgba(0,0,0,0.4) inset ;
}
.l-eye-inner {
    animation: bigeyes;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity:1;
    top: 21%;
    left:18%;
    background: #111214;
    border-radius: 100%;
    transform: rotate(00deg);
}
#s1:target .l-eye-inner {
    animation: eye-l-r;
    animation-duration:20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:25%;
    height:29%;
}
.l-eye-inner:after {
    opacity:0.4;
    position: absolute;
    top:40%;
    left:76%;
    width:12%;
    height:15%;
    background: white;
    border-radius: 100%;
    display: block;
    content: '';
}

.drop {
    animation-name: rain;
    animation-duration: 0.5s;
    animation-iteration-count:infinite;
    animation-timing-function: linear;
    width: 0.15vw;
    height: 1.5vw;
    top: -1.5vw;
    background-color: rgba(255,255,255,0.15);
    background-color: rgba(255,255,255,0.15);
    box-shadow:  0 1.5vw 0 0 rgba(255,255,255,0.15),
    0 3vw 0 0 rgba(255,255,255,0.15),
    0 4.5vw 0 0 rgba(255,255,255,0.15),
    0 6vw 0 0 rgba(255,255,255,0.15),
    0 6.5vw 0 0 rgba(255,255,255,0.15),
    0 8vw 0 0 rgba(255,255,255,0.15),
    0 9.5vw 0 0 rgba(255,255,255,0.15),
    0 11vw 0 0 rgba(255,255,255,0.15),
    0 12.5vw 0 0 rgba(255,255,255,0.15);    
}

#s1:target .drop {
    animation-duration: 1s;
    height: 1vw;
    top: -1vw;
    background-color: rgba(255,255,255,0.1);
    box-shadow:  0 1vw 0 0 rgba(255,255,255,0.1),
    0 2vw 0 0 rgba(255,255,255,0.1),
    0 3vw 0 0 rgba(255,255,255,0.1),
    0 4vw 0 0 rgba(255,255,255,0.1),
    0 5vw 0 0 rgba(255,255,255,0.1),
    0 6vw 0 0 rgba(255,255,255,0.1),
    0 7vw 0 0 rgba(255,255,255,0.1);
}


.drop-a { animation-delay: 0s }
.drop-b { animation-delay: .1s }
.drop-c { animation-delay: .2s }
.drop-d { animation-delay: .3s }
.drop-e { animation-delay: .4s }
.drop-f { animation-delay: .5s }
.drop-g { animation-delay: .6s }
.drop-h { animation-delay: .7s }
.drop-i { animation-delay: .8s }
.drop-l { animation-delay: .9s }


.a1 { left: 7vw }
.a2 { left: 17vw }
.a3 { left: 27vw }
.a4 { left: 37vw }
.a5 { left: 48vw }
.a6 { left: 56vw }
.a7 { left: 67vw }
.a8 { left: 71vw }
.a9 { left: 87vw }
.a10 { left: 97vw }

.b1 { left: 2vw }
.b2 { left: 10vw }
.b3 { left: 29vw }
.b4 { left: 33vw }
.b5 { left: 45vw }
.b6 { left: 59vw }
.b7 { left: 62vw }
.b8 { left: 75vw }
.b9 { left: 83vw }
.b10 { left: 94vw }

.c1 { left: 5vw }
.c2 { left: 14vw }
.c3 { left: 26vw }
.c4 { left: 36vw }
.c5 { left: 49vw }
.c6 { left: 52vw }
.c7 { left: 67vw }
.c8 { left: 79vw }
.c9 { left: 86vw }
.c10 { left: 98vw }

.d1 { left: 8vw }
.d2 { left: 11vw }
.d3 { left: 29vw }
.d4 { left: 31vw }
.d5 { left: 41vw }
.d6 { left: 54vw }
.d7 { left: 61vw }
.d8 { left: 71vw }
.d9 { left: 83vw }
.d10 { left: 95vw }

.e1 { left: 1vw }
.e2 { left: 13vw }
.e3 { left: 27vw }
.e4 { left: 36vw }
.e5 { left: 47vw }
.e6 { left: 58vw }
.e7 { left: 63vw }
.e8 { left: 77vw }
.e9 { left: 80vw }
.e10 { left: 91vw }

.f1 { left: 5vw }
.f2 { left: 16vw }
.f3 { left: 22vw }
.f4 { left: 33vw }
.f5 { left: 49vw }
.f6 { left: 50vw }
.f7 { left: 60vw }
.f8 { left: 74vw }
.f9 { left: 88vw }
.f10 { left: 96vw }

.g1 { left: 2vw }
.g2 { left: 10vw }
.g3 { left: 25vw }
.g4 { left: 30vw }
.g5 { left: 44vw }
.g6 { left: 53vw }
.g7 { left: 68vw }
.g8 { left: 77vw }
.g9 { left: 85vw }
.g10 { left: 99vw }

.h1 { left: 4vw }
.h2 { left: 14vw }
.h3 { left: 28vw }
.h4 { left: 36vw }
.h5 { left: 42vw }
.h6 { left: 51vw }
.h7 { left: 63vw }
.h8 { left: 70vw }
.h9 { left: 82vw }
.h10 { left: 94vw }

.i1 { left: 6vw }
.i2 { left: 19vw }
.i3 { left: 26vw }
.i4 { left: 34vw }
.i5 { left: 40vw }
.i6 { left: 53vw }
.i7 { left: 67vw }
.i8 { left: 77vw }
.i9 { left: 88vw }
.i10 { left: 91vw }

.l1 { left: 9vw }
.l2 { left: 15vw }
.l3 { left: 23vw }
.l4 { left: 38vw }
.l5 { left: 47vw }
.l6 { left: 58vw }
.l7 { left: 69vw }
.l8 { left: 78vw }
.l9 { left: 83vw }
.l10 { left: 97vw }

input {opacity: 0;}
input:focus + label {
    display: none;
}
label {
    display: block;
    width: 100vw;
    height: 54vw;
}


@keyframes opening {
    from {opacity: 1;}
    to {opacity: 0;}
}
@keyframes rain {
    from {top: -10vw;}
    to {top: 59vw;}
}
@keyframes bigeyes{
    0% {top:35%; left:34%; width:25%; height:29%;}      
    100% {top: 21%; left:19%; width:54%; height:60%;}
}
@keyframes eye-l-r {
    0%{top: 21%; left:19%; width:54%; height:60%;}
    1% {top:35%; left:40.5%; width:25%; height:29%;}
    15% {top:35%; left:40.5%;}
    17% {top:35%; left:20%;}
    30% {top:35%; left:20%;}
    32% {top:35%; left:40.5%;}
    54% {top:35%; left:40.5%;}
    57% {top:35%; left:55%;}
    70% {top:35%; left:55%;}
    72% {top:35%; left:40.5%;}
    85% {top:35%; left:40.5%;}
    88% {top:13%; left:40.5%;}
    94% {top:13%; left:40.5%;}
    97% {top:35%; left:40.5%;}
    100% {top:35%; left:40.5%;}
}

@keyframes eyes {
    0% { background-color: rgba(120,120,120,1)}
    90% { background-color: rgba(120,120,120,1)}
    100% { background-color: rgba(160,160,0,1)}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.