css布局实现六边形字母文字散列排列效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现六边形字母文字散列排列效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: calc(14px + 3 * ((100vw - 400px) / 400)); line-height: 1.25; } @media screen and (max-width: 400px) { html { font-size: 14px; } } @media screen and (min-width: 1200px) { html { font-size: 20px; } } body { background: #FCB48D; } .example { position: relative; width: 40rem; max-width: 1100px; height: 40rem; margin: 2rem auto; background: radial-gradient(circle, #782B7F 0%, #782B7F 70%, transparent 70%, transparent 100%), radial-gradient(circle, #DA627D 0%, #DA627D 70%, transparent 70%, transparent 100%), radial-gradient(circle, #9A348E 0%, #9A348E 70%, transparent 70%, transparent 100%); background-repeat: no-repeat; background-size: 20rem 20rem, 15rem 15rem, 10rem 10rem; background-position: 5rem 5rem, 20rem 10rem, 14rem 24rem; } @media screen and (max-width: 45rem) { .example { height: 50rem; width: 30rem; background-size: 20rem 20rem, 17rem 17rem, 10rem 10rem; background-position: 2rem 3rem, 10rem 16rem, 10rem 32rem; } } @media screen and (max-width: 30rem) { .example { width: 20rem; height: 62rem; background-size: 18rem 18rem, 17rem 17rem, 10rem 10rem; background-position: 1.5rem 7rem, 0rem 25rem, 7rem 42rem; } } .hexagon { position: absolute; height: 10rem; width: 10rem; -webkit-filter: drop-shadow(-2px 7px 10px rgba(100, 100, 100, 0.5)); filter: drop-shadow(-2px 7px 10px rgba(100, 100, 100, 0.5)); } .hexagon::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(-120deg, #FFECE2 0%, #FFFFFF 100%); -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); } .hexagon.-big { height: 15rem; width: 15rem; } .hexagon.-big > .text { font-size: 7rem; } .hexagon.-normal > .text { font-size: 3rem; } .hexagon.-small { height: 6rem; width: 6rem; } .hexagon:nth-of-type(1) { top: 3rem; left: 5rem; } .hexagon:nth-of-type(2) { top: 11rem; left: 18rem; } .hexagon:nth-of-type(3) { top: 0; left: 19rem; } .hexagon:nth-of-type(4) { top: 22rem; left: 10rem; } .hexagon:nth-of-type(5) { top: 27rem; left: 20rem; } .hexagon:nth-of-type(6) { top: 30rem; left: 5rem; } .hexagon:nth-of-type.........完整代码请登录后点击上方下载按钮下载查看
网友评论0