jquery-ui实现房子拖拽盖高楼效果代码
代码语言:html
所属分类:拖放
代码描述:jquery-ui实现房子拖拽盖高楼效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> ::-moz-selection { background: #ff8c2b; color: #ffd1aa; } ::selection { background: #ff8c2b; color: #ffd1aa; } html, body { width: 100%; height: 100%; } body { overflow: hidden; } .scene { width: 100%; height: 100%; position: relative; display: grid; grid: "sky sky sky" 1fr "side-l building side-r" auto "street street street" 60px/1fr auto 1fr; background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%); background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%); } .scene:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; background: #ff9a44; mix-blend-mode: screen; opacity: 0.3; z-index: 1; -webkit-animation: overlay 10s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; animation: overlay 10s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; } .sky { grid-area: sky; position: relative; padding: 0 10px; } .sky h1 { font-size: 1.6rem; color: #1a1a1a; text-align: right; margin: 10px 0; } .sky p { text-align: right; margin: 0; } .side-l { grid-area: side-l; position: relative; } .side-l:before { content: ""; display: block; position: absolute; width: calc(100% - 130px); height: 2px; background: #629dd2; right: 100px; top: 0; z-index: 99; opacity: 0.5; } .side-l .price { padding: 10px 20px; background: rgba(98, 157, 210, 0.7); border-radius: 10px 0 10px 10px; margin: 0 20px; display: inline-block; color: #fed330; font-size: 1.4rem; letter-spacing: 2px; position: relative; z-index: 100; } .side-r { grid-area: side-r; position: relative; } .building-wrap { grid-area: building; position: relative; } .building-wrap:before { content: ""; display: block; position: absolute; width: calc(100% + 20px); height: 10px; background: #a5754a; top: -10px; left: -10px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1); } .building-wrap:after { content: ""; display: block; position: absolute; width: calc(100% + 10px); height: 5px; background: #936942; top: 0; left: -5px; box-shadow: inset 0 1px 0 0 rgba(100, 100, 100, 0.5); } .building-wrap .building { display: grid; grid-template-rows: 40px; align-content: end; background: #fe994c; padding-bottom: 40px; min-height: 60px; box-shadow: inset 0 10px 0 0 rgba(0, 0, 0, 0.2), inset 5px 0 0 0 #fff, inset -5px 0 0 0 #fff, inset 6px 0 0 0 rgba(0, 0, 0, 0.2), inset -6px 0 0 0 rgba(0, 0, 0, 0.2), inset 0 -5px 6px 0 rgba(0, 0, 0, 0.2), inset 0 -20px 0 0 #655246, inset 0 -21px 0 0 rgba(255, 255, 255, 0.3); padding-left: 10px; padding-right: 10px; } .building-wrap .building:before { content: ""; display: block; position: absolute; width: calc(100% + 40px); height: 5px; top: -15px; left: -20px; background: #b38256; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3); } .building-wrap .building:after { content: ""; display: block; position: absolute; width: 20px; height: 10px; background: #473a31; left: -20px; bottom: 0; box-shadow: -20px 0 0 0 #473a31, 0 -10px 0 0 #473a31, 0 -60px 0 0 #655246; } .street { grid-area: street; background: #483f38; box-shadow: inset 0 20px 0 0 #3a322d, inset 0 21px 0 0 #483f38, inset 0 30px 0 0 #2b2622, inset 0 31px 0 0 #0f0d0b; border-top: 1px solid #0f0d0b; position: relative; } .floor { display: grid; grid-template-columns: auto; grid-template-rows: 40px; grid-auto-flow: column; padding-top: 20px; height: 60px; box-sizing: border-box; position: relative; } .floor:before { content: ""; display: block; position: absolute; width: calc(100% + 30px); background: #fff; height: 4px; left: -15px; bottom: -5px; box-shadow: 0 1px 0 0 #d9d9d9; } .floor:after { content: ""; display: block; position: absolute; width: calc(100% + 10px); background: #fff; height: 4px; left: -5px; bottom: -10px; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); } .floor:first-child { padding-top: 0; } .floor:first-child:before { bottom: 15px; } .floor:first-child:after { bottom: 10px; } .floor .window { width: 40px; margin: 0 10px; background: #29211c; position: relative; border: 2px solid #fff; } .floor .window.open:before { height: 50%; } .floor .window:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(255, 255, 255, 0.4); transition: height 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2); } .floor .window:after { content: ""; display: block; position: absolute; width: 100%; height: 2px; top: 50%; background: #fff; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); } .ui-resizable-handle { width: 10px; height: 100%; position: absolute; } .ui-resizable-n { width: 100%; height: 20px; top: -15px; left: 0; background: transparent; cursor: s-resize; } .tree { position: absolute; bottom: 0; background: #a25741; } .tree > .particle { opacity: 0; position: absolute; background-color: rgba(96, 196, 84, 0.5); -webkit-animation: leaves 3s ease-in infinite; animation: leaves 3s ease-in infinite; border-radius: 0 50%; } .tree1 { width: 10px; height: 100px; left: 10vw; box-shadow: inset 0 40px 0 0 rgba(0, 0, 0, 0.2); } .tree1:before { content: ""; display: block; position: absolute; width: 80px; height: 80px; background: #60c454; border-radius: 50%; left: -70px; top: -50px; box-shadow: 30px -40px 0 0 #60c454, 60px 5px 0 0 #60c454, 50px -30px 0 0 #60c454, 15px 10px 0 0 #60c454; } .tree1:after { content: ""; display: block; position: absolute; width: 30px; height: 4px; background: #a25741; right: -28px; top: 30px; transform: rotate(-20deg); box-shadow: inset 5px 0 0 0 rgba(0, 0, 0, 0.2); } .tree2 { width: 8px; height: 80px; right: 15vw; box-shadow: inset 0 30px 0 0 rgba(0, 0, 0, 0.2); } .tree2:before { content: ""; display: block; position: absolute; width: 50px; height: 50px; background: #60c454; border-radius: 50%; left: -50px; top: -40px; box-shadow: 35px -30px 0 0 #60c454, 25px 15px 0 0 #60c454, 50px -5px 0 0 #60c454, 10px -25px 0 0 #60c454; } .tree2:after { content: ""; display: block; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0