div+css实现可爱小兔子卡通效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现可爱小兔子卡通效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: lightblue; position: relative; color: #fff; font-family: "Futura", san-serif; } body h1 { font-size: 30px; margin-top: 50px; text-align: center; } body #rabbit { position: relative; height: 400px; width: 300px; margin: 0 auto; } body #rabbit .yum { font-size: 10px; position: absolute; left: 38%; top: 60px; transform: rotate(-20deg) translate(50%, 50%); animation: sound 5s ease infinite normal forwards; } body .face { position: absolute; top: 20%; left: 50%; width: 100px; height: 100px; background: #fff; border-radius: 50px 50px 50px 50px/50px 50px 40px 40px; transform: translateY(-50%); transform: translateX(-50%); margin: 0 auto; margin-top: 50px; } body .face .ear { background: #fff; width: 30px; height: 100px; border-radius: 50%; position: absolute; top: -70%; transform: translateY(-50%); transform: translateX(-50%); } body .face .ear:after { content: ""; display: block; background: pink; width: 15px; height: 70px; border-radius: 50%; position: absolute; transform: translateY(-50%); transform: translateX(-50%); top: 20%; left: 50%; } body .face .ear-left { left: 20%; } body .face .ear-right { left: 80%; } body .face .eye { background: #000; width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 53%; transform: translateY(-50%); transform: translateX(-50%); z-index: 1; animation: blink 5s ease 0 infinite; } body .face .eye-left { left: 28%; } body .face .eye-right { left: 72%; } body .face .nose { width: 10px; height: 5px; background: pink; border-radius: 0 0 50% 50%/0 0 70% 70%; position: absolute; top: 68%; left: 50%; transform: translateY(-50%); transform: translateX(-50%); } body .face .nose:before, body .face .nose:after { content: ""; display: block; background: #fff; width: 45px; height: 40px; position: absolute; transform: translateY(-50%); transform: translateX(-50%); border-radius: 50%; top: -170%; } body .face .nose:before { left: -250%; animation: fill-left 1s ease 0 infinite; } body .face .nose:after { left: 350%; animation: fill-right 1s ease 0 infinite; } body .face:after { content: ""; display: block; position: absolute; top: 95%; width: 100px; height: 100px; background: #fff; border-radius: 30px 30px 50px 50px/50px 50px 30px 30px; } body .mouse { border-top: solid 1px lightgray; width: 10px; height: 10px; border-radius: 50%; position: absolute; transform: translateY(-50%); transform: translateX(-50%); top: 83%; left: 50%; animation: chew 0.4s ease 0 infinite; } body .foot { background: #fff; border: solid 1px lightgray; border-top: none; border-radius: 0 0 50% 50%/0 0 25% 25%; width: 33px; height: 40px; position: absolute; transform: translateY(-50%); transform: translateX(-50%); top: 160%; z-index: 1; } body .foot-left { left: 25%; } body .foot-left:before { content: ""; display: block; background: #fff; border-radius: 50% 0 0 50%; width: 18px; height: 30px; position: absolute; transform: translateY(-50%); transform: translateX(-50%); top: 12%; left: -30%; } body .foot-right { left: 75%; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0