CSS
h1 {
text-shadow: black 1px 1px;
text-align: center;
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
font-size: 30px;
font-style: light;
}
body {
background-color:#EA4C89;
padding:100px;
}
.lolipop, .lolipop:after, .lolipop:before, .hover, .stick {
-moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.lolipop {
width:100px;
height:100px;
border-radius:50%;
background-color:lightp;
margin:0 auto;
border: 4px solid #272727;
overflow:hidden;
box-shadow: -8px 8px rgba(39, 39, 39, 0.25);
}
.lolipop:after {
content:'';
display: block;
position:relative;
bottom: 35px;
left: 5px;
width:100px;
height:100px;
border-radius:50%;
background-color:pink;
}
.lolipop:before {
content:'';
display: block;
position:relative;
top:20px;
left: 45px;
width:25px;
height:25px;
border-radius:50%;
background-color:white;
z-index:1;
}
.lolipop:hover:after {
left:-15px;
}
.lolipop:hover:before {
left:25px;
}
.lolipop:hover {
box-shadow: 8px 8px rgba(39, 39, 39, 0.25);
}
.stick {
display:block;
width:10px;
height: 175px;
background-color:white;
border-radius:5px;
margin:-12px auto 0;
box-shadow: -7px 14px rgb(186, 67, 113);
}
.stick:before {
content: "";
display: block;
width: 8px;
height: 6px;
background-color: #f7bfd5;
border-radius: 50%;
position: relative;
top: 168px;
left: 1px;
}
.hover {
box-shadow: 7px 14px rgb(186, 67, 113);
}
1 Response