jquery实现小树生长过程效果代码
代码语言:html
所属分类:其他
代码描述:jquery实现小树生长过程效果代码,点击按钮可切换小树的形态。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap"); html, body { height: 100%; overflow: hidden; } body { overflow: auto; background: #333; background: linear-gradient(to top, #09203f 0%, #11324c 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; } .title { user-select: none; position: absolute; z-index: 20; font-family: "Major Mono Display", monospace; color: white; top: 16px; right: 16px; font-size: 28px; text-align: right; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-spacing: -5px; letter-spacing: -1px; padding-bottom: 15px; text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.5); } .title small { font-size: 14px; position: absolute; top: 120%; right: 0; } .title::before { content: ""; position: absolute; bottom: 0; opacity: 0.25; right: 0px; height: 3px; width: 87px; background: white; } #randomize { margin-top: 20px; appearance: none; background: #666; color: white; padding: 10px 20px; border: none; border-radius: 4px; box-shadow: 0px 5px 25px 3px rgba(0, 0, 0, 0.4); font-size: 16px; border-top: 2px solid #ccc; cursor: pointer; position: relative; transition: 300ms; font-family: "Major Mono Display", monospace; } #randomize:hover { background: #555; box-shadow: 0px 5px 25px 5px rgba(0, 0, 0, 0.4); } #randomize:active { background: #333; } #wrap { background: #eee; background-image: linear-gradient(160deg, #0093e9 0%, #92a0bf 100%); width: 300px; min-width: 300px; height: 300px; min-height: 300px; border-radius: 10px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; box-shadow: 0px 5px 25px 3px rgba(0, 0, 0, 0.4); } #tree { display: flex; flex-direction: row-reverse; position: relative; width: 20px; bottom: -10px; } #tree .branch { width: 70%; background: #642c1a; position: absolute; bottom: 94%; left: calc((100% - 70%) / 2); transform-origin: 50% 95%; z-index: 1; border-radius: 5px 5px 0 0; } #tree .branch:empty { background: blue; } #tree > .branch { bottom: 0; width: 70%; height: 80px; } #tree > .branch > .branch { background: #582717; } #tree > .branch > .branch > .branch { background: #4c2114; } #tree > .branch > .branch > .branch > .branch { background: #401c11; } #tree > .branch > .branch > .branch > .branch > .branch { background: #33170d; } #tree > .branch > .branch > .branch > .branch > .branch > .branch { background: #27110a; } #tree > .branch::before, #tree > .branch::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 60px 10px; border-color: transparent transparent #642c1a transparent; position: absolute; bottom: 0; left: -9px; } #tree > .branch::after { transform: scaleX(-1); left: 13px; } #tree .leaf { position: absolute; bottom: 90%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0