css实现翻书loading加载动画效果代码-html代码-BFW代码库

css实现翻书loading加载动画效果代码

代码语言：html

代码描述：css实现翻书loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>
 <style>
     .loader {
	--background:linear-gradient(135deg,#23C4F8,#275EFE);
	--shadow:rgba(39,94,254,0.28);
	--text:#6C7486;
	--page:rgba(255,255,255,0.36);
	--page-fold:rgba(255,255,255,0.52);
	--duration:3s;
	width:200px;
	height:140px;
	position:relative;
}
.loader:before,.loader:after {
	--r:-6deg;
	content:'';
	position:absolute;
	bottom:8px;
	width:120px;
	top:80%;
	box-shadow:0 16px 12px var(--shadow);
	-webkit-transform:rotate(var(--r));
	transform:rotate(var(--r));
}
.loader:before {
	left:4px;
}
.loader:after {
	--r:6deg;
	right:4px;
}
.loader div {
	width:100%;
	height:100%;
	border-radius:13px;
	position:relative;
	z-index:1;
	-webkit-perspective:600px;
	perspective:600px;
	box-shadow:0 4px 6px var(--shadow);
	background-image:var(--background);
}
.loader div ul {
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
}
.loader div ul li {
	--r:180deg;
	--o:0;
	--c:var(--page);
	position:absolute;
	top:10px;
	left:10px;
	-webkit-transform-origin:100% 50%;
	transform-origin:100% 50%;
	color:var(--c);
	opacity:var(--o);
	-webkit-transform:rotateY(var(--r));
	transform:rotateY(var(--r));
	-webkit-animation:var(--duration) ease infinite;
	animation:var(--duration) ease infinite;
}
.loader div ul li:nth-child(2) {
	--c:var(--page-fold);
	-webkit-animation-name:page-2;
	animation-name:page-2;
}
.loader div ul li:nth-child(3) {
	--c:var(--page-fold);
	-webkit-animation-name:page-3;
	animation-name:page-3;.........完整代码请登录后点击上方下载按钮下载查看