0 0 6 4 - 喜迎“3.8”妇女节的一张超级贺卡

不二如是 · 发表于 2017-3-6 15:59:06

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:39 编辑

从60、61、62、63我们一直围绕，Loading元素介绍动画的玩法。

这次，刚好快到国际妇女节了，教你拿H5做一个高B格贺卡

其实呢？！

也并没有高B格很多啦。。。

只是基于transform和transition制作3D翻页效果。

很简单，准备三张图片，放在html相同目录下，像素要一样大哈～

Archive.zip (325.56 KB, 下载次数: 59, 售价: 3 鱼币)

建议自己找，用上面给你的附件也没关系～

body结构，就用31的ul,li上代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>喜迎3.8妇女节</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.greeting{
width:300px;
margin: 0 auto;
position: relative;
}
.cover{
background: url("1.jpg");
}
.page1{
background: url("2.jpg");
}
.page2{
background: url("3.jpg");
}
</style>
</head>
<body>
<ul class="greeting">
<li class="cover">第一页</li>
<li class="page1">第二页</li>
<li class="page2">第三页</li>
</ul>
</body>
</html>

复制代码

效果图：

这是弄啥嘞，也太丑了吧

憋急，有我雷锋传人在，怎么允许这样的事情发生呢！

现在就要修改下三个元素和一些基本设置

li{
position: absolute;
font-size: 0;
width: 300px;
height: 533px;
box-shadow: inset 0px 0px 2px rgba(0,0,0,.1);
}
.cover{
background: url("1.jpg");
z-index: 0;
}
.page1{
background: url("2.jpg");
left: -300px;
z-index: -1;
}
.page2{
background: url("3.jpg");
z-index: -2;
left: 300px;/*稍后要取消*/
}

复制代码

效果图：

对于贺卡的三个li元素，都设置为绝对定位，大小都一样（300*533）。

同时，设置box-shadow，增加每一页的阴影效果，提升下视觉体验。

z-index，设置元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

由于我设置了，left，所以暂时看不到，现在删除page2的left设置：

看到了吗，z-index设置为-2图片3就被，z-index为0的图片1挡住了。

现在就要到最重要的时刻！

我们为前两页设置为默认的旋转角度和旋转点，达到准确的翻页效果。

对于封面来讲，默认就不需要旋转，当旋转时，旋转点在左侧中点

对于第二页，是被翻过来的感觉，就是将其Y轴旋转180度，而旋转点在右侧中点。

第三页，默认被压在底下，自然就会被显示出来。

.cover{
transform-origin: left center;
}
.page1{
transform: rotateY(180deg);
transform-origin: right center;
}

复制代码

效果图：

翻页问题，很简单，给你一个心法

奇数页旋转轴都在左侧，偶数页旋转轴都在右侧

做好上面的准备工作后，就可以添加transition动画了！

鼠标滑过页面时，封面Y轴旋转至-180度，同时第一页Y轴旋转翻动至0度。

然后由于封面，z-index大于第一页的，翻过来就会定在上面，很不符合牛顿定律。。。

看代码：

li{
/*其他*/
-webkit-backface-visibility: hidden;
transition:transform 1s linear;
}
.cover{
/*其他*/
transform-origin: left center;
}
.page1{
/*其他*/
transform: rotateY(180deg);
transform-origin: right center;
.greeting:hover .cover{
transform: rotateY(-180deg);
}
.greeting:hover .page1{
transform: rotateY(0deg);
}

复制代码

效果图：

解释下，由于本人使用的mac系统，safari不支持backface-visibility

所以在前面加上“-webkit”代表safari。

backface-visibility，定义当元素不面向屏幕时是否可见。

属性值为hidden，就是不面向屏幕时，隐藏。

翻页效果是有了，但是3D效果差一些！

怎么办呢？

加东西，让效果更具有透视感

li{
/*其他*/
perspective: 1555px;
transform-style: preserve-3d;
transform: rotateX(10deg);
}

复制代码

效果图：

好吧，帮你到这儿了，去过节吧～

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

alltolove · 发表于 2017-3-6 18:32:14

哈哈，我的头像终于显示正常了

不二如是 · 发表于 2017-3-6 21:23:16

alltolove 发表于 2017-3-6 18:32
哈哈，我的头像终于显示正常了

每次看到香蕉，都是一紧～

wei_Y · 发表于 2017-3-7 13:59:21

CSS玩的好6.

不二如是 · 发表于 2017-3-7 14:08:23

wei_Y 发表于 2017-3-7 13:59
CSS玩的好6.

更6的是撸铁～

wei_Y · 发表于 2017-3-7 14:10:46

不二如是发表于 2017-3-7 14:08
更6的是撸铁～

感受到了你的洪荒之力。

会魔法的魔法 · 发表于 2017-4-20 16:10:51

真是有趣

aswyamato1989 · 发表于 2017-8-6 11:26:33

交作业！

林子军 · 发表于 2018-2-8 15:32:48

不二那个1。jpg和2。jpg怎么翻页的我不懂..

林子军 · 发表于 2018-2-8 15:34:57

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
      *{
      padding:0;
      margin: 0;
      }
      li{
         -webkit-backface-visibility: hidden;
         transition:transform 1s linear;
         position: absolute;
         font-size: 0;
         width: 300px;
         height: 533px;
         box-shadow: inset 0px 0px 2px rgba(0,0,0,.1);
      }
      .cover{
         transform-origin: left center;
      }
      .page1{
         transform: rotateY(180deg);
         transform-origin: right center;
      }
      .cover{
         left: 300px;
         background: url("1.jpg");
         z-index: 0;

      }
      .page1{

         background: url("2.jpg");
         left:0px;
         z-index:-1;
         transform: rotateY(180deg);
         transform-origin: right center;
      }
      .page2{
         background: url("3.jpg");
         z-index:-2;
         left:300px;
      }
      .greeting:hover .cover{
         transform: rotateY(-180deg);
      }
      .greeting:hover .page1{
         transform: rotateY(0deg);
      }

</style>

</head>
<body>
<ul class="greeting">
<li class="cover">第一页</li>
<li class ="page1">2</li>
<li class = "page2">3</li>
</ul>
</body>
</html>
这是代码

隨鈊乄鎍慾 · 发表于 2018-7-8 15:18:41

交作业：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
*{
padding:0;
margin: 0;
}
.greeting{
width:300px;
margin:0 auto;
position:relative;
}
      /*当鼠标在区域内时cover向左翻动*/
      .greeting:hover .cover{
         transform:rotateY(-180deg);
      }
      /*当鼠标在区域内时page1沿着之前的右侧向左翻动至到时0度*/
      .greeting:hover .page1{
         transform:rotateY(0deg);
      }
      li{
         position:absolute;
         font-size:0;
         width:300px;
         height:533px;
         box-shadow:inset 0 0 2px #000;
         /*backface-visibility，定义当元素不面向屏幕时是否可见。*/
         backface-visibility: hidden;
         /*设置动画效果*/
         transition:transform 1s linear;
      }
.cover{
background: url("1.jpg");
         z-index:0;
         /*奇数页旋转轴都在左侧，偶数页旋转轴都在右侧;*/
         /*这里设置旋转点*/
         transform-origin: left center;
}
.page1{

background: url("2.jpg");
left:-300px;
         z-index:-1;
         /*这里设置旋转角度*/
         transform: rotateY(180deg);
         /*这里设置旋转点沿右侧向右翻转*/
         transform-origin: right center;
}
.page2{
background: url("3.jpg");
         z-index:-2;
         #left:300px;
}

</style>

</head>
<body>
<ul class="greeting">
<li class="cover">第一页</li>
<li class ="page1">第二页</li>
<li class = "page2">第三页</li>
</ul>
</body>
</html>

小脑斧 · 发表于 2020-3-19 16:58:39

本帖最后由小脑斧于 2020-3-19 17:55 编辑

花.png

右侧翻转

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 6 4 - 喜迎“3.8”妇女节的一张超级贺卡

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: