利用css3的3d效果，实现一个简单的翻页器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3d翻页动画</title>
</head>
<style>.box {position: relative;margin: 100px auto;width: 160px;height: 200px;background: #f0ddca;transform: perspective(600px);              /*开启透视*/transform-style: preserve-3d;               /*保持子元素的3d效果*/box-shadow: 2px 5px 6px #666666;}.page {position: absolute;width: 100%;height: 100%;transition: all .8s ease-in-out;transform-origin: left;transform-style: preserve-3d;          /*保持子元素的3d效果*/}.next_page {transform: rotateY(-180deg);}.pre_page {transform: rotateY(0deg);}.box .page .front,.back {width: 100%;height: 100%;position: absolute;backface-visibility: hidden;            /*元素背面朝屏幕时背景不可见*/}.box .page .front {background: #0a60bd;}.box .page .back {background: #0fbf60;transform: rotateY(180deg);}
</style>
<script>window.onload = () => {const next = document.querySelector(".next");const pre = document.querySelector(".pre");const pages = document.querySelectorAll(".page")let index = 0;next.addEventListener('click', () => {if(index <2) {pages[index].classList.remove("pre_page")pages[index].classList.add("next_page")index ++}})pre.addEventListener('click', () => {if(index >0) {pages[index -1].classList.add("pre_page")pages[index -1].classList.remove("next_page")index --}})}
</script>
<body><div class="box"><div class="page"><div class="front"></div><div class="back"></div></div><div class="page"><div class="front"></div><div class="back"></div></div><div class="page"><div class="front"></div><div class="back"></div></div></div><button class="pre">上一页</button><button class="next">下一页</button>
</body>
</html>

利用CSS，实现翻页效果相关推荐

HTML css实现翻页效果,一个纯CSS3实现的酷炫翻书效果
效果细节其实项目中的关键在于几个属性,perspective和rotate,便是透视和旋转 perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果.z> ...
纯HTML CSS设计翻页效果
大一网页设计,尝试更多炫酷页面内容,狠狠加分!!!! 话不多说,直接上代码这是HTML部分: [图片链接为原神官网图片,请联系作者删除] <body><!-- 先构建需要主体框架 ...
HTML CSS实现翻页效果（动画）
有详情注释说明 <html> <style>* {padding: 0;margin: 0;}body,html {height: 100%;}body {/*perspect ...
android 辅助功能翻页,Android利用悬浮按钮实现翻页效果
今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在An ...
书翻页效果php,Css实现翻书效果
如何实现翻书效果在一些小说站中经常应用,其实实现起来也很简单,下面是用div+css 实现翻书效果. body{ overflow: hidden; margin: 0; padding: 0; } ...
用AjaxPro实现无刷新翻页效果及数据库分页技术介绍
在看本文之前,建议查看本人的系列文章: <AjaxPro与服务器端交互过程中如何传值>:http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/ ...
html5 制作书架展示 PHP,简单做出HTML5翻页效果文字特效
简单做出HTML5翻页效果文字特效之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的, ...
简单零基础学会H5移动端滑动翻页效果
这篇文章教大家如何使用原生js和少量css3动画来实现HTML5的翻页效果,我会尽量讲得细一点,让零基础的同学也能学会这个简单的案例. 先来看下html的布局代码: index.html 一个div包 ...
微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...
javascript移动端电子书翻页效果
1.后端给一长串的纯文本 2.前端根据屏幕的高度,将文本切割为 n 页 3.使用插件 turn.js 将切割好的每页,加上翻书效果 <!DOCTYPE html> <html lan ...

利用CSS，实现翻页效果

利用css3的3d效果，实现一个简单的翻页器：

利用CSS，实现翻页效果相关推荐

最新文章

热门文章