css+div绘制不同风格纺织图案衣服效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div绘制不同风格纺织图案衣服效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { height: 100%; } body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; } .model { display: grid; width: 25vmin; height: 70vmin; margin: 15vmin 5vmin; filter: drop-shadow(10px 10px 5px #cccccc99); } .model.rajesh { margin-left: 8vmin; } .model.sheldon { margin-right: 8vmin; } .model > div { position: relative; } .model:after { content: ""; position: absolute; bottom: -8vmin; font-family: Arial, Helvetica, sans-serif; font-size: 1vmin; width: 100%; text-align: center; white-space: pre; text-transform: uppercase; opacity: 0; transition: all 0.5s ease 0s; } .model:hover:after { opacity: 1; font-size: 2.1vmin; transition: all 0.5s ease 0s; } .model.rajesh:after { content: "Rajesh\A Koothrappali"; text-shadow: 0 0 3px #96834380; color: #968343; } .model.howard:after { content: "Howard\A Wolowitz"; text-shadow: 0 0 3px #2a85cc80; color: #2a85cc; } .model.leonard:after { content: "Leonard\A Hofstadter"; text-shadow: 0 0 3px #44af5e80; color: #44af5e; } .model.sheldon:after { content: "Sheldon\A Cooper"; text-shadow: 0 0 3px #d12b1380; color: #d12b13; } .model.rajesh:before { content: ""; position: absolute; background: #f7f0db; width: 10vmin; height: 6vmin; z-index: 1; top: -0.75vmin; left: calc(50% - 5vmin); clip-path: polygon( 50% 60%, 85% 9%, 92% 5%, 98% 10%, 75% 100%, 50% 60%, 25% 100%, 2% 10%, 8% 5%, 15% 9% ); background-size: 1vmin 1vmin; background-image: repeating-linear-gradient( 150deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) calc(1.15vmin - 1px), rgba(0, 0, 0, 0.1) calc(1.15vmin), rgba(255, 255, 255, 0) calc(1.15vmin + 1px) ), repeating-linear-gradient( 31deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) calc(1.15vmin - 1px), rgba(0, 0, 0, 0.1) calc(1.15vmin), rgba(255, 255, 255, 0) calc(1.15vmin + 1px) ); } .model.howard:before { content: ""; position: absolute; background: repeating-linear-gradient( 90deg, transparent 49%, #ffffff2e 50%, transparent 51% ), #2d2d2d; width: 8vmin; height: 2vmin; top: -2.5vmin; left: calc(50% - 3.85vmin); border-radius: 0.5vmin; z-index: 1; } .top { border-radius: 5vmin 5vmin 1vmin 1vmin; } .bot { margin: 0 8%; overflow: hidden; border-radius: 0 0 1vmin 1vmin; } .bot:before { content: ""; height: 70%; width: 2px; position: absolute; background: #00000060; left: calc(50% - 1px); bottom: 0; } .bot:after { content: ""; height: 1.9vmin; width: 1.4vmin; position: absolute; border-left: 2px solid #00000060; border-bottom: 2px solid #00000060; left: calc(50% - 3.5% - 2px); bottom: 70%; transform: rotate(-45deg); } .tracksuite { width: 100%; height: 100%; z-index: 1; position: relative; } .tracksuite:before, .tracksuite:after { content: ""; width: 30%; height: calc(100% + 1vmin); background: linear-gradient( 0deg, #2b3e85 0%, #2b3e85 1%, #68b4bc 1%, #68b4bc 4%, transparent 4%, transparent 60%, #533540 60%, #533540 65%, #6abac3 65%, #65adb3 75%, #a3283a 75%, #a3283a 80%, #533540 80%, #533540 85%, #65adb3 80% ); background-color: #2b3e85; position: absolute; border-right: 0.5vmin dashed #5fa5ad; border-radius: 5vmin 0.5vmin 1vmin 1vmin; border-bottom: 0.5vmin solid #2b3e85; } .tracksuite:after { right: 0; border-right: 0; border-left: 0.5vmin dashed #5fa5ad; border-radius: 0.5vmin 5vmin 1vmin 1vmin; } .tracksuite span:before, .top span:before { position: absolute; content: ""; width: 100%; height: 72.5%; border-radius: 5vmin 0 1vmin 1vmin; box-shadow: 2px 2px 0px 0 #00000040; bottom: 0px; } .tracksuite span + span:before, .top span + span:before { border-radius: 0 5vmin 1vmin 1vmin; box-shadow: -2px 2px 0px 0 #00000040; } .argyle { background-color: #6d695c; background-image: repeating-linear-gradient( 120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 1.55vmin ), repeating-linear-gradient( 60deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 1.55vmin ), linear-gradient( 60deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) ), linear-gradient( 120deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) ); background-size: 3.8vmin 6vmin; background-position: center; } .argyle:before { content: ""; background: #ffffff; width: 7.5vmin; height: 7.5vmin; position: absolute; left: calc(50% - 3.75vmin); transform: rotate(45deg); top: -3.9vmin; border: 1vmin solid #635e50; box-sizing: border-box; border-top-color: transparent; border-left-color: transparent; border-radius: 0 2vmin 1vmin 2vmin; clip-path: polygon(0 100%, 100% 100%, 100% 0); } .argyle:after { content: ""; width: 100%; position: absolute; border-bottom: 1vmin solid #635e50; bottom: 0px; background: #ffffff14; height: 1px; border-radius: 1vmin; } .tartan, .top.tartan span { background-color: #ff9d9d; background-image: repeating-linear-gradient( transparent, transparent 4vmin, #f4433640 4vmin, #f4433640 8vmin ), repeating-linear-gradient( 90deg, #f4433640, #f4433640 4vmin, transparent 4vmin, transparent 8vmin ), repeating-linear-gradient( 135deg, transparent, transparent 0.32vmin, #ffffff1a 0.32vmin, #ffffff1a 0.64vmin ), repeating-linear-gradient( 45deg, transparent, transparent 0.32vmin, #ffffff1a 0.32vmin, #ffffff1a 0.64vmin ), repeating-linear-gradient( transparent, transparent 1.6vmin, #f4433626 1.6vmin, #f4433626 1.68vmin, transparent 1.68vmin, transparent 2.32vmin, #f4433626 2.32vmin, #f4433626 2.4vmin, transparent 2.4vmin, transparent 4vmin ), repeating-linear-gradient( 90deg, transparent, transparent 1.6vmin, #f4433626 1.6vmin, #f4433626 1.68vmin, transparent 1.68vmin, transparent 2.32vmin, #f4433626 2.32vmin, #f4433626 2.4vmin, transparent 2.4vmin, transparent 4vmin ); background-position: center center; } .tartan:before { content: ""; background: repeating-linear-gradient( -45deg, transparent 48.5%, #ffffff2e 50%, transparent 51.5% ), #2d2d2d; width: 7.5vmin; height: 7.5vmin; position: absolute; left: calc(50% - 3.75vmin + 1px); transform: rotate(-45deg); top: -3.75vmin; clip-path: polygon( 0% 100%, 0% 0%, 15% 15%, 35% -2%, 102% 65%, 85% 85%, 100% 100% ); border-radius: 2vmin 1vmin 2vmin 0; } .tartan:after { content: "\25CF"; height: 88%; width: 2vmin; position: absolute; background: linear-gradient( 90deg, #00000045 8%, transparent 10%, transparent 92%, #00000045.........完整代码请登录后点击上方下载按钮下载查看
网友评论0