0 0 6 4 - 喜迎“3.8”妇女节的一张超级贺卡,Web密训营,Web开发,鱼C论坛

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

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

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

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

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

其实呢？！

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

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

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

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

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>
效果图：

这是弄啥嘞，也太丑了吧{:10_266:}

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

现在就要修改下三个元素和一些基本设置
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);


   }
效果图：

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

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

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

哈哈，我的头像终于显示正常了{:10_256:}

不二如是 发表于 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的是撸铁～{:10_297:}

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

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

{:10_254:}感受到了你的洪荒之力。

会魔法的魔法 发表于 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 编辑

右侧翻转

页: [1]

鱼C论坛's Archiver

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