Commit 91ab7bfe authored by Marco Kellershoff's avatar Marco Kellershoff 🤸

Update README.md Custom CSS and Custom JavaScript

parent 43ed92ca
......@@ -27,256 +27,29 @@ html, body {
height: 100%;
text-align: center;
overflow: hidden;
position: relative;
}
@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);
.container {
overflow: hidden;
height: 150px;
width: 500px;
padding-top: 30px;
display: inline-block;
position: relative;
top: 150px;
border-bottom: 5px solid #333;
}
.letter {
display: inline-block;
font-family: "Montserrat Alternates", sans-serif;
font-size: 140px;
color: #3c3c3c;
-webkit-text-stroke: 0px #282828;
position: relative;
z-index: 1;
top: 0px;
line-height: 120px;
top: 0px;
margin-right: -10px;
-webkit-transform: translate3d(0, 150px, 0);
-moz-transform: translate3d(0, 150px, 0);
-ms-transform: translate3d(0, 150px, 0);
transform: translate3d(0, 150px, 0);
}
.G:after {
content: "G";
font-size: 140px;
color: #4285f4;
}
.g:after {
content: "g";
font-size: 140px;
color: #4285f4;
}
.o:after {
content: "o";
font-size: 140px;
color: #ea4335;
}
.o:nth-of-type(3):after {
color: #fbbc05;
}
.l:after {
content: "l";
font-size: 140px;
color: #34a853;
}
.e:after {
content: "e";
font-size: 140px;
color: #ea4335;
}
.G:after, .o:after, .g:after, .e:after, .l:after {
position: absolute;
left: 0;
top: 0px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
opacity: 1;
z-index: 100;
}
.letter:nth-child(1) {
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
}
.letter:nth-child(1):after {
animation-delay: 2.7s;
-webkit-animation-delay: 2.7s;
}
.letter:nth-child(2) {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
.letter:nth-child(2):after {
animation-delay: 2.9s;
-webkit-animation-delay: 2.9s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.letter:nth-child(3) {
animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
}
.letter:nth-child(3):after {
animation-delay: 3.1s;
-webkit-animation-delay: 3.1s;
}
.letter:nth-child(4) {
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
}
.letter:nth-child(4):after {
animation-delay: 3.3s;
-webkit-animation-delay: 3.3s;
}
.letter:nth-child(5) {
animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
}
.letter:nth-child(5):after {
animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
}
.letter:nth-child(6) {
animation-delay: 1.6s;
-webkit-animation-delay: 1.6s;
}
.letter:nth-child(6):after {
animation-delay: 3.7s;
-webkit-animation-delay: 3.7s;
}
.letter:nth-child(7) {
animation-delay: 1.7s;
-webkit-animation-delay: 1.7s;
}
.letter:nth-child(7):after {
animation-delay: 3.9s;
-webkit-animation-delay: 3.9s;
}
.letter {
-webkit-animation: show 0.3s 4s 1 ease-out forwards;
-moz-animation: show 0.3s 4s 1 ease-out forwards;
-o-animation: show 0.3s 4s 1 ease-out forwards;
animation: show 0.3s 4s 1 ease-out forwards;
}
.letter:after {
-webkit-animation: up 1s 1 ease-out forwards;
-moz-animation: up 1s 1 ease-out forwards;
-o-animation: up 1s 1 ease-out forwards;
animation: up 1s 1 ease-out forwards;
}
@keyframes show {
100% {
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
-ms-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
}
@keyframes up {
30% {
-webkit-transform: translate3d(0, -7px, 0);
-moz-transform: translate3d(0, -7px, 0);
-ms-transform: translate3d(0, -7px, 0);
transform: translate3d(0, -7px, 0);
}
60% {
-webkit-transform: translate3d(0, -4px, 0);
-moz-transform: translate3d(0, -4px, 0);
-ms-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
80% {
-webkit-transform: translate3d(0, -7px, 0);
-moz-transform: translate3d(0, -7px, 0);
-ms-transform: translate3d(0, -7px, 0);
transform: translate3d(0, -7px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
-moz-transform: translate3d(0, -5px, 0);
-ms-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, -7px, 0);
-moz-transform: translate3d(0, -7px, 0);
-ms-transform: translate3d(0, -7px, 0);
transform: translate3d(0, -7px, 0);
}
}
@-webkit-keyframes show {
100% {
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
-ms-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
}
@-webkit-keyframes up {
30% {
-webkit-transform: translate3d(0, -7px, 0);
-moz-transform: translate3d(0, -7px, 0);
-ms-transform: translate3d(0, -7px, 0);
transform: translate3d(0, -7px, 0);
}
60% {
-webkit-transform: translate3d(0, -4px, 0);
-moz-transform: translate3d(0, -4px, 0);
-ms-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
80% {
-webkit-transform: translate3d(0, -7px, 0);
-moz-transform: translate3d(0, -7px, 0);
-ms-transform: translate3d(0, -7px, 0);
transform: translate3d(0, -7px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
-moz-transform: translate3d(0, -5px, 0);
-ms-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, -7px, 0);
-moz-transform: translate3d(0, -7px, 0);
-ms-transform: translate3d(0, -7px, 0);
transform: translate3d(0, -7px, 0);
}
.fl-10x {
font-size: 1000%;
}
```
### Custom Javascript
```javascript
var html = `<div class="container">
<div class="G letter">G</div>
<div class="o letter">o</div>
<div class="o letter">o</div>
<div class="g letter">g</div>
<div class="l letter">l</div>
<div class="e letter">e</div>
var html = `<link rel="stylesheet" href="//cdn.walialu.com/font-linux/assets/font-linux.css?v=201711161233" />
<div class="container">
<span class="fl-archlinux fl-10x">
</span>
</div>`;
document.body.innerHTML = document.body.innerHTML + html;
```
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment