CSS Moon - dribbble rebound

Developer
Size
2,929 Kb
Views
12,144

How do I make an css moon - dribbble rebound?

Rough CSS version of the moon in this shot by Mariela Pena. What is a css moon - dribbble rebound? How do you make a css moon - dribbble rebound? This script and codes were developed by Adam Orchard on 02 December 2022, Friday.

CSS Moon - dribbble rebound Previews

CSS Moon - dribbble rebound - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Moon - dribbble rebound</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #3B4757;
}
.moon { position: absolute; left: 50%; top: 50%; margin: -100px; width: 200px; height: 200px; background: #c7cbd0; border-radius: 50%; box-shadow: inset -25px 0px 0 0px #9098a1; -webkit-backface-visibility: hidden; transition: transform 0.2s ease-in-out;
}
.moon:hover { transform: scale(1.2);
}
li { position: absolute; list-style: none; background: #737277; border-radius: 50%;
}
li:nth-child(1) { left: 25px; top: 60px; width: 50px; height: 50px; box-shadow: inset 6px -2px 0 0px #414043;
}
li:nth-child(2) { left: 150px; top: 50px; width: 25px; height: 25px; box-shadow: inset 3px -1px 0 0px #414043;
}
li:nth-child(3) { left: 100px; top: 150px; width: 25px; height: 25px; box-shadow: inset 3px -1px 0 0px #414043;
}
li:nth-child(4) { left: 50px; top: 150px; width: 12.5px; height: 12.5px; box-shadow: inset 2.4px -0.8px 0 0px #414043;
}
li:nth-child(5) { left: 87.5px; top: 16.66666667px; width: 12.5px; height: 12.5px; box-shadow: inset 2.4px -0.8px 0 0px #414043;
}
li:nth-child(6) { left: 114.28571429px; top: 80px; width: 12.5px; height: 12.5px; box-shadow: inset 2.4px -0.8px 0 0px #414043;
}
li:nth-child(7) { left: 181.81818182px; top: 100px; width: 12.5px; height: 12.5px; box-shadow: inset 2.4px -0.8px 0 0px #414043;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="moon"> <ul> <li /> <li /> <li /> <li /> <li /> <li /> <li /> </ul>
</div>
</body>
</html>

CSS Moon - dribbble rebound - Script Codes CSS Codes

body { background: #3B4757;
}
.moon { position: absolute; left: 50%; top: 50%; margin: -100px; width: 200px; height: 200px; background: #c7cbd0; border-radius: 50%; box-shadow: inset -25px 0px 0 0px #9098a1; -webkit-backface-visibility: hidden; transition: transform 0.2s ease-in-out;
}
.moon:hover { transform: scale(1.2);
}
li { position: absolute; list-style: none; background: #737277; border-radius: 50%;
}
li:nth-child(1) { left: 25px; top: 60px; width: 50px; height: 50px; box-shadow: inset 6px -2px 0 0px #414043;
}
li:nth-child(2) { left: 150px; top: 50px; width: 25px; height: 25px; box-shadow: inset 3px -1px 0 0px #414043;
}
li:nth-child(3) { left: 100px; top: 150px; width: 25px; height: 25px; box-shadow: inset 3px -1px 0 0px #414043;
}
li:nth-child(4) { left: 50px; top: 150px; width: 12.5px; height: 12.5px; box-shadow: inset 2.4px -0.8px 0 0px #414043;
}
li:nth-child(5) { left: 87.5px; top: 16.66666667px; width: 12.5px; height: 12.5px; box-shadow: inset 2.4px -0.8px 0 0px #414043;
}
li:nth-child(6) { left: 114.28571429px; top: 80px; width: 12.5px; height: 12.5px; box-shadow: inset 2.4px -0.8px 0 0px #414043;
}
li:nth-child(7) { left: 181.81818182px; top: 100px; width: 12.5px; height: 12.5px; box-shadow: inset 2.4px -0.8px 0 0px #414043;
}
CSS Moon - dribbble rebound - Script Codes
CSS Moon - dribbble rebound - Script Codes
Home Page Home
Developer Adam Orchard
Username orchard
Uploaded December 02, 2022
Rating 3.5
Size 2,929 Kb
Views 12,144
Do you need developer help for CSS Moon - dribbble rebound?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam Orchard (orchard) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!