.book{--color:#fff;--duration:6.8s;margin:32px 0 0;zoom:1.5}.book,.book .inner{width:32px;height:12px;position:relative}.book .inner{transform-origin:2px 2px;transform:rotate(0deg)}.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;transform-origin:58px 2px;transform:rotate(0deg);animation:left var(--duration) ease infinite}.book .inner .right{left:28px;transform-origin:2px 2px;transform:rotate(0deg);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;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;transform-origin:100% 2px;width:48px;right:0;top:-10px;position:absolute;background:var(--color);transform:rotate(0deg) translateX(-18px);animation-duration:var(--duration);animation-timing-function:ease;animation-iteration-count:infinite}@keyframes page-animation{0%,to{transform:rotate(0deg) translateX(-18px);opacity:0}4%,63%{transform:rotate(180deg) translateX(-18px);opacity:0}10%,40%{transform:rotate(0deg) translateX(-18px);opacity:1}46%,54%{transform:rotate(180deg) translateX(-18px);opacity:1}}.page{animation:page-animation var(--duration) ease infinite}