css实现请求数据图片文字占位效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现请求数据图片文字占位效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color: #eee; } .timeline-title { margin: 0 auto; max-width: 472px; } /** * main style */ .timeline-item { background-color: #fff; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; border-radius: 3px; padding: 12px; margin: 0 auto; max-width: 472px; min-height: 200px; } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } @keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .animated-background { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; background: #f6f7f8; background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; height: 96px; position: relative; } .background-masker { background: #fff; position: absolute; } /* Every thing below this is just positioning */ .background-masker.header-top, .background-masker.header-bottom, .background-masker.subheader-bottom { top: 0; left: 40px; right: 0; height: 10px; } .background-masker.header-left, .background-masker.subheader-left, .background-masker.header-right, .background-masker.subheader-right { top: 10px; left: 40px; height: 8px; width: 10px; } .background-masker.header-bottom { top: 18px; height: 6px; } .background-masker.subheader-left, .background-masker.subheader-right { top: 24px; height: 6px; } .background-masker.header-right, .background-masker.subheader-right { width: auto; left: 300px; right: 0; } .background-masker.subheader-right { left: 230px; } .background-masker.subheader-bottom { top: 30px; h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0