Skip to content

Instantly share code, notes, and snippets.

@Humble23

Humble23/index.html

Created January 20, 2020 03:18
Show Gist options
  • Save Humble23/e4f14b2962955eb2ec92c47cfda39757 to your computer and use it in GitHub Desktop.
Save Humble23/e4f14b2962955eb2ec92c47cfda39757 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin R2D2 // source https://jsbin.com/woracem
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="R2D2">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
*{
margin:0px;
padding:0px;
border:0;
}
body{
background:#000;
overflow:hidden;
}
.logo{
user-select:none;
width:200px;
height:40px;
position:absolute;
text-align:center;
line-height:56px;
font-family:roboto;
left:50%;
top:12%;
transform-style: preserve-3d;
transform:translate(-50%, -20%) perspective(7.6cm) rotateX(50deg);
font-size:70px;
text-shadow: -1px 0 #FFE919, 0 1px #FFE919, 1px 0 #FFE919, 0 -1px #FFE919;
}
.r2d2{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.r2d2 .head{
box-shadow:inset 5px 5px 10px rgba(0, 0, 0,.4);
position:relative;
overflow:hidden;
background:#fff;
width:95px;
height:70px;
border:1px solid #0E1589;
border-radius:100% 100% 0% 0% / 100% 100% 0% 0% ;
}
.r2d2 .head .eye{
position:absolute;
top:55%;
left:50%;
transform:translate(-50%, -50%);
width:25px;
height:25px;
background:#0E1589;
animation:moveEye 3s infinite;
}
.r2d2 .head .eye-2{
position:absolute;
top:89%;
left:50%;
transform:translate(-50%, -50%);
width:27px;
height:14px;
background:#0E1589;
animation:moveEye 3s infinite;
}
.r2d2 .head .eye-2::before{
content:"";
position:absolute;
top:50%;
left:70%;
width:10px;
height:10px;
transform:translate(-50%, -50%);
background:#000;
border-radius:50%;
animation:blink 2s infinite;
}
.r2d2 .head .detail-1{
display:flex;
flex-direction:row;
position:absolute;
top:90%;
left:98%;
transform:translate(-50%, -50%);
animation:moveDetail-1 3s infinite;
}
.r2d2 .head .detail-1 .line{
width:10px;
height:15px;
margin:2px;
background:#0E1589;
}
.r2d2 .head .detail-2{
display:flex;
flex-direction:row;
position:absolute;
top:14%;
left:27%;
transform:translate(-50%, -50%);
animation:moveDetail-2 3s infinite;
}
.r2d2 .head .detail-2 .line{
background:#0E1589;
margin:2px;
width:40px;
height:12px;
}
.r2d2 .head .detail-3{
display:flex;
flex-direction:row;
position:absolute;
top:90%;
left:0%;
transform:translate(-50%, -50%);
animation:moveDetail-3 3s infinite;
}
.r2d2 .head .detail-3 .line{
width:10px;
height:15px;
margin:2px;
background:#0E1589;
}
.r2d2 .head .eye::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:15px;
height:15px;
transform:translate(-50%, -50%);
background:#000;
border-radius:50%;
}
.r2d2 .head .eye::after{
content:"";
position:absolute;
top:40%;
left:60%;
width:5px;
height:5px;
transform:translate(-50%, -50%);
background:#fff;
border-radius:50%;
}
.r2d2 .head .aim{
width:10px;
height:10px;
position:absolute;
border-radius:50%;
top:83%;
left:70%;
transform:translate(-50%, -50%);
background:#ccc;
animation:moveAim 3s infinite;
}
.r2d2 .head .aim::before{
position:absolute;
content:"";
border-radius:50%;
top:50%;
left:50%;
width:4px;
height:4px;
transform:translate(-50%, -50%);
background:#000;
animation:blink 3s infinite;
}
.r2d2 .body{
z-index:30px;
position:relative;
display:flex;
background:#fff;
justify-content:center;
width:95px;
height:120px;
border:1px solid #0E1589;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
box-shadow:inset -5px -5px 10px rgba(0, 0, 0,.4);
}
.r2d2 .body::after{
content:"";
position:absolute;
top:111%;
left:50%;
width:40px;
height:24px;
background:#fff;
border:1px solid #0E1589;
transform:translate(-50%, -50%);
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
box-shadow:inset -5px -5px 10px rgba(0, 0, 0,.4);
}
.r2d2 .body .line{
width:60px;
height:5px;
background:#0E1589;
margin:7px 0;
border-radius:15px;
}
.r2d2 .arm{
background:#fff;
z-index:-1;
position:absolute;
top:73px;
border-radius:30px;
width:40px;
height:140px;
box-shadow:inset -5px -5px 10px rgba(0, 0, 0,.4);
}
.r2d2 .arm-left{
left:-18px
}
.r2d2 .arm-left::after{
content:"";
position:absolute;
top:50%;
left:3px;
transform:translate(-50%, -50%);
width:5px;
height:60px;
background:#0E1589;
}
.r2d2 .arm-right{
right:-18px
}
.r2d2 .arm-right::after{
content:"";
position:absolute;
top:50%;
right:-2px;
transform:translate(-50%, -50%);
width:5px;
height:60px;
background:#0E1589;
}
@keyframes moveDetail-1{
50%{
left:70%;
}
100%{
}
}
@keyframes moveDetail-2{
50%{
left:0%;
}
100%{
}
}
@keyframes moveDetail-3{
50%{
left:-20%;
}
100%{
}
}
@keyframes moveEye{
50%{
left:20%;
}
100%{
}
}
@keyframes moveAim{
50%{
left:40%;
}
100%{
}
}
@keyframes move{
50%{
left:20%;
}
60%{
left:50%;
}
70%{
left:70%;
}
100%{
left:50%;
}
}
@keyframes blink{
50%{
background:red;
}
100%{
}
}
</style>
</head>
<body>
<div class="logo">
STAR WARS
</div>
<div class="square">
</div>
<div class="r2d2">
<div class="head">
<div class="detail-1">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="detail-2">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="detail-3">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="eye"></div>
<div class="eye-2"></div>
<div class="aim"></div>
</div>
<div class="body">
<div class="detail">
<div class="line">
</div>
<div class="line">
</div>
<div class="line">
</div>
</div>
</div>
<div class="arm arm-left"></div>
<div class="arm arm-right"></div>
</div>
<script id="jsbin-source-css" type="text/css">*{
margin:0px;
padding:0px;
border:0;
}
body{
background:#000;
overflow:hidden;
}
.logo{
user-select:none;
width:200px;
height:40px;
position:absolute;
text-align:center;
line-height:56px;
font-family:roboto;
left:50%;
top:12%;
transform-style: preserve-3d;
transform:translate(-50%, -20%) perspective(7.6cm) rotateX(50deg);
font-size:70px;
text-shadow: -1px 0 #FFE919, 0 1px #FFE919, 1px 0 #FFE919, 0 -1px #FFE919;
}
.r2d2{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.r2d2 .head{
box-shadow:inset 5px 5px 10px rgba(0, 0, 0,.4);
position:relative;
overflow:hidden;
background:#fff;
width:95px;
height:70px;
border:1px solid #0E1589;
border-radius:100% 100% 0% 0% / 100% 100% 0% 0% ;
}
.r2d2 .head .eye{
position:absolute;
top:55%;
left:50%;
transform:translate(-50%, -50%);
width:25px;
height:25px;
background:#0E1589;
animation:moveEye 3s infinite;
}
.r2d2 .head .eye-2{
position:absolute;
top:89%;
left:50%;
transform:translate(-50%, -50%);
width:27px;
height:14px;
background:#0E1589;
animation:moveEye 3s infinite;
}
.r2d2 .head .eye-2::before{
content:"";
position:absolute;
top:50%;
left:70%;
width:10px;
height:10px;
transform:translate(-50%, -50%);
background:#000;
border-radius:50%;
animation:blink 2s infinite;
}
.r2d2 .head .detail-1{
display:flex;
flex-direction:row;
position:absolute;
top:90%;
left:98%;
transform:translate(-50%, -50%);
animation:moveDetail-1 3s infinite;
}
.r2d2 .head .detail-1 .line{
width:10px;
height:15px;
margin:2px;
background:#0E1589;
}
.r2d2 .head .detail-2{
display:flex;
flex-direction:row;
position:absolute;
top:14%;
left:27%;
transform:translate(-50%, -50%);
animation:moveDetail-2 3s infinite;
}
.r2d2 .head .detail-2 .line{
background:#0E1589;
margin:2px;
width:40px;
height:12px;
}
.r2d2 .head .detail-3{
display:flex;
flex-direction:row;
position:absolute;
top:90%;
left:0%;
transform:translate(-50%, -50%);
animation:moveDetail-3 3s infinite;
}
.r2d2 .head .detail-3 .line{
width:10px;
height:15px;
margin:2px;
background:#0E1589;
}
.r2d2 .head .eye::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:15px;
height:15px;
transform:translate(-50%, -50%);
background:#000;
border-radius:50%;
}
.r2d2 .head .eye::after{
content:"";
position:absolute;
top:40%;
left:60%;
width:5px;
height:5px;
transform:translate(-50%, -50%);
background:#fff;
border-radius:50%;
}
.r2d2 .head .aim{
width:10px;
height:10px;
position:absolute;
border-radius:50%;
top:83%;
left:70%;
transform:translate(-50%, -50%);
background:#ccc;
animation:moveAim 3s infinite;
}
.r2d2 .head .aim::before{
position:absolute;
content:"";
border-radius:50%;
top:50%;
left:50%;
width:4px;
height:4px;
transform:translate(-50%, -50%);
background:#000;
animation:blink 3s infinite;
}
.r2d2 .body{
z-index:30px;
position:relative;
display:flex;
background:#fff;
justify-content:center;
width:95px;
height:120px;
border:1px solid #0E1589;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
box-shadow:inset -5px -5px 10px rgba(0, 0, 0,.4);
}
.r2d2 .body::after{
content:"";
position:absolute;
top:111%;
left:50%;
width:40px;
height:24px;
background:#fff;
border:1px solid #0E1589;
transform:translate(-50%, -50%);
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
box-shadow:inset -5px -5px 10px rgba(0, 0, 0,.4);
}
.r2d2 .body .line{
width:60px;
height:5px;
background:#0E1589;
margin:7px 0;
border-radius:15px;
}
.r2d2 .arm{
background:#fff;
z-index:-1;
position:absolute;
top:73px;
border-radius:30px;
width:40px;
height:140px;
box-shadow:inset -5px -5px 10px rgba(0, 0, 0,.4);
}
.r2d2 .arm-left{
left:-18px
}
.r2d2 .arm-left::after{
content:"";
position:absolute;
top:50%;
left:3px;
transform:translate(-50%, -50%);
width:5px;
height:60px;
background:#0E1589;
}
.r2d2 .arm-right{
right:-18px
}
.r2d2 .arm-right::after{
content:"";
position:absolute;
top:50%;
right:-2px;
transform:translate(-50%, -50%);
width:5px;
height:60px;
background:#0E1589;
}
@keyframes moveDetail-1{
50%{
left:70%;
}
100%{
}
}
@keyframes moveDetail-2{
50%{
left:0%;
}
100%{
}
}
@keyframes moveDetail-3{
50%{
left:-20%;
}
100%{
}
}
@keyframes moveEye{
50%{
left:20%;
}
100%{
}
}
@keyframes moveAim{
50%{
left:40%;
}
100%{
}
}
@keyframes move{
50%{
left:20%;
}
60%{
left:50%;
}
70%{
left:70%;
}
100%{
left:50%;
}
}
@keyframes blink{
50%{
background:red;
}
100%{
}
}
</script>
</body>
</html>
Raw
jsbin.woracem.css
*{
margin:0px;
padding:0px;
border:0;
}
body{
background:#000;
overflow:hidden;
}
.logo{
user-select:none;
width:200px;
height:40px;
position:absolute;
text-align:center;
line-height:56px;
font-family:roboto;
left:50%;
top:12%;
transform-style: preserve-3d;
transform:translate(-50%, -20%) perspective(7.6cm) rotateX(50deg);
font-size:70px;
text-shadow: -1px 0 #FFE919, 0 1px #FFE919, 1px 0 #FFE919, 0 -1px #FFE919;
}
.r2d2{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.r2d2 .head{
box-shadow:inset 5px 5px 10px rgba(0, 0, 0,.4);
position:relative;
overflow:hidden;
background:#fff;
width:95px;
height:70px;
border:1px solid #0E1589;
border-radius:100% 100% 0% 0% / 100% 100% 0% 0% ;
}
.r2d2 .head .eye{
position:absolute;
top:55%;
left:50%;
transform:translate(-50%, -50%);
width:25px;
height:25px;
background:#0E1589;
animation:moveEye 3s infinite;
}
.r2d2 .head .eye-2{
position:absolute;
top:89%;
left:50%;
transform:translate(-50%, -50%);
width:27px;
height:14px;
background:#0E1589;
animation:moveEye 3s infinite;
}
.r2d2 .head .eye-2::before{
content:"";
position:absolute;
top:50%;
left:70%;
width:10px;
height:10px;
transform:translate(-50%, -50%);
background:#000;
border-radius:50%;
animation:blink 2s infinite;
}
.r2d2 .head .detail-1{
display:flex;
flex-direction:row;
position:absolute;
top:90%;
left:98%;
transform:translate(-50%, -50%);
animation:moveDetail-1 3s infinite;
}
.r2d2 .head .detail-1 .line{
width:10px;
height:15px;
margin:2px;
background:#0E1589;
}
.r2d2 .head .detail-2{
display:flex;
flex-direction:row;
position:absolute;
top:14%;
left:27%;
transform:translate(-50%, -50%);
animation:moveDetail-2 3s infinite;
}
.r2d2 .head .detail-2 .line{
background:#0E1589;
margin:2px;
width:40px;
height:12px;
}
.r2d2 .head .detail-3{
display:flex;
flex-direction:row;
position:absolute;
top:90%;
left:0%;
transform:translate(-50%, -50%);
animation:moveDetail-3 3s infinite;
}
.r2d2 .head .detail-3 .line{
width:10px;
height:15px;
margin:2px;
background:#0E1589;
}
.r2d2 .head .eye::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:15px;
height:15px;
transform:translate(-50%, -50%);
background:#000;
border-radius:50%;
}
.r2d2 .head .eye::after{
content:"";
position:absolute;
top:40%;
left:60%;
width:5px;
height:5px;
transform:translate(-50%, -50%);
background:#fff;
border-radius:50%;
}
.r2d2 .head .aim{
width:10px;
height:10px;
position:absolute;
border-radius:50%;
top:83%;
left:70%;
transform:translate(-50%, -50%);
background:#ccc;
animation:moveAim 3s infinite;
}
.r2d2 .head .aim::before{
position:absolute;
content:"";
border-radius:50%;
top:50%;
left:50%;
width:4px;
height:4px;
transform:translate(-50%, -50%);
background:#000;
animation:blink 3s infinite;
}
.r2d2 .body{
z-index:30px;
position:relative;
display:flex;
background:#fff;
justify-content:center;
width:95px;
height:120px;
border:1px solid #0E1589;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
box-shadow:inset -5px -5px 10px rgba(0, 0, 0,.4);
}
.r2d2 .body::after{
content:"";
position:absolute;
top:111%;
left:50%;
width:40px;
height:24px;
background:#fff;
border:1px solid #0E1589;
transform:translate(-50%, -50%);
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
box-shadow:inset -5px -5px 10px rgba(0, 0, 0,.4);
}
.r2d2 .body .line{
width:60px;
height:5px;
background:#0E1589;
margin:7px 0;
border-radius:15px;
}
.r2d2 .arm{
background:#fff;
z-index:-1;
position:absolute;
top:73px;
border-radius:30px;
width:40px;
height:140px;
box-shadow:inset -5px -5px 10px rgba(0, 0, 0,.4);
}
.r2d2 .arm-left{
left:-18px
}
.r2d2 .arm-left::after{
content:"";
position:absolute;
top:50%;
left:3px;
transform:translate(-50%, -50%);
width:5px;
height:60px;
background:#0E1589;
}
.r2d2 .arm-right{
right:-18px
}
.r2d2 .arm-right::after{
content:"";
position:absolute;
top:50%;
right:-2px;
transform:translate(-50%, -50%);
width:5px;
height:60px;
background:#0E1589;
}
@keyframes moveDetail-1{
50%{
left:70%;
}
100%{
}
}
@keyframes moveDetail-2{
50%{
left:0%;
}
100%{
}
}
@keyframes moveDetail-3{
50%{
left:-20%;
}
100%{
}
}
@keyframes moveEye{
50%{
left:20%;
}
100%{
}
}
@keyframes moveAim{
50%{
left:40%;
}
100%{
}
}
@keyframes move{
50%{
left:20%;
}
60%{
left:50%;
}
70%{
left:70%;
}
100%{
left:50%;
}
}
@keyframes blink{
50%{
background:red;
}
100%{
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment