页面切换动画效果5

来源：互联网发布：js改变div文字编辑：程序博客网时间：2024/04/30 01:54

在线演示

在切换过程中会发生同时翻转和缩放的效果。如图：

这里写图片描述

html:

<article id="tablet">    <img src="images/05.jpg" alt="tablet">    <h1>Comprehensam</h1>    <p>Tablets, tablets... one for you.</p>    <a href="#wifi">Next</a>  </article>  <article id="wifi">    <img src="images/06.jpg" alt="">    <h1>Adversarium</h1>    <p>Our Tablet Buying Guide ... after all.</p>    <a href="#tablet">Next</a>  </article>

css：

html,body {height: 100%;}body {  margin: 0;  padding: 0;  text-align: center;  color: #fff;  overflow: hidden;  position: relative;  -webkit-perspective: 1500px;  perspective: 1500px;}article {  position: absolute;  top: 0;  width: 100%;  height: 100%;  padding: 100px;  box-sizing: border-box;  -webkit-transition: all 1s ease-in-out;  transition: all 1s ease-in-out;  -webkit-backface-visibility: hidden;  backface-visibility: hidden;}#tablet {  background-color: #4ac4aa;  -webkit-transform: rotateY(0deg) scale(1,1);  transform: rotateY(0deg) scale(1,1);}#wifi {  background-color: #ea5634;  -webkit-transform: rotateY(180deg) scale(0,0);  transform: rotateY(180deg) scale(0,0);}h1 {  font-size: 4em;  border-bottom: 1px solid rgba(255, 255, 255, .2);  padding-bottom: 30px;}p {  color: rgba(255, 255, 255, .8);  margin-bottom: 30px;}a {  font-size: 1.5em;  padding: 5px 50px;  border: 1px solid #fff;  border-radius: 4px;  text-decoration: none;  color: #fff;}#tablet.move {  -webkit-transform: rotateY(180deg) scale(0,0);  transform: rotateY(180deg) scale(0,0);}#wifi.move {  -webkit-transform: rotateY(0deg) scale(1,1);  transform: rotateY(0deg) scale(1,1);}

js：

<script>    $(document).ready(function() {      $('a').click(function(e) {        e.preventDefault();        $('#tablet').toggleClass('move');        $('#wifi').toggleClass('move');      });    });</script>

解析：
为页面元素添加过多的transform渲染效果，尤其是3D效果，将会严重消耗手机等移动端的性能，因此在移动端应谨慎使用以上效果。

0 0