【css】CSS实现翻书效果加载动画

最新推荐文章于 2024-05-11 09:11:41 发布
最新推荐文章于 2024-05-11 09:11:41 发布
阅读量1.1k 收藏 2
点赞数 1
文章标签： css 动画 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42582523/article/details/122352063
版权

css:

            .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);
			  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;
			  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;
			  transform-origin: 100% 50%;
			  color: var(--c);
			  opacity: var(--o);
			  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% {
			    transform: rotateY(180deg);
			    opacity: 0;
			  }
			  20% {
			    opacity: 1;
			  }
			  35%, 100% {
			    opacity: 0;
			  }
			  50%, 100% {
			    transform: rotateY(0deg);
			  }
			}
			
			@keyframes page-2 {
			  0% {
			    transform: rotateY(180deg);
			    opacity: 0;
			  }
			  20% {
			    opacity: 1;
			  }
			  35%, 100% {
			    opacity: 0;
			  }
			  50%, 100% {
			    transform: rotateY(0deg);
			  }
			}
			@-webkit-keyframes page-3 {
			  15% {
			    transform: rotateY(180deg);
			    opacity: 0;
			  }
			  35% {
			    opacity: 1;
			  }
			  50%, 100% {
			    opacity: 0;
			  }
			  65%, 100% {
			    transform: rotateY(0deg);
			  }
			}
			@keyframes page-3 {
			  15% {
			    transform: rotateY(180deg);
			    opacity: 0;
			  }
			  35% {
			    opacity: 1;
			  }
			  50%, 100% {
			    opacity: 0;
			  }
			  65%, 100% {
			    transform: rotateY(0deg);
			  }
			}
			@-webkit-keyframes page-4 {
			  30% {
			    transform: rotateY(180deg);
			    opacity: 0;
			  }
			  50% {
			    opacity: 1;
			  }
			  65%, 100% {
			    opacity: 0;
			  }
			  80%, 100% {
			    transform: rotateY(0deg);
			  }
			}
			@keyframes page-4 {
			  30% {
			    transform: rotateY(180deg);
			    opacity: 0;
			  }
			  50% {
			    opacity: 1;
			  }
			  65%, 100% {
			    opacity: 0;
			  }
			  80%, 100% {
			    transform: rotateY(0deg);
			  }
			}
			@-webkit-keyframes page-5 {
			  45% {
			    transform: rotateY(180deg);
			    opacity: 0;
			  }
			  65% {
			    opacity: 1;
			  }
			  80%, 100% {
			    opacity: 0;
			  }
			  95%, 100% {
			    transform: rotateY(0deg);
			  }
			}
			@keyframes page-5 {
			  45% {
			    transform: rotateY(180deg);
			    opacity: 0;
			  }
			  65% {
			    opacity: 1;
			  }
			  80%, 100% {
			    opacity: 0;
			  }
			  95%, 100% {
			    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;
			}

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,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
		        </svg>
		      </li>
		      <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,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
		        </svg>
		      </li>
		      <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,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
		        </svg>
		      </li>
		      <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,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
		        </svg>
		      </li>
		      <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,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
		        </svg>
		      </li>
		      <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,58.1192881 16,59.5 C16,60.8254834 17.0315359,61.9100387 18.3356243,61.9946823 L18.5,62 L71.5,62 C72.8807119,62 74,60.8807119 74,59.5 C74,58.1192881 72.8807119,57 71.5,57 Z M71.5,33 L18.5,33 C17.1192881,33 16,34.1192881 16,35.5 C16,36.8254834 17.0315359,37.9100387 18.3356243,37.9946823 L18.5,38 L71.5,38 C72.8807119,38 74,36.8807119 74,35.5 C74,34.1192881 72.8807119,33 71.5,33 Z"></path>
		        </svg>
		      </li>
		    </ul>
		  </div><span>Loading</span>
		</div>

 

繁星召唤
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【CSS学习笔记】CSS动画效果实战
你好呀，欢迎你的到来。
04-01 304
animation属性： animation-name ：需要绑定的keyframe名称 animation-duration：动画持续时间 animation-timing-function：动画的运动曲线，linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier（）,steps（） animation-delay：动画开始之前的延时 anim...
CSS做一个翻书动画
qq_61919625的博客
03-25 320
css动画
纯css3书本翻页动画特效
09-08
纯css3书本翻页动画特效
css实现翻书效果
richest_qi的博客
08-10 1662
css实现翻书效果。
使用CSS制作一个简单的翻书效果
最新发布
qq_58281352的博客
05-11 528
*transform-origin用于设置动画的基点(中心点),默认点是元素的中心点*//*preserve-3d表示所有子元素在3D空间中呈现*//*旋转rotate*/
使用CSS实现书籍的翻页效果(使用了animation)
Angel_Tears_的博客
04-11 1758
要注意的是父盒子要开启3d, 并且要调整视距;还要注意旋转的角度以及起始位置;定义动画的起始状态和结束状态;让翻转到反面的元素不显示。来实现中间的动画效果;废话不多说,直接上代码。
css3几种常见的翻页特效
热门推荐
帆酱的博客
09-11 2万+
翻页特效 线上demo：https://my.weblf.cn/xly/demo/book_hand_back2.html html: <div class="book preserve-3d"> <div class="now_page point"> <div class="book-page"> <p>第三页...
css实现翻书效果/VW/REM
weixin_44949447的博客
06-24 737
主要利用的效果：旋转 transform: rotateZ(-20deg);过渡 transition: all 1s;旋转轴和旋转中心（旋转点）box-shandow 盒子阴影 注意：利用绝对定位进行布局
纯Css翻书效果详解
李江辰
09-02 2521
翻书效果： 书籍封面、背面、内容页都可自由更改。点击即实现高流畅度的翻页效果 代码如下： 小程序html代码： <view class="boxbook"> <view class="cover-page"> <image class="book" style="width: 150rpx;" mode="widthFix" src="你的图片地址"></image> </view> <view clas
CSS3实现类似翻书效果的过渡动画的示例代码
11-21
在本示例中，我们探讨如何使用CSS3来创建一个类似翻书效果的过渡动画。这个效果常用于增强用户体验，特别是在加载新内容或展示信息时。传统的JavaScript实现可能需要较多的逻辑处理，而CSS3提供了更简洁且直观的方式...
微信小程序，H5翻书动画效果
11-10
在实现翻书动画效果时，通常会使用CSS3的3D变换和过渡效果。CSS3的`transform`属性支持`rotateY()`函数，这可以用于模拟书籍翻页的动作。同时，`transition`属性则控制动画的平滑过渡，使得翻页过程更加自然。在H5中...
纯CSS3实现逼真的翻书效果
06-24
纯CSS3实现逼真的翻书效果是一款好看精致的模拟书本翻页CSS3特效。
turn.js异步加载实现翻书效果
10-16
在标题和描述中提到的“异步加载实现翻书效果”，指的是Turn.js能够动态加载页面内容，而不会一次性加载整个书籍，从而提高页面加载速度并优化用户体验。 在提供的代码片段中，我们可以看到以下关键点： 1. **初始...
基于JS实现翻书效果的页面切换样式
10-20
在这个翻书效果的实现中，我们将主要利用jQuery库，一个轻量级且功能强大的JavaScript库，它简化了DOM操作、事件处理和动画等功能。 在提供的代码片段中，我们可以看到以下关键元素： 1. **jQuery库的引入**：`...
jquery实现左右翻书效果
06-10
要实现翻书效果，我们可能需要用到`$(document).ready()`函数来确保页面加载完毕后执行代码，以及`click`事件来监听用户点击页面的行为。 在实现翻书效果时，主要涉及以下技术点： 1. **CSS3 3D变换**：为了让翻页...
css实现翻页
weixin_52099241的博客
05-06 2142
css实现翻页特效
纯CSS3实现真实翻书效果
若水弹丸之地
12-02 1万+
研读以下代码及其注释，让你轻松掌握如何用 纯CSS3实现真实翻书效果。 可以参考代码下的参考内容
使用css3实现翻书效果（一）
qq_32619577的博客
03-26 2715
最近在网页上看到一个使用css3制作的很有趣的样式，通过纯css3的使用实现翻书的效果，作为初学者的我决定实现一下该效果~该网站特效如图所示： 是不是感觉特效非常棒，直接使用css样式而不使用图片大大减少了加载速度，也降低了用户流量的损耗，实在是一举两得，下面我介绍一下我的开发步骤： 经过我对网站代码的研究，该书籍div分为以下几部分 1.最上层是写
css transform实现翻书
08-30
可以使用CSS的transform属性来实现翻书的效果。具体步骤如下： 1. 创建HTML结构，包含两个块级元素，一个代表书的封面，一个代表书的内页。例如： ```html <div class="cover"></div> <div class="page"></div> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

繁星召唤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值