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

代码语言：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;
}
.loader div ul li:nth-child(4) {
	--c:var(--page-fold);
	-webkit-animation-name:page-4;
	animation-name:page-4;
}
.loader div ul li:nth-child(5) {
	--c:var(--page-fold);
	-webkit-animation-name:page-5;
	animation-name:page-5;
}
.loader div ul li svg {
	width:90px;
	height:120px;
	display:block;
}
.loader div ul li:first-child {
	--r:0deg;
	--o:1;
}
.loader div ul li:last-child {
	--o:1;
}
.loader span {
	display:block;
	left:0;
	right:0;
	top:100%;
	margin-top:20px;
	text-align:center;
	color:var(--text);
}
@-webkit-keyframes page-2 {
	0% {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	opacity:0;
}
20% {
	opacity:1;
}
35%,100% {
	opacity:0;
}
50%,100% {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
}@keyframes page-2 {
	0% {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	opacity:0;
}
20% {
	opacity:1;
}
35%,100% {
	opacity:0;
}
50%,100% {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
}@-webkit-keyframes page-3 {
	15% {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	opacity:0;
}
35% {
	opacity:1;
}
50%,100% {
	opacity:0;
}
65%,100% {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
}@keyframes page-3 {
	15% {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	opacity:0;
}
35% {
	opacity:1;
}
50%,100% {
	opacity:0;
}
65%,100% {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
}@-webkit-keyframes page-4 {
	30% {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	opacity:0;
}
50% {
	opacity:1;
}
65%,100% {
	opacity:0;
}
80%,100% {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
}@keyframes page-4 {
	30% {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	opacity:0;
}
50% {
	opacity:1;
}
65%,100% {
	opacity:0;
}
80%,100% {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
}@-webkit-keyframes page-5 {
	45% {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	opacity:0;
}
65% {
	opacity:1;
}
80%,100% {
	opacity:0;
}
95%,100% {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
}@keyframes page-5 {
	45% {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	opacity:0;
}
65% {
	opacity:1;
}
80%,100% {
	opacity:0;
}
95%,100% {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
}html {
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
}
* {
	box-sizing:inherit;
}
*:before,*:after {
	box-sizing:inherit;
}
body {
	min-height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	background:#1C212E;
	font-family:'Roboto',Arial;
}
body .dribbble {
	position:fixed;
	display:block;
	right:24px;
	bottom:24px;
}
body .dribbble img {
	display:block;
	width:76px;
}

 </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="loader">
        <div>
            <ul>
                <li><svg viewBox="0 0 90 120" fill="currentColor"><path d="M90,0 L90,120 L11,120 C4.92486775,120 0,115.075132 0,109 L0,11 C0,4.92486775 4.92486775,0 11,0 L90,0 Z M71.5,81 L18.5,81 C17.1192881,81 16,82.1192881 16,83.5 C16,84.8254834 17.0315359,85.9100387 18.3356243,85.9946823 L18.5,86 L71.5,86 C72.8807119,86 74,84.8807119 74,83.5 C74,82.1745166 72.9684641,81.0899613 71.6643757,81.0053177 L71.5,81 Z M71.5,57 L18.5,57 C17.1192881,57 16,5.........完整代码请登录后点击上方下载按钮下载查看