<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS matryoshka</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
<div class="matryoshka">
<div class="top">
<div class="scarf"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<div class="bottom">
<div class="belly"></div>
<div class="apron"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/pixelass/css-matryoshka-wBqEvp */
@charset "UTF-8";
html {
font-size: 1em;
z-index: -2;
visibility: hidden;
}
body {
overflow: hidden;
height: 100vh;
width: 100vw;
margin: 0;
font-size: 4vmin;
}
.matryoshka {
font-size: 1em;
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
margin: -10em -5em;
height: 20em;
width: 10em;
display: flex;
flex-flow: row wrap;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: -webkit-transform 1s 1s linear;
transition: transform 1s 1s linear;
transition: transform 1s 1s linear, -webkit-transform 1s 1s linear;
visibility: visible;
}
.matryoshka .top, .matryoshka .bottom {
position: relative;
box-shadow: 0 0 0 2px #000;
flex: 0 0 100%;
transition: -webkit-transform 1s linear;
transition: transform 1s linear;
transition: transform 1s linear, -webkit-transform 1s linear;
}
.matryoshka:hover > .top {
-webkit-transform: translatey(-150%);
transform: translatey(-150%);
}
.matryoshka:hover > .bottom {
-webkit-transform: translatey(150%);
transform: translatey(150%);
}
.matryoshka .matryoshka {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.matryoshka .top {
border-radius: 100% 100% 0 0;
background: #FFF59D;
z-index: 2;
}
.matryoshka .top:before {
content: '';
position: absolute;
width: 12em;
height: 7em;
bottom: 0;
left: 50%;
margin-left: -6em;
background: inherit;
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
box-shadow: 0 0 0 2px #000;
}
.matryoshka .top:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background: inherit;
border-radius: inherit;
}
.matryoshka .face {
position: absolute;
top: 1em;
left: 50%;
width: 90%;
height: 7em;
margin-left: -45%;
background: #FFFDE7;
z-index: 2;
border-radius: 100%;
overflow: hidden;
box-shadow: inherit;
}
.matryoshka .face:before {
content: '';
height: 2em;
width: 70%;
background: #000;
position: absolute;
top: 0;
right: 0;
border-radius: 0 0 100% 100%;
}
.matryoshka .face:after {
content: '';
height: 2em;
width: 30%;
background: #000;
position: absolute;
top: 0;
left: 0;
border-radius: 0 0 100% 100%;
}
.matryoshka .eyes {
position: absolute;
top: 2em;
left: 50%;
width: 1em;
margin-left: -0.5em;
}
.matryoshka .eyes:before {
content: '';
box-shadow: -1px -3px 0 #000, 3px 0 0 #000, 3px -3px 0 #000;
border-radius: 130% 0 70%;
height: 1.5em;
width: 1.5em;
position: absolute;
top: 0.5em;
right: -2em;
-webkit-transform: scaley(0.7) rotate(45deg);
transform: scaley(0.7) rotate(45deg);
}
.matryoshka .eyes:after {
content: '';
box-shadow: -3px -1px 0 #000, 0 3px 0 #000, -3px 3px 0 #000;
border-radius: 130% 0 70%;
height: 1.5em;
width: 1.5em;
position: absolute;
top: 0.5em;
left: -2em;
-webkit-transform: scaley(0.7) rotate(45deg);
transform: scaley(0.7) rotate(45deg);
}
.matryoshka .eyes .left {
position: absolute;
top: 0.8em;
left: -1.7em;
background: #000;
height: 1em;
width: 1em;
border-radius: 100%;
}
.matryoshka .eyes .left:before {
content: '';
position: absolute;
top: -0.6em;
right: 0.9em;
height: 0.7em;
width: 1em;
box-shadow: -4px 2px 0 0 #FFFDE7, -7px 3px 0 0 #000, -10px 4px 0 0 #FFFDE7, -13px 5px 0 0 #000, -16px 6px 0 0 #FFFDE7, -19px 7px 0 0 #000;
border-radius: 0 0 0 100%;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.matryoshka .eyes .right {
position: absolute;
top: 0.8em;
right: -1.7em;
background: #000;
height: 1em;
width: 1em;
border-radius: 100%;
}
.matryoshka .eyes .right:before {
content: '';
position: absolute;
top: -0.6em;
left: 0.9em;
height: 0.7em;
width: 1em;
box-shadow: 4px 2px 0 0 #FFFDE7, 7px 3px 0 0 #000, 10px 4px 0 0 #FFFDE7, 13px 5px 0 0 #000, 16px 6px 0 0 #FFFDE7, 19px 7px 0 0 #000;
border-radius: 0 0 100%;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.matryoshka .scarf {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
background: #B71C1C;
z-index: 1;
border-radius: 100%;
box-shadow: inherit;
}
.matryoshka .scarf:before {
content: '';
position: absolute;
z-index: 4;
bottom: 0;
right: 50%;
height: 2em;
width: 2em;
border-radius: 100% 0;
background: inherit;
box-shadow: inherit;
}
.matryoshka .scarf:after {
content: '';
position: absolute;
z-index: 4;
bottom: 0;
left: 50%;
height: 2em;
width: 2em;
border-radius: 0 100%;
background: inherit;
box-shadow: inherit;
}
.matryoshka .mouth {
position: absolute;
bottom: 1em;
left: 50%;
margin-left: -0.45em;
height: 0.9em;
width: 0.9em;
background: #C62828;
border-radius: 100%;
box-shadow: -0.3em -0.2em 0 -0.1em #C62828, 0.3em -0.2em 0 -0.1em #C62828;
}
.matryoshka .mouth:before {
content: '';
height: 5px;
width: 200%;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
margin: -0.1em -100%;
background: inherit;
}
.matryoshka .bottom {
background: #FFF59D;
z-index: 1;
}
.matryoshka .bottom:before {
content: '';
position: absolute;
width: 12em;
height: 3em;
bottom: 0;
left: 50%;
margin-left: -6em;
background: inherit;
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
box-shadow: 0 0 0 2px #000;
}
.matryoshka .bottom:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background: inherit;
border-radius: inherit;
}
.matryoshka .belly {
position: absolute;
width: 12em;
height: 10em;
top: 0;
left: 50%;
margin-left: -6em;
background: inherit;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
box-shadow: 0 0 0 2px #000;
}
.matryoshka .apron {
position: absolute;
z-index: 2;
top: 0;
left: 50%;
margin-left: -45%;
font-size: 2em;
width: 90%;
height: 100%;
text-align: center;
background: #B71C1C;
border-radius: 30% 30% 0 0;
box-shadow: inherit;
overflow: hidden;
color: #fff;
}
.matryoshka .apron:before {
content: "❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁ ❁";
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
