只用html5简单动画代码(HTML5 3D书本翻页动画的实现示例)
类别:Web前端 浏览量:2747
时间:2021-10-10 00:32:20 只用html5简单动画代码
HTML5 3D书本翻页动画的实现示例这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示,非常酷。
HTML代码
<li class="back-cover p3d"> <li class="page back flip"></li> <li class="page front p3d"> <li class="shadow"></li> <li class="dino"></li> </li> </li> <li class="front-cover p3d"> <li class="page front flip p3d"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum nisl quis nulla eleifend dignissim. Curabitur varius lobortis tincidunt. Maecenas gravida, nulla quis luctus imperdiet, ipsum nibh consectetur ante, in sodales massa tortor eget neque. Donec porta ligula massa, id sagittis est. Ut nisl tellus, faucibus nec feugiat ut, laoreet iaculis felis. Suspendisse ultrices mauris vel tellus suscipit commodo. Integer vitae tortor erat. Pellentesque non tempor nisi.</p> </li> <li class="page back"></li> </li> </li>
CSS代码
.book { width: 300px; height: 300px; margin-top: -150px; position: absolute; left: 50%; top: 50%; -webkit-transform: rotateX(60deg); -moz-transform: rotateX(60deg); -ms-transform: rotateX(60deg); -o-transform: rotateX(60deg); transform: rotateX(60deg); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .page { width: 300px; height: 300px; padding: 1em; position: absolute; left: 0; top: 0; text-indent: 2em; } .front { background-color: #d93e2b; } .back { background-color: #fff; } .front-cover { cursor: move; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } .front-cover .back { background-image: url(mdn.jpg" alt="只用html5简单动画代码(HTML5 3D书本翻页动画的实现示例)" border="0" />
JavaScript代码
(function (window, document) { var prefixes = ['Webkit', 'Moz', 'ms', 'O', ''], book = document.querySelectorAll('.book')[0], page = document.querySelectorAll('.front-cover')[0], dino = document.querySelectorAll('.dino')[0], shadow = document.querySelectorAll('.shadow')[0], hold = false, centerPoint = window.innerWidth / 2, pageSize = 300, clamp = function (val, min, max) { return Math.max(min, Math.min(val, max)); }; page.onmousedown = function () { hold = true; }; window.onmouseup = function () { if (hold) { hold = false; } }; window.onresize = function () { centerPoint = window.innerWidth / 2; }; window.onmousemove = function (evt) { if (!hold) { return; } var angle = clamp((centerPoint - evt.pageX + pageSize) / pageSize * -90, -180, 0), i, j; for (i = 0, j = prefixes.length; i < j; i++) { book.style[prefixes[i] + 'Transform'] = 'rotateX(' + (60 + angle / 8) + 'deg)'; page.style[prefixes[i] + 'Transform'] = 'rotateY(' + angle + 'deg)'; dino.style[prefixes[i] + 'Transform'] = 'rotateX(' + (angle / 2) + 'deg)'; shadow.style[prefixes[i] + 'Transform'] = 'translateZ(1px) skewX(' + (angle / 8) + 'deg)'; } }; })(window, document);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- HTML5离线缓存
- html5开发图片(HTML5开发动态音频图的实现)
- html5video怎么优化(HTML5 video循环播放多个视频的方法步骤)
- html5底部组件(HTML5 Blob对象的具体使用)
- html5课程入门(萌新的HTML5 入门指南)
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- Html5中的<section>标签
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- html5定位地理位置(html5 制作地图当前定位箭头的方法示例)
- html5复制修改(HTML5实现无刷新修改URL的方法)
- html5 固定图片(HTML5拖放API实现自动生成相框功能)
- html5布局(Html5让容器充满屏幕高度或自适应剩余高度的布局实现)
- html5的优点是什么
- html5背景怎么变色(HTML5 背景的显示区域实现)
- html5的新特性
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- 成都旅游攻略(成都旅游攻略自由行最佳线路)
- 给儿童吃什么最好(给儿童吃什么最好消化)
- 杭州旅游攻略()
- 云南旅游攻略(云南旅游攻略5天攻略)
- 收藏 春节假期,这些景区巨划算(收藏春节假期这些景区巨划算)
- 景区游玩,这些安全知识要牢记(这些安全知识要牢记)
热门推荐
- 织梦cms文章页如何跳转(织梦CMS文档读取频道信息失败,无法进行后续操作!)
- python微信防封(深入学习微信网址链接解封的防封原理visit_type)
- python中的多线程详解(python多线程抽象编程模型详解)
- sql语句去除重复记录(使用SQL语句去掉重复的记录两种方法)
- vue官网编辑器主题(vue实现主题切换的多种思路分享)
- mysql慢日志查询作用(MySQL 慢查询日志的开启与配置)
- dedecms数据负载能力(详解织梦dedecms标签{dede:flink /}用法)
- springboot vue 异地登录(vue+springboot实现登录验证码)
- php私有函数怎么调(php intval函数用法总结)
- mysqlupdate语句(MySQL将select结果执行update的实例教程)