Skip to content

Instantly share code, notes, and snippets.

@hano

hano/index.html

Created November 6, 2013 22:06
Show Gist options
  • Save hano/7344957 to your computer and use it in GitHub Desktop.
Save hano/7344957 to your computer and use it in GitHub Desktop.
Download ZIP
CSS 3 Fernsehturm Stuttgart
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Fernsehturm</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="tower-container">
<div class="antennas">
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
</div>
<div class="platform">
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
</div>
<div class="stand">
<div class="stand-left"></div>
<div class="stand-right"></div>
</div>
</div>
<div class="tower-container">
<div class="antennas">
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
<div class="antenna"></div>
</div>
<div class="platform">
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
<div class="floor"></div>
</div>
<div class="stand">
<div class="stand-left"></div>
<div class="stand-right"></div>
</div>
</div>
</body>
</html>
Raw
style.css
* {
box-sizing: border-box;
}
.tower-container {
margin: 0 auto;
width: 100px;
height: auto;
background: white;
position: absolute;
}
.tower-container:nth-child(1){
display: block;
-webkit-transform: matrix(0.8, 0.1, -1.2, 0.6, 430, 130);
-moz-transform: matrix(0.8, 0.1, -1.2, 0.6, 430, 130);
-o-transform: matrix(0.8, 0.1, -1.2, 0.6, 430, 130);
transform: matrix(0.8, 0.1, -1.2, 0.6, 430, 130);
}
.tower-container div {
background: black;
width: 50px;
height: 100px;
margin: 0 auto;
-webkit-animation-name: grayscale;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
-moz-animation-name: grayscale;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 2s;
-o-animation-name: grayscale;
-o-animation-iteration-count: infinite;
-o-animation-duration: 2s;
animation-name: grayscale;
animation-iteration-count: infinite;
animation-duration: 2s;
}
.tower-container:nth-child(1) div{
-webkit-animation-name: none;
-moz-animation-name: none;
-o-animation-name: none;
animation-name: none;
}
.tower-container .antennas,
.tower-container .platform .floor:nth-child(even),
.tower-container .platform,
.tower-container .stand{
background: transparent;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
.tower-container .stand {
height: 500px;
width: 60px;
overflow: hidden;
position: relative;
}
.tower-container .stand .stand-left,
.tower-container .stand .stand-right {
width: 25px;
height: 110%;
position: absolute;
top: -10px;
}
.tower-container .stand .stand-left {
left: 12px;
-webkit-transform: rotate(1deg);
-o-transform: rotate(1deg);
transform: rotate(1deg);
}
.tower-container .stand .stand-right {
right: 12px;
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
}
.tower-container .platform {
width: 80px;
margin: 0 auto;
height: auto;
overflow: hidden;
}
.tower-container .platform .floor {
height: 7px;
width: 98%;
}
.tower-container .platform .floor:first-child {
width: 96%;
height: 7px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tower-container .platform .floor:nth-child(3) {
width: 100%;
}
.tower-container .platform .floor:nth-child(5) {
width: 98%;
}
.tower-container .platform .floor:nth-child(7) {
width: 93%;
}
.tower-container .platform .floor:nth-child(9) {
width: 90%;
}
.tower-container .platform .floor:last-child {
width: 84%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.tower-container .platform .floor:nth-child(even) {
height: 5px;
}
.tower-container .antennas {
height: auto;
background: transparent;
}
.tower-container .antennas .antenna {
width: 10px;
}
.tower-container .antennas .antenna:first-child {
width: 6px;
height: 1px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.tower-container .antennas .antenna:nth-child(2) {
width: 8px;
height: 50px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.tower-container .antennas .antenna:nth-child(3) {
height: 4px;
width: 14px;
}
.tower-container .antennas .antenna:nth-child(4) {
height: 66px;
width: 16px;
}
.tower-container .antennas .antenna:nth-child(5) {
height: 7px;
width: 20px;
}
.tower-container .antennas .antenna:nth-child(6) {
height: 4px;
width: 30px;
}
.tower-container .antennas .antenna:nth-child(7) {
height: 7px;
width: 20px;
}
.tower-container .antennas .antenna:nth-child(8) {
height: 4px;
width: 40px;
}
.tower-container .antennas .antenna:nth-child(9) {
height: 4px;
width: 30px;
}
.tower-container:hover div {
background: black;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
.tower-container:hover .antennas,
.tower-container:hover .platform .floor:nth-child(even),
.tower-container:hover .platform,
.tower-container:hover .stand{
background: transparent;
}
@-webkit-keyframes rainbow {
0% { background: #00bfff; }
10% { background: #0750ff; }
20% { background: #bc09ff; }
30% { background: #ff048a; }
40% { background: #ff0e1a; }
50% { background: #ff820b; }
60% { background: #fff70c; }
70% { background: #6aff0b; }
80% { background: #0fffae; }
90% { background: #0fffae; }
100% { background: #00bfff; }
}
@-webkit-keyframes grayscale {
0% { background: #000000; }
50% { background: #AAAAAA; }
100% { background: #000000; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment