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(-.........完整代码请登录后点击上方下载按钮下载查看