div+css布局实现一个招财猫动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css布局实现一个招财猫动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: darkslategrey; } .wrapper { display: flex; width: 100%; height: 100%; margin-top: 20px; flex-direction: column; justify-content: center; align-items: center; } .container { position: relative; width: 340px; display: flex; justify-content: space-between; flex-direction: column; /* transform: scale(0.5); */ } .ears { display: flex; width: 100%; justify-content: space-between; } .ear-left-out { height: 110px; width: 110px; border: solid 8px black; background-color: white; border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%; position: relative; transform: rotate(3deg); } .ear-left-inner { height: 60px; position: absolute; top: 30px; left: 30px; width: 60px; background-color: #DF4A63; border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%; border: solid 8px black; } .ear-right-out { height: 110px; width: 110px; border: solid 8px black; background-color: white; border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%; position: relative; transform: rotate(84deg); } .ear-right-inner { height: 60px; position: absolute; top: 30px; right: 30px; width: 60px; background-color: #DF4A63; border-radius: 26% 74% 72% 28% / 28% 38% 62% 72%; transform: rotate(88deg); border: solid 8px black; } .head { height: 250px; width: 300px; top: 10px; left: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% ; border: solid 8px black; background-color: white; position: absolute; z-index: 2; } .eyes { display: flex; justify-content: space-around; padding-top: 85px; height: 35px; } .eye-left::after { content: ' '; position: absolute; height: 12px; display: inline-block; width: 12px; left: 1px; top: 0px; background-color: black; border-radius: 61%; } .eye-left::before { content: ' '; position: absolute; height: 12px; display: inline-block; width: 12px; right: 1px; top: 0px; background-color: black; border-radius: 61%; } .eye-left { z-index: 1; width: 74px; height: 74px; border: 12px solid; border-color: black transparent transparent transparent; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(3deg); } .eye-right::after { content: ' '; position: absolute; height: 12px; display: inline-block; width: 12px; left: 1px; top: 0px; background-color: black; border-radius: 61%; } .eye-right::before { content: ' '; position: absolute; height: 12px; display: inline-block; width: 12px; right: 1px; top: 0px; background-color: black; border-radius: 61%; } .eye-right { z-index: 1; width: 74px; height: 74px; border: 12px solid; border-color: black transparent transparent transparent; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(-3deg); } .face-center { display: flex; width: 100%; } .face-wrapper { /* position: relative; */ } .mustache-left { background-color: black; width: 50px; height: 8px; border-radius: 7% 93% 93% 7% / 47% 53% 47% 53%; position: absolute; top: 140px; left: 14px; } .mustache-right-bottom { background-color: black; width: 50px; height: 8px; border-radius: 93% 7% 7% 93% / 53% 47% 53% 47%; position: absolute; top: 155px; left: 240px; transform: rotate(8deg); } .mustache-right { background-color: black; width: 50px; height: 8px; border-radius:93% 7% 7% 93% / 53% 47% 53% 47%; position: absolute; top: 140px; left: 240px; } .mustache-left-bottom { background-color: black; width: 50px; height: 8px; border-radius: 7% 93% 93% 7% / 47% 53% 47% 53%; position: absolute; top: 155px; left: 14px; transform: rotate(-8deg); } .nose { position: absolute; top: 130px; left: 135px; height: 20px; width: 35px; background-color: black; border-radius: 46% 54% 49% 51% / 66% 65% 35% 34%; } .mouth { position: absolute; z-index: 1; top: 110px; left: 80px; width: 60px; height: 60px; border: 8px solid; border-color: transparent black black transparent; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(45deg); } .mouth-right { position: absolute; z-index: 1; top: 110px; left: 147px; width: 60px; height: 60px; border: 8px solid; border-color: transparent black black transparent; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(45deg); } .necklace { height: 95px; background-color: #DF4A63; margin-top: 70px; border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%; width: 250px; align-self: center; border: solid 8px black; position: relative; z-index: 1; } .bell { background-color: #F9D552; border-radius: 50%; position: absolute; top: 82px; left: 90px; height: 50px; width: 50px; border: solid 8px black; } .reflect { height: 13px; width: 20px; background-color: white; border-radius: 50%; position: absolute; top: 5px; right: 9px; transform: rotate(25deg); } .bell:before { content: ''; height: 16px; width: 16px; border-radius: 50%; background-color: black; position: absolute; bottom: 3px; left: 18px; } .bell:after { content: ''; height: 15px; width: 8px; background-color: black; position: absolute; bottom: 0px; left: 22px; } .arm-top-left-wrapper { z-index: 0; } .arm-top-left { position: absolute; display: flex; top: 200px; width: 220px; left: 6px; height: 240px; background: #fff; border: 8px solid black; transform: rotate(50deg); border-radius.........完整代码请登录后点击上方下载按钮下载查看
网友评论0