html骨架屏实现

DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<title>骨架屏title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

head>
<style>
	body {
		padding: 0.5rem;
		margin: 0;
		background: #f1f1f1;
	}
	/*  骨架屏样式  */
	.skeleton-screen-box {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
	}
	
	.skeleton-screen-box ul {
		background-color: #fff;
		margin: 0 auto;
		padding: 20px;
		width: 100%;
	}
	
	.skeleton-screen-box li {
		background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
		width: 100%;
		height: 0.6rem;
		list-style: none;
		background-size: 400% 100%;
		margin-top: 0.6rem;
		background-position: 100% 50%;
		animation: skeleton-screen-loading 1.4s ease infinite;
	}
	
	.skeleton-screen-box li:first-child {
		width: 38%;
	}
	
	.skeleton-screen-box li:last-child {
		width: 61%;
	}
	
	@keyframes skeleton-screen-loading {
		0% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0 50%;
		}
	}
style>

<body>
	
	<div class="skeleton-screen-box ">
		<ul>
			<li>li>
			<li>li>
			<li>li>
			<li>li>
			<li>li>
			<li>li>
			<li>li>
			<li>li>
			<li>li>
		ul>
	div>
body>
<script>
	/**
	 * 初始化完成后关闭
	 */
	window.onload=function(){
		setTimeout(function(){
			document.getElementsByClassName('skeleton-screen-box')[0].remove();
		}, 2000)
	}
script>
html>

你可能感兴趣的:(前端,前端插件效果,html,css,javascript)