css实现一个招财猫招手动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个招财猫招手动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background: #4b477a; margin: 0; } .container { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 250px; height: 445px; } .face { position: absolute; z-index: 1; width: 250px; height: 210px; background: #fff; border: 5px solid #43101d; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; overflow: hidden; } .brown-spot { position: absolute; top: -10px; left: 75px; width: 90px; height: 80px; background: #eaaf7a; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .ear { position: absolute; width: 120px; height: 150px; background: #fff; border: 5px solid #43101d; -webkit-border-radius: 5% 100% 20% 100%; -moz-border-radius: 5% 100% 20% 100%; border-radius: 5% 100% 20% 100%; } .ear.right { left: 130px; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); transform: scaleX(-1); } .ear:after { position: absolute; content: ''; top: 13px; left: 12px; width: 50px; height: 70px; background: #eb5759; -webkit-border-radius: 5% 80% 20% 80%; -moz-border-radius: 5% 80% 20% 80%; border-radius: 5% 80% 20% 80%; } .eye { position: absolute; z-index: 1; top: 90px; left: 56px; width: 47px; height: 47px; border: 5px solid; border-color: transparent transparent #43101d #43101d; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); } .eye.right { position: absolute; content: ''; left: 147px; } .nose { position: absolute; z-index: 2; top: 138px; left: 117px; width: 16px; height: 5px; background: #43101d; -webkit-border-radius: 30% 30% 100% 100%; -moz-border-radius: 30% 30% 100% 100%; border-radius: 30% 30% 100% 100%; } .mouth { position: absolute; z-index: 1; top: 130px; left: 93px; width: 35px; height: 25px; border: 4px solid; border-color: transparent #eb5759 #eb5759 transparent; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); } .mouth.right { position: absolute; content: ''; left: 122px; width: 35px; height: 25px; border-color: transparent #eb5759 #eb5759 transparent; -webkit-transform: scaleX(-1) rotate(30deg); -moz-transform: scaleX(-1) rotate(30deg); transform: scaleX(-1) rotate(30deg); } .collar { position: absolute; top: 130px; left: 35px; width: 180px; height: 100px; background: #eb5759; border: 5px solid #43101d; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; border-radius: 50% 50%; } .bell { position: absolute; top: 80px; left: 60px; width: 50px; height: 50px; background: #fef394; border: 5px solid #43101d; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .bell:before { position: absolute; content: ''; top: 28px; left: 9px; width: 22px; height: 4px; background: #43101d; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); } .bell:after { position: absolute; content: ''; top: 16px; left: 13px; width: 14px; height: 14px; background: #43101d; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); } .whisker { position: absolute; z-index: 1; top: 135px; left: 39px; width: 40px; height: 5px; background: #43101d; -webkit-transform: rotate(170deg); -moz-transform: rotate(170deg); transform: rotate(170deg); } .whisker.left-bottom { top: -13px; left: 2px; -webkit-transform: rotate(170deg); -moz-transform: rotate(170deg); transform: rotate(170deg); } .whisker.right-top { top: -23px; left: -130px; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); transform: rotate(-160deg); } .whisker.right-bottom { top: -36px; left: -128px; -webkit-transform: rotate(-150deg); -moz-transform: rotate(-150deg); transform: rotate(-150deg); } .cat-body { position: absolute; z-index: -1; top: 170px; width: 250px; height: 260px; background: #fff; border: 5px solid #43101d; -webkit-border-radius: 70% 70% 50% 50% / 100% 100% 50% 50%; -moz-border-radius: 70% 70% 50% 50% / 100% 100% 50% 50%; border-radius: 70% 70% 50% 50% / 100% 100% 50% 50%; } .green-spot { position: absolute; left: 60px; width: 120px; height: 120px; /*background: #7fa74f;*/ background: #55c069; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .arm { position: absolute; z-index: 1; width: 70px; height: 120px; background: #fff; border: 5px solid #43101d; -webkit-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0