使用CSS3 ,jQuery实现点击翻书动画效果,完整效果可在firefox中查看css
HTML前端
<div class="desktop"> <div class="book"> <div class="page bg end"> <div class="front">谢谢阅读</div> </div> <div class="page"> <div class="back"> <p>JavaScript很重要</p> </div> <div class="front">JavaScript </div> </div> <div class="page"> <div class="back"> <p>CSS3很是强大</p> </div> <div class="front">CSS3</div> </div> <div class="page"> <div class="back"> <p>HTML5新特性不错哦</p> </div> <div class="front">HTML5</div> </div> <div class="page bg"> <div class="back"> <p>做者:M先生</p> <p>我的博客:</p> <a href="https://home.cnblogs.com/u/mp1994/">https://home.cnblogs.com/u/mp1994/</a> </div> <div class="front">前端技术栈</div> </div> </div> </div>
CSSjquery
/* 简单翻书动画开始 */ .desktop{ background-size: cover; display: flex; justify-content: center; align-items: center; width: 300px; height: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .book{ width: 300px; height: 400px; position: absolute; /* 倾斜30度角 */ transform: rotateX(30deg); transform-style: preserve-3d; perspective: 1200; font-size: 30px; color: #9ACD32; box-shadow: 0 6px 10px 0 rgba(0,0,0,.6); } .page{ width: 100%; height: 100%; position: absolute; background-color: #eee; /* 翻转轴left */ transform-origin: left; /* backface-visibility: hidden; */ border-left: 2px solid saddlebrown; box-sizing: border-box; z-index: ; } .bg{ background-color: #1D7DB1; } .end{ z-index: -999999; } /* 正面 */ .front{ position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: inherit; } /* 背面 */ .back{ position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: inherit; color: red; font-size: 12px; font-weight: bold; transform: rotateY(180deg); } @keyframes turning { to{ transform: rotateY(-160deg); } } @keyframes resetBook{ from{ transform: rotateY(-160deg); } to{ transform: rotateY(0deg); } } /* 简单翻书动画结束 */
JavaScriptchrome
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(function () { const $page = $('.page') let isClick = true $page.click(function (e){ // 动画执行时禁止再次点击 if (isClick) { isClick = false setTimeout( () => { isClick = true }, 2000) // 获取当前点击元素下标 const index = $(this).index() const $childFront = $(this).children('.front') const $childBack = $(this).children('.back') // 因为背部封面(下标0)是不动的 所以判断下标大于0才增减class if (index > 0) { // 判断是否已经翻过 已经翻过则翻回 if ( $(this).hasClass('flag') ) { // 设置css执行动画效果 $(this).css({ "animation": "resetBook 2s linear 1" }) // 转到一半时 设置正反面 z-index setTimeout(() => { $(this).css({ "z-index": index }) $childFront.css({'z-index': index}) $childBack.css({'z-index': index - 1}) }, 1000) // 去除标记 $(this).removeClass('flag') } else { // 设置css执行动画效果 $(this).css({ "animation": "turning 2s linear 1", "animation-fill-mode": "forwards", }) // 动画完成后将设置翻转后的z-index // 兼容chrome浏览器 const isChrome = navigator.userAgent.indexOf('Chrome') if (isChrome > -1) { setTimeout(() => { $(this).css({ 'z-index': index, "box-shadow": "0 6px 10px rgba(0,0,0,.2)" }) },2000) } else { setTimeout(() => { $(this).css({ 'z-index': index * -1, "box-shadow": "0 6px 10px rgba(0,0,0,.2)" }) },2000) } // 转到一半时 设置正反面 z-index setTimeout(() => { $childFront.css({'z-index': index}) $childBack.css({'z-index': index + 1}) }, 1000) // 添加标记 $(this).addClass('flag') } } } }) }) </script>
效果以下:浏览器