css+scene实现大熊猫在竹林吃竹子动画效果代码
代码语言:html
所属分类:动画
代码描述:css+scene实现大熊猫在竹林吃竹子动画效果代码
代码标签: css scene 大熊猫 竹林 吃 竹子 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body, .container { position: relative; margin: 0; padding: 0; height: 100%; } body { background: #ABD583; } .container { overflow: hidden; } .panda { position: absolute; width: 150px; height: 180px; left: 50%; bottom: 50%; transform: translate(-50%, 98px) translateX(20px); } .body { position: absolute; width: 95px; height: 100px; /* border: 2px solid #333; */ background: #333; top: 80px; left: 5px; border-radius: 30% 70% 30% 30% / 70% 70% 30% 30%; } .belly { position: absolute; width: 100%; height: 100%; background: inherit; border-radius: inherit; overflow: hidden; } .belly:after { position: absolute; content: ""; width: 100%; height: 57px; background: #fff; border-radius: 50% 50% 30% 30% / 30% 30% 40% 40% ; right: 0; bottom: 0; } .leg { position: absolute; width: 70px; height: 30px; left: 25px; bottom: -2px; background: #333; border-radius: 15px 55px 50px 15px / 50% 60% 5px 50%; } .foot { position: absolute; width: 16px; height: 32px; background: #333; right: -6px; bottom: 1px; border-radius: 60% 40% 4px 60% / 20px 8px 4px 2px; } .leg.left { left: 35px; bottom: 5px; } .arm, .hand, .forearm { position: absolute; width: 30px; height: 60px; background: #333; border-radius: 50% 50% / 15px; transform-origin: 50% 15px; } .forearm, .hand { top: calc(100% - 30px); } .arm { top: 14px; height: 60px; } .hand { height: 50px; } .hand:after { position: absolute; content: ""; width: 100%; height: 100%; background: inherit; border-radius: inherit; } .arm.left { top: 0; left: 30px; transform: rotate(-70deg); } .arm.right { left: 10px; transform: rotate(-60deg); } .arm.right .forearm { transform: rotate(-20deg); } .arm.right .hand { transform: rotate(-20deg); } .arm.left .forearm { transform: rotate(-40deg); } .arm.left .hand { transform: rotate(-20deg); } .head { position: absolute; background: #fff; width: 110px; height: 100px; bottom: 85%; left: -6%; border-radius: 50% 50% 40px 45px / 50% 50% 35% 35%; } .head.front { background: transparent; overflow: hidden; } .face { position: absolute; width: 100%; height: 100%; background: inherit; border-radius: inherit; } .eye { position: absolute; width: 40px; height: 22px; background: #333; border-radius: 50%; top: 40px; } .eye:after { position: absolute; content: ""; width: 5px; height: 5px; background: #393939; border-radius: 50%; top: 36%; } .eye.right { right: 43%; transform: rotate(-50deg); } .eye.right:after { right: 15px; } .eye.left { right: 3%; transform: rotate(50deg); } .eye.left:after { left: 15px; } .ear { position: absolute; width: 30px; height: 30px; background: #333; border-radius: 50%; } .ear.left { top: -2px; left: 2px; } .ear.right { top: -2px; right: 2px; } .nose { position: absolute; width: 18px; height: 10px; top: 70%; left: 50%; background: #333; border-radius: 50% / 30% 30% 70% 70%; } .nose:after { position: absolute; content: ""; width: 100%; height: 100%; background: inherit; border-radius: inherit; } .mustache { position: absolute; content: ""; width: 10px; height: 6px; border: 2px solid #333; background: #fff; border-top: 0; border-radius: 0 0 50% 50% / 0 0 60% 60%; top: 95%; } .mustache.left { right: 48%; border-left: 2px solid transparent; } .mustache.right { left: 48%; border-right: 2px solid transparent; } .mouth { position: absolute; width: 18px; height: 20px; bottom: 0px; left: 50%; box-sizing: border-box; border-bottom: 14px solid #fff; } .mouth:before { position: absolute; content: ""; width: 100%; height: 100%; border: 2px solid #555; border-top: 0; border-radius: 0 0 3px 3px; box-sizing: border-box; } .bamboo { position: absolute; font-size: 0; width: 14px; box-sizing: border-box; transform-origin: 50% 100%; } .bamboo.joint2 { height: 166px; } .bamboo .joint { position: relative; background: #60BC67; width: calc(100% - 6px); height: 80px; margin: auto; } .bamboo .joint:first-child { margin-top: 3px; } .bamboo .joint:before, .bamboo .joint:after { position: absolute; content: ""; width: calc(100% + 3px); height: 6px; border-radius: 3px; background: #509D56; left: 50%; transform: translate(-50%, -50%); z-index: 1; } .bamboo .joint:before { top: 0%; } .bamboo .joint:after { top: 100%; } .leaf { position: absolute; width: 21px; height: 43px; transform-origin: 50% 100%; bottom: 0; } .leaf:before { content: ""; position: relative; display: block; width: 30px; height: 30px; border-radius: 100% 0; background: #509D56; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .leaf.light:before { background: #60BC67; } .leaf.right { left: -5px; transform: rotate(45deg) scaleX(0.7); } .leaf.right30 { transform: rotate(30deg) scaleX(0.7); } .leaf.right60 { transform: rotate(60deg) scaleX(0.7); } .leaf.left { right: -5px; } .leaf.left30 { transform: rotate(-30deg) scaleX(0.7); } .leaf.left60 { transform: rotate(-60deg) scaleX(0.7); } .leaf.left90 { transform: rotate(-90deg) scaleX(0.7); } .hand .bamboo { bottom: -40px; right: 50%; transform: translate(-50%) rotate(-90deg); transform-origin: 50% calc(100% - 55px); overflow: hidden; } .bamboo1 { bottom: 50%; right: 50%; z-index: 0; transform: translate(-98px, 68px); z-index: 0; } .bamboo-group { position: absolute; bottom: 50%; } .bamboo-group .bamboo { bottom: 0; } .bamboo-group .bamboo:nth-child(1) { left: 0px; transform: rotate(0deg); } .bamboo-group .bamboo:nth-child(2) { left: 15px; transform: rotate(4deg); } .bamboo-group .bamboo:nth-child(3) { left: 30px; transform: rotate(8deg); } .bamboo-group1 { left: 50%; width: 80px; transform: translate(110px, 70px); } .bamboo-group2 { right: 50%; width: 80px; transform: translate(-116px, 66px) scaleX(-1); } .bamboo-group3 { left: 50%; width: 80px; transform: translate(112px, 66px) scale(0.9) rotate(1deg); z-index: -1; } .bamboo-group4 { right: 50%; width: 80px; transform: translate(-122px, 66px) scale(0.9) scaleX(-1) rotate(1deg); z-index: -1; } .bamboo-group4 .bamboo:nth-child(4) { left: -24px } .dark .joint:before, .dark .joint:after, .dark .leaf:before { background: #5b8224; } .dark .joint, .dark .leaf.light:before { background: #649126; } </style> </head> <body> <div class="container"> <div class="bamboo joint2 bamboo1"> <div class="joint"></div> <div class="joint"></div> </div> <div class="bamboo-group bamboo-group1"> <div class="bamboo"> <div class="joint"> <div class="leaf left left60 light"></div> <div class="leaf left left30"></div> </div> <div class="joint"></div> <div class="joint"></div> </div> <div class="bamboo"> <div class="joint"> <div class="leaf left left60 light"></div> <div class="leaf left left30"></div> </div> <div class="joint"></div> </div> <div class="bamboo"> <div class="joint"></div> <div class="joint"> <div class="leaf right right60 light"></div> <div class="leaf right right90"></div> </div> <div class="joint"></div> </div> </div> <div class="bamboo-group bamboo-group2"> <div class="bamboo"> <div class="joint"> <div class="leaf left left60 light"></div> <div class="leaf left left30"></div> </div> <div class.........完整代码请登录后点击上方下载按钮下载查看
网友评论0