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; b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0