css+scene实现树木生长新芽开花落下动画效果代码
代码语言:html
所属分类:动画
代码描述:css+scene实现树木生长新芽开花落下动画效果代码
代码标签: css scene 树木 生长 新芽 开花 落下 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background : #FEFDE3; } .slope { background: #CADC88; width: 100%; height: 100px; border-radius: 50% 50% 0px 0px / 100% 100% 0px 0px; overflow: hidden; z-index: -1; } .slope:before { content: ""; background: #F2EDB4; border-radius: 50%; width:80px; height: 30px; position: absolute; left:50%; margin-left: -40px; top:-5px; } .background { width: 350px; height: 445px; position: absolute; margin: auto; bottom: 0; left: -200px; right: -200px; } .background .slope { position: absolute; bottom:0; } .background>.flower { width: 25px; height: 25px; z-index: 0; } .background>.flower1 { top: 30px; left: 20%; } .background>.flower2 { top: 50px; left: 40%; } .background>.flower3 { top: 20px; left: 60%; } .background>.flower4 { top: 80px; left: 80%; } .background>.flower5 { top: 80px; left: 50%; } .tree { /* background: ; */ width:2px; /* height: 200px; */ border-right: 8px solid transparent; border-left: 8px solid transparent; border-bottom: 300px solid #816954; position: absolute; left: 50%; transform-origin: 50% 300px; top: 50px; margin-left: -8px; } .branch { position: absolute; width: 150px; height: 40px; border-bottom: 5px solid #816954; } .branch:before, .branch:after { content: ""; position: absolute; width: inherit; height: inherit; border:inherit; border-radius: inherit; z-index: 0; } .branch:before { transform: rotate(1deg); } .branch:after { transform: rotate(2deg); } .branch.left, .branch.left:before, .branch.left:after { transform-origin: 0px 0px; } .branch.right, .branch.right:before, .branch.right:after { transform-origin: 100% 0px; } .branch.left { border-bottom-left-radius: 100% 100%; transform-origin: 100% 100%; } .branch.right { border-bottom-right-radius: 100% 100%; transform-origin: 0% 100%; margin-left: 1px; } .tree>.branch.left { transform:rotate(5deg); } .tree>.branch.right { transform:rotate(-5deg); } .leaf { position: absolute; width: 23px; height: 23px; background: #C5EABE; border-radius: 0px 100%; z-index: 1; transform-origin: 0px 0px; } .leaf:before { /* content:"";*/ position: absolute; width:2px; height: 2px; background: #f55; } .flower { position: absolute; width: 50px; height: 50px; z-index: 2; } .flower:after { position: absolute; content: ""; left: 0px; right: 0px; top: 0px; bottom: 0px; background: #e55; border-radius: 50%; width: 30%; height: 30%; margin: auto; } .flower .petal { width: 100%; height: 100%; position: absolute; transform: rotate(72deg); } .flower .petal::before, .flower .petal::after { content: ""; position: absolute; width: 60%; height: 60%; background: #F0A5A6; border-radius: 0px 100px; top: 50%; left: 50%; margin-left: -20%; margin-top: -20%; transform-origin: 33% 33%; } .flower .petal::after { transform: rotate(36deg) } .flower.petal5 .petal { transform: rotate(144deg); } .flower.petal5 .petal::after { transform: rotate(-72deg); } .flower.petal5>.petal::after { content:none; } .flower.petal6 .petal{ transform: rotate(120deg); } .flower.petal6 .petal::after { transform: rotate(60deg); } .flower.petal8 .petal{ transform: rotate(90deg); } .flower.petal8 .petal::after { transform: rotate(45deg); width: 56%; height: 56%; } .flower.roundpetal .petal:before, .flower.roundpetal .petal:after{ width: 30%; border-radius: 0px; margin-left: -15%; margin-top: 0%; top: 0%; height: 50%; border-radius: 50% 50% 0px 0px; transform-origin: 50% 100%; } .heart { position:absolute; width: 50px; height: 50px; z-index: 2; } .heart:before, .heart:after { position: absolute; content: ""; width:80%; height: 80%; border-radius: 100% 0%; background: #F0A5A6; left: 50%; top: 20%; transform-origin: 0% 100%; } .heart:before { transform: rotate(-65deg); } .heart:after { transform: rotate(-25deg); } .tulip { position:absolute; width: 50px; height: 50px; z-index: 2; transform-origin: 50% 100%; } .tulip:before, .tulip:after, .tulip .peak { position: absolute; content: ""; width:80%; height: 80%; border-radius: 100% 0%; background: #F0A5A6; left: 50%; top: 20%; transform-origin: 0% 100%; } .tulip:before { transform: rotate(-70deg); } .tulip:after { transform: rotate(-20deg); } .tulip .peak { transform: rotate(-45deg); } .redflower:before, .redflower:after, .redflower .peak , .redflower .petal:before, .redflower .petal:after { background: #F0A5A6; } .greenflower:before, .greenflower:after, .greenflower .peak , .greenflower .petal:before, .greenflower .petal:after { background: #D5E4B6; } .blueflower:before, .blueflower:after, .blueflower .peak , .blueflower .petal:before, .blueflower .petal:after { background: #A7D3ED; } .yellowflower:before, .yellowflower:after, .yellowflower .peak , .yellowflower .petal:before, .yellowflower .petal:after { background: #FEDFBC; } .purpleflower:before, .purpleflower:after, .purpleflower .peak , .purpleflower .petal:before, .purpleflower .petal:after { background: #F0CCFE; } .flower:after { background: #f5f5f5; } .branch .branch:after { content:none; } .tree>.leaf1 { width: 15px; height: 15px; transform: rotate(-150deg); } .tree>.leaf2 { width: 15px; height: 15px; transform: rotate(-100deg); } .branch1 { top: 190px; right: 0; } .branch1 .branch-inner1 { width: 60px; height: 40px; transform: rotate(35deg); border-bottom-left-radius: 100% 70%; left: 50px; top: 0px; border-width: 5px; } .branch1 .branch-inner2 { width: 50px; height: 20px; transform: rotate(-40deg); border-bottom-left-radius: 100% 70%; left: 26px; top: 13px; border-width: 4px; } .branch1 .branch-inner3 { width: 20px; height: 10px; transform: rotate(40deg); border-bottom-left-radius: 100% 70%; left: 16px; top: 15px; border-width: 3px; } .branch1 .branch-inner1 .leaf1 { transform: rotate(-150deg); top: 38px; left: 40px; } .branch1 .branch-inner1 .leaf2 { width: 17px;height: 17px; transform: rotate(110deg); top: 38px; left: 20px; } .branch1 .branch-inner1 .leaf3 { width: 17px;height: 17px; transform: rotate(-150deg); top: 30px; left: 14px; } .branch1 .branch-inner2 .leaf1 { transform: rotate(80deg); left: 40px; top: 24px; } .branch1 .branch-inner2 .leaf2 { width: 20px;height: 20px; transform: rotate(-160deg); left: 30px; top: 20px; } .branch1 .branch-inner2 .leaf3 { width: 17px;height: 17px; transform: rotate(100deg); left: 10px; top: 18px; } .branch1 .branch-inner3 .leaf1 { width: 15px;height: 15px; transform: rotate(-150deg); left: 18px; top: 10px; } .branch1 .branch-inner3 .leaf2 { width: 15px; height: 15px; transform: rotate(130deg); left: 9px; top: 12px; } .branch1>.flower1 { right: 100%; bottom: 100%; width: 30px; height: 30px; margin-right: -15px; margin-bottom: -15px; } .branch1 .branch-inner1 .flower1 { width: 18px; height: 18px; top: 5px; left: -12px; transform: rotate(-25deg); } .branch1 .branch-inner2 .flower1 { width: 20px; height: 20px; top: -25%; left: 0%; transform: rotate(-55deg); } .branch2 { height: 60px; top: 130px; left: 0; } .branch2 .branch-inner1 { width: 60px; height: 70px; transform: rotate(90deg); border-bottom-left-radius: 100% 70%; left: -26px; top: -13px; border-width: 5px; } .branch2 .branch-inner2 { width: 60px; height: 80px; transform: rotate(60deg); border-bottom-right-radius: 100% 70%; left: 55px; top: -26px; border-width: 4px; } .branch2 .branch-inner3 { width: 40px; height: 30px; transform: rotate(30deg); border-bottom-right-radius: 100% 100%; left: 110px; top: 10px; border-width: 3px; } .branch2 .branch-inner4 { width: 20px; height: 15px; transform: rotate(180deg); border-bottom-left-radius: 100% 100%; left: 0px; top: 8px; border-width: 2px; } .branch2 .branch-inner1 .leaf1 { transform: rotate(120deg); top: 74px; left: 40px; } .branch2 .branch-inner1 .leaf2 { transform: rotate(220deg); top: 63px; left: 30px; width: 20px; height: 20px; } .branch2 .branch-inner1 .leaf3 { transform: rotate(150deg); top: 60px; left: 14px; width: 17px; height: 17px; } .branch2 .branch-inner2 .leaf1 { transform: rotate(-20deg); top: 84px; left: 10px; } .branch2 .branch-inner2 .leaf2 { transform: rotate(-120deg); top: 73px; left: 25px; width: 20px; height: 20px; } .branch2 .branch-inner2 .leaf3 { transform: rotate(-40deg); top: 65px; left: 44px; width: 17px; height: 17px; } .branch2 .branch-inner3>.leaf1 { transform: rotate(0deg); top: 32px; left: 10px; width: 20px; height: 20px; } .branch2 .branch-inner3 .leaf2 { transform: rotate(-120deg); top: 25px; left: 20px; width: 20px; height: 20px; } .branch2 .branch-inner3 .leaf3 { transform: rotate(-50deg); top: 14px; left: 37px; width: 17px; height: 17px; } .branch2 .branch-inner4>.leaf1 { transform: rotate(150deg); top: 14px; left: 6px; width: 14px; height: 14px; } .branch2>.flower1 { width: 25px; height: 25px; right: -12px; top: -8px; } .branch2 .branch-inner1 .flower1 { width: 25px; height: 25px; left: -10px; top: 25px; } .branch2 .branch-inner2 .flower1 { transform: rotate(10deg); width: 20px; height: 20px; right: -5px; bottom: 30px; } .branch2 .branch-inner4 .flower1 { width: 20px; height: 20px; left: -10px; top: -10px; } .branch2 .branch-inner3>.flower1 { transform: rotate(10deg); width: 15px; height: 15px; right: -5px; top: -5px; } .branch3 { top: 70px; right: 0; width: 160px; height: 70px; } .branch3 .branch-inner1 { width: 60px; height: 40px; transform: rotate(-80deg); border-bottom-right-radius: 100% 100%; left: 70px; top: 15px; border-width: 4px; } .branch3 .branch-inner2 { width: 60px; height: 60px; transform: rotate(-40deg); border-bottom-left-radius: 100% 70%; left: 36px; top: 5px; border-width: 4px; } .branch3 .branch-inner1 .leaf1 { transform: rotate(-30deg); top: 44px; left: 15px; } .branch3 .branch-inner1 .leaf2 { width: 17px;height: 17px; transform: rotate(-95deg); top: 35px; left: 23px; } .branch3 .branch-inner1 .leaf3 { width: 17px;height: 17px; transform: rotate(-50deg); top: 32px; left: 44px; } .branch3 .branch-inner2 .leaf1 { transform: rotate(80deg); left: 50px; top: 64px; } .branch3 .branch-inner2 .leaf2 { width: 20px;height: 20px; transform: rotate(-160deg); left: 35px; top: 56px; } .branch3 .branch-inner2 .leaf3 { width: 17px;height: 17px; transform: rotate(100deg); left: 16px; top: 50px; } .branch3>.leaf1 { right: 20px; transform: rotate(200deg); bottom: -17px; width: 18px; height: 18px; } .branch3>.leaf2 { right: 110px; transform: rotate(220deg); bottom: 10px; width: 18px; height: 18px; } .branch3 .flower.petal5 { right: 100%; bottom: 100%; width: 30px; height: 30px; margin-right: -15px; margin-bottom: -15px; } .branch3 .branch-inner1 .heart { width: 18px; height: 18px; top: 0px; left: 50px; transform: rotate(35deg); } .branch3 .branch-inner2 .tulip { width: 20px; height: 20px; top: 20px; left: 0px; transform: rotate(-25deg); } .branch4 { width: 120px; height: 40px; top: 50px; left: 0; } .branch4 .branch-inner1 { width: 50px; height: 60px; transform: rotate(90deg); border-bottom-left-radius: 100% 70%; left: -26px; top: -25px; border-width: 5px; } .branch4 .branch-inner2 { width: 50px; height: 70px; transform: rotate(60deg); border-bottom-right-radius: 100% 70%; left: 55px; top: -36px; border-width: 4px; } .branch4 .branch-inner1 ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0