div+css实现可爱小兔子效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现可爱小兔子效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; margin: 0; } .shadow { background: rgba(150,150,150,.1); width: 150px; height: 50px; border-radius: 100%; position: absolute; top: 104px; left: -25px; z-index: -1; } .rabbit { width: 350px; margin: auto; z-index: 1000; position: relative; } .canvas { background: #ADD8CE; color: #ADD8CE; /*width: 400px;*/ height: 100%; position: relative; } /* Eears Begin*/ .rabbit-ears { position: relative; left: 100px; top: 80px; } .rabbit-ears-outer-left { background: white; color: white; height: 65px; width: 30px; top: 40px; left: 60px; position: relative; float: left; transform: rotate(-20deg); border-top-left-radius: 55%; border-top-right-radius: 55%; border-bottom-left-radius: 60%; border-bottom-right-radius: 60%; } .rabbit-ears-outer-right { background: white; color: white; height: 65px; width: 30px; top: 40px; left: 80px; position: relative; transform: rotate(deg); border-top-left-radius: 55%; border-top-right-radius: 55%; border-bottom-left-radius: 60%; border-bottom-right-radius: 60%; } .rabbit-ears-inner { position: relative; left: 110px; top: 20px; } .rabbit-ears-inner-left { background: #f3c5c7; color: #f3c5c7; height: 55px; width: 15px; top: 50px; left: 60px; position: relative; float: left; transform: rotate(-20deg); border-top-left-radius: 60%; border-top-right-radius: 60%; border-bottom-left-radius: 55%; border-bottom-right-radius: 55%; } .rabbit-ears-inner-right { background: #f3c5c7; color: #f3c5c7; height: 55px; width: 15px; top: 50px; left: 75px; position: relative; transform: rotate(deg); border-top-left-radius: 60%; border-top-right-radius: 60%; border-bottom-left-radius: 55%; border-bottom-right-radius: 55%; } /* Eears End*/ /* Eyes Begin*/ .rabbit-eyes { width: 50px; z-index: 1000; left: 25px; top: 30px; position: relative; } .rabbit-eyes-left { width: 12px; height: 11px; border: 3px solid black; border-bottom: none; border-right: none; border-radius: 15px; transform: rotate(25deg); float: left; } .rabbit-eyes-right { width: 12px; height: 11px; border: 3px solid black; border-bottom: none; border-left: none; border-radius: 15px; transform: rotate(-25deg); float: right; } /* Eyes End*/ /* Arms Begin*/ .rabbit-arms { width: 100px; z-index: 1000; transform: rotate(-70deg); left: -85px; top: -30px; position: absolute; } .rabbit-arms-left { width: 30px; height: 10px; border: 2px solid rgba(3,3,3,.1); border-left: none; border-top-right-radius: 100%; border-bottom-right-radius: 100%; transform: rotate(50deg) } .rabbit-arms-right { position: relative; left: 50px; width: 30px; height: 10px; border: 2px solid rgba(3,3,3,.1); border-right: none; border-top-left-radius: 100%; border-bottom-left-radius: 100%; transform: rotate(-50deg) } /* Arms End*/ /* Body Begin*/ .rab.........完整代码请登录后点击上方下载按钮下载查看
网友评论0