Some Doctors from Doctor Who - Pure CSS
HTML
<div class="doctor-wrapper">
<div class="nine">
<div class="clothes">
<div class="center"></div>
<div class="details left"></div>
<div class="details right"></div>
</div>
<div class="neck"></div>
<div class="head">
<div class="ear left"></div>
<div class="ear right"></div>
</div>
<div class="hair">
<div class="left side"></div>
<div class="right side"></div>
</div>
</div>
<div class="ten">
<div class="neck"></div>
<div class="clothes">
<div class="center"></div>
<div class="tie"></div>
<div class="details left"></div>
<div class="details right"></div>
<div class="details-before left"></div>
<div class="details-before right"></div>
</div>
<div class="head">
<div class="ear left"></div>
<div class="ear right"></div>
</div>
<div class="hair">
<div class="triangle t1"></div>
<div class="triangle t2"></div>
<div class="triangle t3"></div>
<div class="left side"></div>
<div class="right side"></div>
</div>
</div>
<div class="eleven">
<div class="neck"></div>
<div class="clothes">
<div class="center"></div>
<div class="tie"></div>
<div class="details left"></div>
<div class="details right"></div>
</div>
<div class="head">
<div class="ear left"></div>
<div class="ear right"></div>
</div>
<div class="hair">
<div class="triangle t1"></div>
<div class="right side"></div>
</div>
</div>
<div class="twelve">
<div class="neck"></div>
<div class="clothes">
<div class="center"></div>
<div class="details-before left"></div>
<div class="details-before right"></div>
<div class="details left"></div>
<div class="details right"></div>
</div>
<div class="head">
<div class="ear left"></div>
<div class="ear right"></div>
</div>
<div class="hair">
<div class="left side"></div>
<div class="right side"></div>
</div>
</div>
</div>
SCSS
// variables
$bg-color: #717699;
$bg-nine: #7A5A99;
$bg-ten: #BA7B38;
$bg-eleven: #B36291;
$bg-twelve: #91374B;
$white: #eee;
$black: #222;
$purple: #5B3770;
$blue: #37428A;
$red: #943232;
$beige: #7A6848;
$dark-purple: #484369;
$light-pink: #D1A1BA + 15;
$skin-tone: #ecddcb;
$hair-dark: #4F4842 - 25;
$hair-med: #4F4842;
$hair-redish: #664B39;
$hair-old: #B4B4B4; // I had to write old just to be fun
$time: 5s;
// mixins
@mixin transform($info) {
transform: $info;
-webkit-transform: $info;
-moz-transform: $info;
-ms-transform: $info;
}
@mixin gradient($type, $info) {
background: #{$type}-gradient($info);
background: -webkit-#{$type}-gradient($info);
background: -moz-#{$type}-gradient($info);
background: -ms-#{$type}-gradient($info);
}
@mixin browsers($info) {
animation: $info;
-webkit-animation: $info;
-moz-animation: $info;
-ms-animation: $info;
-o-animation: $info;
}
@mixin blur($info) {
filter: blur($info);
-webkit-filter: blur($info);
-moz-filter: blur($info);
-ms-filter: blur($info);
-o-filter: blur($info);
}
@mixin animation($name) {
@keyframes #{$name} {
@content;
}
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
}
// attributes
body {
align-items: center;
background-color: $bg-color;
display: flex;
height: 100vh;
justify-content: center;
margin: 0;
}
.doctor-wrapper {
background-color: $bg-nine;
border: 2px solid $white;
border-radius: 100%;
height: 150px;
overflow: hidden;
position: absolute;
width: 150px;
@include browsers(bg-doctor $time linear infinite);
}
// nine
.nine {
bottom: 0;
height: 110px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 150px;
@include browsers(nine $time linear infinite);
.head {
background-color: $skin-tone;
border-radius: 50% / 60%;
height: 65px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 55px;
.ear {
background-color: $skin-tone - 15;
border-radius: 100%;
height: 15px;
position: absolute;
top: 26px;
width: 7px;
&.left {
left: -5px;
}
&.right {
right: -5px;
}
}
}
.neck {
background-color: $skin-tone;
content: '';
height: 15px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 60px;
width: 20px;
&:after {
border-right: 20px solid $skin-tone - 20;
border-top: 0px solid transparent;
border-bottom: 9px solid transparent;
content: '';
height: 3px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 1px;
width: 0px;
}
}
.hair {
border-radius: 100%;
border-top: 10px solid $hair-dark;
height: 60px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: -5px;
width: 55px;
.side {
background-color: $hair-dark;
height: 20px;
position: absolute;
top: 6px;
width: 6px;
&.left {
border-radius: 100% 0 40% 40%;
left: 0;
@include transform(rotate(10deg));
}
&.right {
border-radius: 0 100% 40% 40%;
right: 0;
@include transform(rotate(-10deg));
}
}
&:after {
border-top: 12px solid $hair-dark;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-radius: 0% 0% 100% 100%;
content: '';
height: 0px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0px;
width: 5px;
}
}
.clothes {
background-color: $black + 5;
border-radius: 20% 20% 0 0;
height: 50px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 70px;
width: 100px;
.center {
background-color: $purple;
bottom: 0;
height: 50px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 20px;
&:before {
border-bottom: 10px solid $skin-tone;
border-radius: 100%;
content: '';
height: 7px;
position: absolute;
top: -5px;
width: 20px;
}
}
.details {
background-color: $black - 5;
height: 20px;
margin: auto;
position: absolute;
width: 25px;
&:after {
background-color: $black - 5;
content: '';
height: 40px;
position: absolute;
top: 22px;
width: 25px;
}
&.left {
border-radius: 100% 0 0 0;
left: -45px;
right: 0px;
&:after {
border-radius: 0 0 0% 100%;
left: 3px;
@include transform(rotate(-10deg));
}
}
&.right {
border-radius: 0 100% 0 0;
left: 0px;
right: -45px;
&:after {
border-radius: 0 0 100% 0;
right: 3px;
@include transform(rotate(10deg));
}
}
}
}
}
// ten
.ten {
bottom: 0;
height: 110px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 150px;
@include browsers(ten $time linear infinite);
.head {
background-color: $skin-tone;
border-radius: 50% / 60%;
height: 65px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 50px;
.ear {
background-color: $skin-tone - 15;
border-radius: 100%;
height: 15px;
position: absolute;
top: 26px;
width: 5px;
&.left {
left: -5px;
}
&.right {
right: -5px;
}
}
}
.neck {
background-color: $skin-tone;
content: '';
height: 15px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 60px;
width: 20px;
&:after {
border-right: 20px solid $skin-tone - 20;
border-top: 0px solid transparent;
border-bottom: 9px solid transparent;
content: '';
height: 3px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 1px;
width: 0px;
}
}
.hair {
border-radius: 100%;
border-top: 16px solid $hair-redish;
height: 60px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: -5px;
width: 55px;
.side {
background-color: $hair-redish;
height: 25px;
position: absolute;
top: 6px;
width: 6px;
&.left {
border-radius: 100% 0 40% 40%;
left: 0;
@include transform(rotate(10deg));
}
&.right {
border-radius: 0 100% 40% 40%;
right: 0;
@include transform(rotate(-10deg));
}
}
.t1 {
border-top: 18px solid $hair-redish;
border-left: 10px solid transparent;
border-right: 15px solid transparent;
left: 5px;
position: absolute;
top: -2px;
width: 2px;
@include transform(rotate(10deg));
}
.t2 {
border-bottom: 18px solid $hair-redish;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: '';
left: 4px;
position: absolute;
top: -21px;
width: 2px;
@include transform(rotate(-15deg) skew(30deg));
}
.t3 {
border-bottom: 18px solid $hair-redish;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: '';
left: 16px;
position: absolute;
top: -26px;
width: 2px;
@include transform(rotate(5deg) skew(30deg));
}
}
.clothes {
background-color: $blue;
border-radius: 20% 20% 0 0;
height: 50px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 70px;
width: 100px;
.details-before {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
margin: auto;
position: absolute;
top: 0px;
width: 0;
&.left {
border-left: 12px solid $blue + 90;
left: -9px;
right: 0;
}
&.right {
border-right: 12px solid $blue + 90;
left: 0;
right: -8px;
}
}
.center {
background-color: $blue + 125;
bottom: 0;
height: 50px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 20px;
}
.tie {
background-color: $red;
height: 32px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 8px;
width: 10px;
&:after {
border-bottom: 5px solid $red;
border-radius: 0 0 100% 100%;
content: '';
height: 7px;
left: -5px;
position: absolute;
top: -10px;
width: 20px;
}
}
.details {
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
height: 0px;
margin: auto;
position: absolute;
width: 0px;
&:after {
border-bottom: 45px solid transparent;
border-top: 0px solid transparent;
content: '';
height: 0px;
position: absolute;
top: 7px;
width: 0px;
}
&.left {
border-right: 18px solid $blue - 15;
left: -40px;
right: 0px;
&:after {
border-right: 20px solid $blue - 15;
left: 5px;
@include transform(rotate(-15deg));
}
}
&.right {
border-left: 18px solid $blue - 15;
left: 0px;
right: -40px;
&:after {
border-left: 20px solid $blue - 15;
right: 5px;
@include transform(rotate(15deg));
}
}
}
}
}
// eleven
.eleven {
bottom: 0;
height: 110px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 150px;
@include browsers(eleven $time linear infinite);
.head {
background-color: $skin-tone;
border-radius: 50% / 60%;
height: 65px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 50px;
.ear {
background-color: $skin-tone - 15;
border-radius: 100%;
height: 15px;
position: absolute;
top: 26px;
width: 5px;
&.left {
left: -5px;
}
&.right {
right: -5px;
}
}
}
.neck {
background-color: $skin-tone;
content: '';
height: 15px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 60px;
width: 20px;
&:after {
border-right: 20px solid $skin-tone - 20;
border-top: 0px solid transparent;
border-bottom: 9px solid transparent;
content: '';
height: 3px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 1px;
width: 0px;
}
}
.hair {
border-top: 22px solid $hair-med;
border-radius: 100% 100% 100% 0;
height: 48px;
left: -10px;
margin: auto;
position: absolute;
right: 0;
top: -9px;
width: 60px;
@include transform(rotate(-30deg));
.side {
border-radius: 0 100% 20% 20%;
background-color: $hair-med;
height: 30px;
position: absolute;
right: -1px;
top: 5px;
width: 8px;
@include transform(rotate(30deg));
}
.t1 {
border-bottom: 16px solid $hair-med;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
left: 15px;
position: absolute;
top: -7px;
width: 0px;
@include transform(rotate(-130deg));
}
}
.clothes {
background-color: $beige;
border-radius: 20% 20% 0 0;
height: 50px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 70px;
width: 100px;
.center {
background-color: $light-pink;
bottom: 0;
height: 50px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 20px;
}
.tie {
background-color: $red;
border-radius: 100%;
height: 6px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 1px;
width: 6px;
&:after {
border-bottom: 6px solid transparent;
border-left: 12px solid $red;
border-top: 6px solid transparent;
border-radius: 30%;
content: '';
height: 0px;
left: -7px;
position: absolute;
top: -3px;
width: 0px;
}
&:before {
border-bottom: 6px solid transparent;
border-right: 12px solid $red;
border-top: 6px solid transparent;
border-radius: 30%;
content: '';
height: 0px;
right: -7px;
position: absolute;
top: -3px;
width: 0px;
}
}
.details {
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-radius: 30%;
height: 0px;
margin: auto;
position: absolute;
width: 0px;
&:after {
border-bottom: 45px solid transparent;
border-top: 15px solid transparent;
content: '';
height: 0px;
position: absolute;
top: 7px;
width: 0px;
}
&.left {
border-right: 18px solid $beige - 15;
left: -29px;
right: 0px;
top: 1px;
@include transform(rotate(240deg));
&:after {
border-right: 17px solid $beige - 15;
left: -18px;
top: -45px;
@include transform(rotate(120deg));
}
}
&.right {
border-left: 18px solid $beige - 15;
left: 0px;
right: -29px;
top: 1px;
@include transform(rotate(-240deg));
&:after {
border-left: 17px solid $beige - 15;
right:-18px;
top: -45px;
@include transform(rotate(-120deg));
}
}
}
&:after {
background-color: $light-pink - 20;
border-radius: 100%;
content: '';
height: 3px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 15px;
width: 3px;
}
&:before {
@extend .clothes:after;
top: 30px;
z-index: 1;
}
}
}
// twelve
.twelve {
bottom: 0;
height: 110px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 150px;
@include browsers(twelve $time linear infinite);
.head {
background-color: $skin-tone;
border-radius: 50% / 60%;
height: 65px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 50px;
.ear {
background-color: $skin-tone - 15;
border-radius: 100%;
height: 15px;
position: absolute;
top: 26px;
width: 5px;
&.left {
left: -5px;
}
&.right {
right: -5px;
}
}
}
.neck {
background-color: $skin-tone;
content: '';
height: 15px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 60px;
width: 20px;
&:after {
border-right: 20px solid $skin-tone - 20;
border-top: 0px solid transparent;
border-bottom: 9px solid transparent;
content: '';
height: 3px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 1px;
width: 0px;
}
}
.hair {
border-radius: 40%;
border-top: 12px solid $hair-old;
height: 60px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: -1px;
width: 50px;
.side {
background-color: $hair-old;
height: 18px;
position: absolute;
top: 7px;
width: 5px;
&.left {
border-radius: 100% 0 40% 40%;
left: -1px;
}
&.right {
border-radius: 0 100% 40% 40%;
right: -1px;
}
}
&:after {
border-top: 6px solid $hair-old;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-radius: 0% 0% 100% 100%;
content: '';
height: 0px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0px;
width: 5px;
}
}
.clothes {
background-color: $dark-purple;
border-radius: 20% 20% 0 0;
height: 50px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 70px;
width: 100px;
.center {
background-color: $white;
bottom: 0;
height: 50px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 20px;
}
.details {
border-bottom: 55px solid transparent;
border-top: 10px solid transparent;
height: 0px;
margin: auto;
position: absolute;
width: 0px;
&.left {
border-right: 20px solid $dark-purple - 15;
left: -27px;
right: 0px;
top: 1px;
@include transform(rotate(-15deg));
}
&.right {
border-left: 20px solid $dark-purple - 15;
left: 0px;
right: -27px;
top: 1px;
@include transform(rotate(15deg));
}
}
.details-before {
border-top: 0px solid transparent;
border-bottom: 15px solid transparent;
margin: auto;
position: absolute;
top: 0px;
width: 0;
&.left {
border-left: 12px solid $white - 25;
left: -9px;
right: 0;
}
&.right {
border-right: 12px solid $white - 25;
left: 0;
right: -8px;
}
}
}
}
// keyframe animations using animation mixin
@include animation(bg-doctor) {
0% {
background-color: $bg-nine;
}
20% {
background-color: $bg-nine;
}
25% {
background-color: $bg-ten;
}
45% {
background-color: $bg-ten;
}
50% {
background-color: $bg-eleven;
}
70% {
background-color: $bg-eleven;
}
75% {
background-color: $bg-twelve;
}
95% {
background-color: $bg-twelve;
}
}
@include animation(nine) {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
25% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 0;
}
70% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@include animation(ten) {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
25% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0;
}
70% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@include animation(eleven) {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
25% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
70% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@include animation(twelve) {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
25% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 0;
}
70% {
opacity: 0;
}
75% {
opacity: 1;
}
95% {
opacity: 1;
}
}
