纯css实现翻书动画特效
代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure CSS Book Loader</title>
<style>
.book {
--color: #fff;
--duration: 6.8s;
width: 32px;
height: 12px;
position: relative;
margin: 32px 0 0 0;
zoom: 1.5;
}
.book .inner {
width: 32px;
height: 12px;
position: relative;
-webkit-transform-origin: 2px 2px;
transform-origin: 2px 2px;
-webkit-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
-webkit-animation: book var(--duration) ease infinite;
animation: book var(--duration) ease infinite;
}
.book .inner .left,
.book .inner .right {
width: 60px;
height: 4px;
top: 0;
border-radius: 2px;
background: var(--color);
position: absolute;
}
.book .inner .left:before,
.book .inner .right:before {
content: '';
width: 48px;
height: 4px;
border-radius: 2px;
background: inherit;
position: absolute;
top: -10px;
left: 6px;
}
.book .inner .left {
right: 28px;
-webkit-transform-origin: 58px 2px;
transform-origin: 58px 2px;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
-webkit-animation: left var(--duration) ease infinite;
animation: left var(--duration) ease infinite;
}
.book .inner .right {
left: 28px;
-webkit-transform-origin: 2px 2px;
transform-origin: 2px 2px;
-webkit-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
-webkit-animation: right var(--duration) ease infinite;
animation: right var(--duration) ease infinite;
}
.book .inner .middle {
width: 32px;
height: 12px;
border: 4px solid var(--color);
border-top: 0;
border-radius: 0 0 9px 9px;
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
.book ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: 50%;
top: 0;
}
.book ul li {
height: 4px;
border-radius: 2px;
-webkit-transform-origin: 100% 2px;
transform-origin: 100% 2px;
width: 48px;
right: 0;
top: -10px;
position: absolute;
background: var(--color);
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
-webkit-animation-duration: var(--duration);
animation-duration: var(--duration);
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.book ul li:nth-child(0) {
-webkit-animation-name: page-0;
animation-name: page-0;
}
.book ul li:nth-child(1) {
-webkit-animation-name: page-1;
animation-name: page-1;
}
.book ul li:nth-child(2) {
-webkit-animation-name: page-2;
animation-name: page-2;
}
.book ul li:nth-child(3) {
-webkit-animation-name: page-3;
animation-name: page-3;
}
.book ul li:nth-child(4) {
-webkit-animation-name: page-4;
animation-name: page-4;
}
.book ul li:nth-child(5) {
-webkit-animation-name: page-5;
animation-name: page-5;
}
.book ul li:nth-child(6) {
-webkit-animation-name: page-6;
animation-name: page-6;
}
.book ul li:nth-child(7) {
-webkit-animation-name: page-7;
animation-name: page-7;
}
.book ul li:nth-child(8) {
-webkit-animation-name: page-8;
animation-name: page-8;
}
.book ul li:nth-child(9) {
-webkit-animation-name: page-9;
animation-name: page-9;
}
.book ul li:nth-child(10) {
-webkit-animation-name: page-10;
animation-name: page-10;
}
.book ul li:nth-child(11) {
-webkit-animation-name: page-11;
animation-name: page-11;
}
.book ul li:nth-child(12) {
-webkit-animation-name: page-12;
animation-name: page-12;
}
.book ul li:nth-child(13) {
-webkit-animation-name: page-13;
animation-name: page-13;
}
.book ul li:nth-child(14) {
-webkit-animation-name: page-14;
animation-name: page-14;
}
.book ul li:nth-child(15) {
-webkit-animation-name: page-15;
animation-name: page-15;
}
.book ul li:nth-child(16) {
-webkit-animation-name: page-16;
animation-name: page-16;
}
.book ul li:nth-child(17) {
-webkit-animation-name: page-17;
animation-name: page-17;
}
.book ul li:nth-child(18) {
-webkit-animation-name: page-18;
animation-name: page-18;
}
@-webkit-keyframes page-0 {
4% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
13%,
54% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
63% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@keyframes page-0 {
4% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
13%,
54% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
63% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@-webkit-keyframes page-1 {
5.86% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
14.74%,
55.86% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
64.74% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@keyframes page-1 {
5.86% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
14.74%,
55.86% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
64.74% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@-webkit-keyframes page-2 {
7.72% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
16.48%,
57.72% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
66.48% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@keyframes page-2 {
7.72% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
16.48%,
57.72% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
66.48% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@-webkit-keyframes page-3 {
9.58% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
18.22%,
59.58% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
68.22% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@keyframes page-3 {
9.58% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
18.22%,
59.58% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
68.22% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@-webkit-keyframes page-4 {
11.44% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
19.96%,
61.44% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
69.96% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@keyframes page-4 {
11.44% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
19.96%,
61.44% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
69.96% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@-webkit-keyframes page-5 {
13.3% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
21.7%,
63.3% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
71.7% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@keyframes page-5 {
13.3% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
21.7%,
63.3% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
71.7% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@-webkit-keyframes page-6 {
15.16% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
23.44%,
65.16% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
73.44% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@keyframes page-6 {
15.16% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
23.44%,
65.16% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
73.44% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@-webkit-keyframes page-7 {
17.02% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
25.18%,
67.02% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
75.18% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@keyframes page-7 {
17.02% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
25.18%,
67.02% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
75.18% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@-webkit-keyframes page-8 {
18.88% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
26.92%,
68.88% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
76.92% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@keyframes page-8 {
18.88% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
26.92%,
68.88% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
76.92% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@-webkit-keyframes page-9 {
20.74% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
28.66%,
70.74% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
78.66% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
}
@keyframes page-9 {
20.74% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
transform: rotateZ(0deg) translateX(-18px);
}
28.66%,
70.74% {
-webkit-transform: rotateZ(180deg) translateX(-18px);
transform: rotateZ(180deg) translateX(-18px);
}
78.66% {
-webkit-transform: rotateZ(0deg) translateX(-18px);
trans.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0