页面切换动画效果3

来源：互联网发布：电子图书数据库读秀编辑：程序博客网时间：2024/04/30 02:05

在线演示

对页面进行缩放，使用transform属性中的scale方法。该方法有两个参数，分别是水平方向和垂直方向的缩放值，0代表缩放到最小，1代表缩放到原始大小。

这里写图片描述

html：

<article id="tablet">    <img src="images/05.jpg" alt="tablet">    <h1>Comprehensam</h1>    <p>Tablets, tablets...right 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;}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;}#tablet {  background-color: #4ac4aa;  -webkit-transform: scale(1,1);/*缩放为原始大小*/  transform: scale(1,1);}#wifi {  background-color: #ea5634;  -webkit-transform: scale(0,0);/*缩放到最小*/  transform: 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: scale(0,0);  transform: scale(0,0);}#wifi.move {  -webkit-transform: scale(1,1);  transform: scale(1,1);}

js：

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

0 0