css实现可爱小兔子和草莓效果代码-html代码-BFW代码库

css实现可爱小兔子和草莓效果代码

代码语言：html

代码描述：css实现可爱小兔子和草莓效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
 <style>
     *{margin:0;padding:0}body{background-color:#92D0CD}.container{width:700px;margin:40px auto 0 auto;text-align:center}.container h1{font-family:"Lobster Two",cursive;font-size:45px;color:#ef4154;text-shadow:3px 0 0 white;margin-bottom:50px}.bunny-icon{height:294px;width:260px;margin:auto;position:relative}.bunny-icon .egg{position:absolute;right:0;bottom:0;height:199px;width:165px}.bunny-icon .egg:before{content:"";display:block;position:absolute;right:0;bottom:0;width:100%;height:30px;background-color:#81c3bf;border-radius:50%}.bunny-icon .egg:after{content:"";display:block;position:absolute;right:0;bottom:11px;width:126px;height:188px;background:#FBCED3;border-top-left-radius:50% 58%;border-top-right-radius:50% 58%;border-bottom-left-radius:50% 40%;border-bottom-right-radius:50% 40%;background-image:radial-gradient(#ef4154 3px,transparent 0),radial-gradient(#ef4154 5px,transparent 0);background-size:30px 30px;background-position:0 0,15px 15px;z-index:5}.bunny-icon .bunny{position:absolute;top:0;left:0;height:195px;width:204px}.bunny-icon .bunny .head{width:88px;height:80px;transform:rotate(-45deg);position:absolute;top:70px;right:20px}.bunny-icon .bunny .head:before{content:"";display:block;position:absolute;top:0;left:0;background-color:#fff;border-radius:50%;width:100%;height:100%;z-index:3}.bunny-icon .bunny .head .ears{position:absolute;top:-80px;left:0;width:90px;height:100px;z-index:1}@keyframes ear-left-animation{0%{transform:rotate(-30deg)}100%{transform:rotate(-25deg)}}@keyframes ear-right-animation{0%{transform:rotate(30deg)}100%{transform:rotate(25deg)}}.bunny-icon .bunny .head .ears .ear{height:100%;width:45px;background-color:#fff;border-radius:50%}.bunny-icon .bunny .head .ears .ear:before{content:"";display:block;height:70px;width:30px;background-color:#FBCED3;border-radius:50%}.bunny-icon .bunny .head .ears .ear-left{position:absolute;top:11px;left:0;transform:rotate(-30deg);animation:ear-left-animation .7s linear 0s infinite alternate;transform-origin:center bottom}.bunny-icon .bunny .head .ears .ear-left:before{position:absolute;top:20px;left:7px}.bunny-icon .bunny .head .ears .ear-right{position:absolute;top:11px;right:0;transform:rotate(30deg);animation:ear-right-animation .7s linear 0s infinite alternate;transform-origin:center bottom}.bunny-icon .bunny .head .ears .ear-right:before{position:absolute;top:20px;left:7px}.bunny-icon .bunny .head .face{position:absolute;top:20px;left:0;right:0;width:50px;height:60px;margin:auto;z-index:4}.bunny-icon .bunny .head .face .eyes{width:30px;position:absolute;top:0;left:0;right:0;margin:auto;height:16px}.bunny-icon .bunny .head .face .eyes:before,.bunny-icon .bunny .head .face .eyes:after{content:"";display:block;width:6px;height:100%;background-color:#4B4B4B;border-radius:50%;border:1px solid black;box-sizing:border-box}.bunny-.........完整代码请登录后点击上方下载按钮下载查看