随机字符背景效果
代码语言:html
所属分类:背景
代码描述:随机字符背景效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @font-face { font-family: 'Muli'; font-weight: 200 900; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/240751/Muli-VariableFont_wght.ttf") format("truetype"); } @font-face { font-family: 'Playfair Display'; font-weight: 400 900; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/240751/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype"); } *, *:before, *:after { box-sizing: border-box; } .sr, #app .toolbar input[type="checkbox"] { position: absolute; left: -100vw; width: 1px; height: 1px; opacity: 0; clip: rect(1px, 1px, 1px, 1px); } .float-right { float: right; margin-left: auto; } body { margin: 0; height: 100vh; width: 100vw; overflow: hidden; } #app { font-family: 'Muli'; color: #53565a; min-height: 100vh; } #app #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); grid-auto-flow: dense; min-height: 100vh; -webkit-box-align: stretch; align-items: stretch; } #app .cell { width: 100%; line-height: 1em; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; font-size: calc(.7em + 3vmin); -webkit-transition: background 0.6s cubic-bezier(0.5, 0, 0.5, 1), font-weight 0.6s cubic-bezier(0.5, 0, 0.5, 1), color 0.6s cubic-bezier(0.5, 0, 0.5, 1); transition: background 0.6s cubic-bezier(0.5, 0, 0.5, 1), font-weight 0.6s cubic-bezier(0.5, 0, 0.5, 1), color 0.6s cubic-bezier(0.5, 0, 0.5, 1); font-weight: 200; width: 0; height: 0; padding: 50%; -webkit-animation: fadeOut 0.4s cubic-bezier(0.5, 0, 0.5, 1) forwards; animation: fadeOut 0.4s cubic-bezier(0.5, 0, 0.5, 1) forwards; } #app .cell:not(.fade) { -webkit-animation: fadeIn 0.4s cubic-bezier(0.5, 0, 0.5, 1) forwards; animation: fadeIn 0.4s cubic-bezier(0.5, 0, 0.5, 1) forwards; } #app .cell.m { grid-column: span 2; grid-row: span 2; font-size: calc(calc(.7em + 3vmin) * 2); } #app .cell.l { grid-column: span 3; grid-row: span 3; font-size: calc(calc(.7em + 3vmin) * 3); } #app .cell.xl { grid-column: span 4; grid-row: span 4; font-size: calc(calc(.7em + 3vmin) * 4); } #app .cell.xxl { grid-column: span 5; grid-row: span 5; font-size: calc(calc(.7em + 3vmin) * 4); } #app .cell.serif { font-family: 'Playfair Display', serif; } #app .cell.round { border-radius: 20em; padding: 46%; margin: 4%; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0