Smily Eyes and Lips code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Smily Eyes and Lips</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="smily"> <div class="eyes"></div> <div class="lips"></div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } .smily { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; background: gold; border-radius: 50%; border: 5px solid red; } .eyes::before, .eyes::after { content: ''; position: absolute; top: 30%; width: 25px; height: 25px; border-radius: 50%; background: blue; transition: 0.5s; } .eyes::before { left: 25%; } .eyes::after { right: 25%; } .smily:hover .eyes::before, .smily:hover .eyes::after { width: 30px; height: 45px; } .lips { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 100px; height: 100px; border: 10px solid transparent; border-bottom: 10px solid blue; border-radius: 0; transition: 0.5s; } .smily:hover .lips { width: 130px; border-radius: 50%; }
