100-project-100-days-website/100_projects/84-eyes-follow-mouse/style.css
2023-05-16 09:31:53 +03:00
Ask

41 lines
832 B
CSS

{ecb4d073ca0a70e0b9028ff8f2bc631951f9c47a true 832 style.css 0xc00b097ce0}

body{
margin: 0;
padding: 0;
min-height: 100vh;
background-image: linear-gradient(to bottom, #34495e, #335066, #30576e, #2c5e76, #26657d, #206c83, #197288, #10798d, #058191, #008895, #009098, #00979a);
}
.eyes{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
@media(max-width:767px){
.eyes{
display: flex;
justify-content: center;
align-items: center;
}
}
.eye{
width: 240px;
height: 120px;
background: #fff;
display: inline-block;
margin: 40px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.ball{
width: 40px;
height: 40px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
border: 15px solid #333;
}