Toggle navigation
Golibrary Code Playground - Everyone for education
Run
(current)
Fork
Settings
Share
0
374
Anonymous
HTML/CSS/Javascript
Python
Ruby
Clojure
PHP
Javascript (NodeJS)
Scala
Go
C/C++
Java
VB.Net
C#
Bash
Objective C
MySQL
Perl
Rust
HTML/CSS/Javascript
Search
Login
Login
Reset Password ?!
Login
Register
×
RESET PASSWORD
@
×
Allowed Extensions
Only this extensions are allowed: jpg,png,gif,jpeg
×
Error Message
×
Share this code
Url of this code
Send SMS with url of this code
Save As Github Gist
×
Github Gist
×
SETTINGS
HTML
CSS
Javascript
Title
Description
Meta Tags
Add meta tag example
Known ressources
--
Foundation
Bootstrap
CSS Preprocessor
CSS
LESS
SCSS
External CSS
Add another ressource
Known ressources
--
JQuery UI
Modernizr
Tree.js
JQuery
External JS
Add another ressource
CSS
→
body { } #face1{ width:150px; height:50px; background-color:#70d0f0; border-radius:5px; position:absolute ; top:100px; left:100px; } #face2{ width:150px; height:120px; border-radius:50px; border-bottom:1px black solid; background-color:#70d0f0; position:absolute; top:100px; left:100px; } .eyes{ width:20px; height:20px; background-color:black; position:absolute ; border-radius:50%; animation-name:blink; animation-duration:3s; animation-iteration-count:infinite; } #e1{ top:120px; left:120px; } #e2{ top:120px; left:210px; } #mouth{ width:50px; height:5px; background-color:black; border-radius:50%; position:absolute ; left:150px; top:180px; -webkit-animation-name:mouth; -webkit-animation-duration:0.25s; -webkit-animation-iteration-count:80; } #antena{ width:20px; height:20px; background-color:#ff4444; border-radius:20px; position:absolute ; top:30px; left:220px; } #line{ height:70px; width:1px; background-color:black; position:absolute ; left:230px; top:30px; } #body{ width:200px; height:200px; background-color:#80d0f0; border-radius:20px; position:absolute ; left:75px; top:200px; z-index:-1; } #hands{ width:210px; height:100px; border-radius:10px; border:30px #40c0d0 solid; border-bottom:none; position:absolute ; left:40px; top:220px; z-index:-2; } .palms{ width:50px; height:50px; border-radius:50px; background-color:#aaaabb; position:absolute ; } #p1{ left:30px; top:310px; } #p2{ top:310px; left:270px; } .legs{ width:30px; height:200px; background-color:#80d0f0; position:absolute ; z-index:-2; } #l1{ left:100px; top:300px; } #l2{ left:225px; top:300px; } #p3{ left:90px; top:480px; } #p4{ left:215px; top:480px; } .wave{ border-radius:50%; border:1px black solid ; position:absolute ; left:-50px; top:40px; -webkit-animation-name:wave; -webkit-animation-duration:2s; animation-iteration-count:infinite; } #w2{ -webkit-animation-delay:1s; } #tv{ height:100px; width:150px; background-color:#111155; border:5px #555555 solid; border-radius:5px; position:absolute; left:95px; top:250px; color:#00ff00; } #bulb{ width:10px; height:10px; border-radius:100%; position:absolute ; background-color:red; z-index:2; left:230px; top:235px; -webkit-animation-name:bulb; -webkit-animation-duration:1s; -webkit-animation-iteration-count:infinite ; } @-webkit-keyframes wave{ 0%{ width:20px; opacity:1; left:220px; height:10px; top:40px; } 100%{ width:150px; opacity:0; left:155px; height:20px; top:35px; } } @-webkit-keyframes mouth{ 0%{height:0px;top:180px;} 50%{height:20px;top:175px;} 100%{height:0px;top:180px;} } @-webkit-keyframes blink{ 0%{ height:20px;top:120px; } 5%{height:0px;top:130px;} 10%{ height:20px;top:120px; } } @-webkit-keyframes bulb{ 0%{opacity:0;} 50%{opacity:1;} 100%{opacity:0;} }
Full Screen
Javascript
→
window.onload=function(){ var tv=document.getElementById("tv") var s1="Hello! My Name is Alice. Nice to meet you!. Thanks to Golibrary to give direction to my coding knowledge" var s2="I feel relaxed after coding. Now I made this. If you like the code then don't forget to upvote" var b=true function write(k){ var l=k.length var c=0 function clear(){ b=false tv.innerHTML=" " write(s2) } var i= setInterval(function(){ tv.innerHTML=k.substr(0,c) c++ if(c>l){clearInterval(i) ; if(b){ clear()} } },100)} write(s1) }
HTML
→
<html> <head> <title>Page Title</title> </head> <body> <div id="box"> <div id="line"></div> <div id="face1"></div> <div id="face2"></div> <div class="eyes" id="e1"></div> <div class="eyes" id="e2"></div> <div id="mouth"></div> <div id="antena"></div> <div id="body"></div> <div id="hands"></div> <div class="palms" id="p1"></div> <div class="palms" id="p2"></div> <div class="legs" id="l1"></div> <div class="legs" id="l2"></div> <div class="palms" id="p3"></div> <div class="palms" id="p4"></div> <div class="wave" id="w1"></div> <div class="wave" id="w2"></div> <div id="bulb"></div> <code> <div id="tv"></div> </code> </div> </body> </html>