|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
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 课程:
|
评分
-
查看全部评分
|