div+css实现文字列表倾斜布局效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现文字列表倾斜布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;500;900&display=swap'); *, *:before, *:after { box-sizing: border-box; transition: 200ms linear; } body { perspective: 3000em; font-family: 'Raleway', sans-serif; font-weight: 200; margin: 0; min-height: 100vh; } .testimonial-section{ overflow: hidden; } .head { font-size: 2rem; font-weight: 700; } .testi { display: grid; grid-template-columns: 1fr 5rem; gap: 1rem; } .person { grid-column: 1; } .more { grid-row: 1; grid-column: 2; place-self: center; position: relative; } .more:after { position: absolute; top: -0.5rem; right: -1rem; content: ' \BB'; font-size: 1.7rem; } .testi p{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; } .skew { --skew-side: 1; --skew-deg: 15deg; position: relative; width: min(650px, 100vw); margin: 0 auto; height: 10rem; color: #fefefe; padding-inline: 1rem; display: grid; place-content: center; } .person .company { font-size: smaller; } .person .name { font-size: 1.2rem; } .skew a { color: #bfbfff; text-decoration: none; } .skew * { margin: 0; } .skew-left:before, .skew-left:after { --skew-side: -1; } .skew:before { content: ""; z-index: -1; position: absolute; inset: 0; background: linear-gradient(calc(var(--skew-side) * 90deg), #005f8a 0%,#00486c 50%,#003a59 100%); } .skew:after { content: ""; z-index: -2; position: absolute; left: -1rem; top: -50%; bottom: -0.3rem; width: 80%; background-image: linear-gradient( calc(var(--skew-side) * 90deg), transparent 10%, #0005, transparent ); --sk: calc(var(--skew-side) * 4deg); --skw-deg: calc(-1*var(--sk)); filter: blur(0.25em); } .skew-left:after { left: unset; right: -3rem; } .skew:nth-of-type(1){ z-index: 2; } .skew:nth-of-type(2){ z-index: 1; } @media (min-width: 750px){ .skew { padding-inline: 4rem; } .skew:before { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0