div+css实现画卷拖动卷开效果代码
代码语言:html
所属分类:拖放
代码描述:div+css实现画卷拖动卷开效果代码,无js代码,通过css与div实现。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } ::-webkit-resizer { border: 1px solid black; border-radius: 50%; background: #9c874c; box-shadow: 2px 2px 2px black inset; } @font-face { font-family: "Unifraktur Cook"; src: url("//repo.bfw.wiki/bfwrepo/fonts/UnifrakturCook-Bold.ttf"); } body { margin: 0; width: 100vw; min-height: 100vh; font-family: "Unifraktur Cook", cursive, sans-serif; } .container { overflow: hidden; width: 100%; height: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; background: black; padding: 40px 0; } .container:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url("//repo.bfw.wiki/bfwrepo/images/building/tt1.png"); opacity: 0.35; background-position: center; } .title { height: 80px; box-shadow: 0px 0px 7px -2px rgba(0, 0, 0, 0.24) inset; overflow: hidden; resize: horizontal; max-width: 500px; min-width: 180px; border-radius: 10px 2px 10px 2px; container-type: inline-size; container-name: title; margin-bottom: 15px; } .title:after, .title:before { content: ""; position: absolute; width: 40px; height: 100%; top: 0; filter: brightness(0.75); z-index: 2; } .title:before { right: 0; box-shadow: -2px -1px 7px rgba(0, 0, 0, 0.35), 0px 0px 100px 30px rgba(0, 0, 0, 0.05), -20px 27px 60px 20px rgba(199, 186, 153, 0.2), 0 0 24px rgba(205, 138, 71, 0.2) inset; } .title:after { left: 0; box-shadow: 2px -1px 7px rgba(0, 0, 0, 0.35), 0px 0px 100px 30px rgba(0, 0, 0, 0.05), 20px 27px 60px 20px rgba(199, 186, 153, 0.2), 0 0 24px rgba(205, 138, 71, 0.2) inset; } .title-container { position: absolute; width: calc(100% - 80px); top: 0; left: 40px; right: 40px; height: 100%; display: flex; justify-content: center; z-index: 1; } .title-inner { font-size: 33px; width: 100%; display: flex; align-items: center; justify-content: center; background-position: center; z-index: 1; overflow: hidden; } .title-inner div { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 270px; filter: contrast(0.45); transition: 0.32s; width: 100%; padding: 20px; opacity: 0.94; } @container title (max-width: 310px) { .title-inner div { opacity: 0.25; transform: scale(0.75); transition: 0.24s; } } .title-space { width: 10px; } .title-roll-left { left: 0; right: 0; transform: translate(-50%); } .title-roll-right { right: -100%; transform: translate(-50%) scale(-1); } .painting { height: 600px; width: 800px; background-image: url(""); position: relative; border-radius: 8px; } .painting .painting-roll { right: 0; width: calc(100% - 20px); transform: translate(-50%); } .painting .part { position: absolute; height: 200px; width: 800px; left: 0; resize: horizontal; overflow: hidden; max-width: 800px; min-width: 70px; container-type: inline-size; } .painting .part:before, .painting .part:after { content: ""; position: absolute; width: 40px; height: 100%; left: 0; top: 0; } .painting .part:before { box-shadow: 2px -1px 7px rgba(0, 0, 0, 0.35), 0px 0px 100px 30px rgba(0, 0, 0, 0.05), 20px 27px 60px 20px rgba(199, 186, 153, 0.2), 0 0 24px rgba(205, 138, 71, 0.2) inset; filter: brightness(0.75); z-index: 1; } .painting .part:after { box-shadow: 0px 4px 2px #644843 inset, 0px -6px 8px #34292747 inset, 0px 6px 8px #34292747 inset; position: absolute; } .painting .part-1 { top: 0; border-radius: 4px 10px 10px 0px; container-name: part-1; } .painting .part-1 .painting-roll { background-position: 0; } .painting .part-1 .painting-piece { background-position: 0px center; } .painting .part-1 img:nth-of-type(1) { top: 42px; left: 10px; } .painting .part-1 img:nth-of-type(2) { top: 140px; left: 106px; z-index: 2; } .painting .part-1 img:nth-of-type(3) { top: 15px; left: 146px; z-index: 1; } .painting .part-1 img:nth-of-type(4) { top: 17px; left: 241px; } .painting .part-1 img:nth-of-type(5) { top: 18px; left: 205px; } .painting .part-1 img:nth-of-type(6) { top: 120px; left: 368px; z-index: 1; } .painting .part-1 img:nth-of-type(7) { top: 24px; left: 448px; } .painting .part-1 img:nth-of-type(8) { top: 23px; left: 579px; z-index: 3; } .painting .part-1 img:nth-of-type(9) { top: 37px; left: 578px; z-index: 1; } .painting .part-1 img:nth-of-type(10) { top: 102px; left: 570px; z-index: 1; } .painting .part-1 img:nth-of-type(11) { top: 68px; left: 646px; z-index: 2; } .painting .part-1 img:nth-of-type(12) { top: 12px; left: 685px; } .painting .part-2 { top: calc(100% / 3); border-radius: 0 0 10px 0; container-name: part-2; } .painting .part-2 .painting-roll { background-position: 50px; } .painting .part-2 .painting-piece { background-position: 266px center; } .painting .part-2 img:nth-of-type(1) { top: -158px; left: 10px; } .painting .part-2 img:nth-of-type(2) { top: 38px; left: 87px; z-index: 1; } .painting .part-2 img:nth-of-type(3) { top: 43px; left: 143px; } .painting .part-2 img:nth-of-type(4) { top: 19px; left: 208px; } .painting .part-2 img:nth-of-type(5) { top: 24px; left: 303px; } .painting .part-2 img:nth-of-type(6) { top: 68px; left: 368px; } .painting .part-2 img:nth-of-type(7) { top: 127px; left: 438px; } .painting .part-2 img:nth-of-type(8) { top: 68px; left: 498px; } .painting .part-2 img:nth-of-type(9) { top: 8px; left: 572px; } .painting .part-2 img:nth-of-type(10) { top: 103px; left: 648px; } .painting .part-3 { bottom: 0; border-radius: 0 0 10px 4px; container-name: part-3; } .painting .part-3 .painting-roll { background-position: 100px; } .painting .part-3 .painting-piece { background-position: 533px center; } .painting .part-3 img:nth-of-type(1) { top: 10px; left: 9px; } .painting .part-3 img:nth-of-type(2) { top: 8px; left: 128px; z-index: 1; } .painting .part-3 img:nth-of-type(3) { top: 86px; left: 238px; } .painting .part-3 img:nth-of-type(4) { top: 68px; left: 296px; } .painting .part-3 img:nth-of-type(5) { top: 37px; left: 373px; } .painting .part-3 img:nth-of-type(6) { top: 42px; left: 513px; } .painting .part-3 img:nth-of-type(7) { top: 55px; left: 549px; } .painting .part-3 img:nth-of-type(8) { top: 139px; left: 559px; } .painting .part-3 img:nth-of-type(9) { top: -95px; left: 648px; } .painting .part-3 img:nth-of-type(10) { top: 12px; left: 632px; } .painting .part-3 img:nth-of-type(11) { top: 109px; left: 637px; z-index: 2; } .painting-piece { height: 100%; width: calc(100% - 40px); position: absolute; left: 40px; box-shadow: 22px -50px 100px 3px rgba(0, 0, 0, 0.1) inset, -19px 0 45px -25px rgba(0, 0, 0, 0.6) inset; background-image: url("//repo.bfw.wiki/bfwrepo/images/building/tt2.png"); } .painting-piece img { opacity: 0; position: absolute; transition: 0.24s; filter: sepia(1); z-index: 0; } .painting-piece img:nth-last-of-type(even) { transform: translate(0, 5px); } .painting-piece img:nth-last-of-type(odd) { transform: scale(0.85); } @container part-1 (max-width: 171px) { .resize { opacity: 0; } } @container part-1 (min-width: 173px) { .resize { opacity: 0; } } @container part-1 (min-width: 177px) { .painting-piece > img:nth-of-type(1) { opacity: 1; transform: translate(0, 0) scale(1); filter: sepia(0); transition: filter 0.38s 0.15s, opacity 0.24s, transform 0.24s; } } @container part-1 (min-width: 213px) { .painting-piece > img:nth-of-type(2) { opacity: 1; transform: translate(0, 0) scale(1); filter: sepia(0); transition: filter 0.38s 0.15s, opacity 0.24s, transform 0.24s; } } @container part-1 (min-width: 257px) { .painting-piece > img:nth-of-type(3) { opacity: 1; transform: translate(0, 0) scale(1); filter: sepia(0); transition: filter 0.38s 0.15s, opacity 0.24s, transform 0.24s; } } @container part-1 (min-width: 329px) { .painting-piece > img:nth-of-type(4) { opacity: 1; transform: translate(0, 0) scale(1); filter: sepia(0); transition: filter 0.38s 0.15s, opacity 0.24s, transform 0.24s; } } @container part-1 (min-width: 390px) { .painting-piece > img:nth-of-type(5) { opacity: 1; transform: translate(0, 0) scale(1); filter: sepia(0); transition: filter 0.38s 0.15s, opacity 0.24s, transform 0.24s; } } @container part-1 (min-width: 474px) { .painting-piece > img:nth-of-type(6) { opacity: 1; transform: translate.........完整代码请登录后点击上方下载按钮下载查看
网友评论0