css实现棋盘式文字段落布局效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现棋盘式文字段落布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap"); html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-family: "Raleway", sans-serif; font-size: clamp(12px, 2.5vmin, 20px); line-height: 150%; color: #2e0020; padding: 50px 0; overflow-x: hidden; } body::before { content: ""; z-index: -1; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #fcfcfc; background-image: radial-gradient(#e6e6e6 0.8px, transparent 0), radial-gradient(#e6e6e6 0.8px, #fcfcfc 0); background-size: 32px 32px; background-position: 0 0, 16px 16px; } p { margin: 0; } h3 { line-height: 110%; font-size: clamp(20px, 5vmin, 38px); margin: 0 0 clamp(15px, 3vmin, 25px); } .container { max-width: 960px; margin: 0 auto; } .grid { display: flex; flex-wrap: wrap; margin-left: 0; margin-top: 0; } .grid > * { position: relative; display: flex; flex-wrap: wrap; padding-left: 0; padding-top: 0; width: calc(100% * 1 / 2); } .grid > * { opacity: 0; } .card { width: 100%; background-color: #fff; border: 1px solid #e6e6e6; border-radius: 5px 5px 3px 3px; padding: clamp(20px, 5vmin, 50px); border-top: 5px solid rgba(28, 23, 25, 0.06); box-shadow: rgba(28, 23, 25, 0.15) 0 4px 4px, rgba(28, 23, 25, 0.15) 0 8px 8px, rgba(28, 23, 25, 0.15) 0 16px 16px, rgba(28, 23, 25, 0.15) 0 32px 32px; } .image { width: 100%; height: 100%; background-image: repeating-linear-gradient(45deg, #f9c4d2 0, #f9c4d2 1px, #fff 0, #fff 50%); background-size: 10px 10px; } .ordered-even { -webkit-animation: fadeInEven 1.25s ease-in-out; animation: fadeInEven 1.25s ease-in-out; opacity: 1; } .ordered-odd { -webkit-animation: fadeInOdd 1.25s ease-in-out; animation: fadeInOdd 1.25s ease-in-out; opacity: 1; } @-webkit-keyframes fadeInEven { from { transform: rotate3d(0.2, 0.5, 0.3, 90deg) translate(50vw, 50vw); opacity: 0; } to { transform: rotate3d(0) translate(0); opacity: 1; } } @keyframes fadeInEven { from { transform: rotate3d(0.2, 0.5, 0.3, 90deg) translate(50vw, 50vw); opacity: 0; } to { transform: rotate3d(0) translate(0); opacity: 1; } } @-webkit-keyframes fadeInOdd { from { transform: rotate3d(-0.2, -0.5, -0.3, 90deg) translate(-50vw, -50vw); opacity: 0; } to { transform: rotate3d(0) translate(0); opacity: 1; } } @keyframes fadeInOdd { from { transform: rotate3d(-0.2, -0.5, -0.3, 90deg) translate(-50vw, -50vw); opacity: 0; } to { transform: rotate3d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0