QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 801|回复: 9

[系列教程] 0 0 6 4 - 喜迎“3.8”妇女节的一张超级贺卡

[复制链接]
最佳答案
137 
累计签到:660 天
连续签到:188 天
不二如是 发表于 2017-3-6 15:59:06 8019 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2017-3-15 16:08 编辑

60616263我们一直围绕,Loading元素介绍动画的玩法。

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

其实呢?!

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

只是基于transformtransition制作3D翻页效果

Snip20170306_676.png


很简单,准备三张图片,放在html相同目录下,像素要一样大哈~
Archive.zip (325.56 KB, 下载次数: 20, 售价: 3 鱼币)

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
alltolove + 5 + 5 + 3 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
50 
累计签到:580 天
连续签到:2 天
alltolove 发表于 2017-3-6 18:32:14 | 显示全部楼层
哈哈,我的头像终于显示正常了
最佳答案
137 
累计签到:660 天
连续签到:188 天
不二如是  楼主| 发表于 2017-3-6 21:23:16 | 显示全部楼层
alltolove 发表于 2017-3-6 18:32
哈哈,我的头像终于显示正常了

每次看到香蕉,都是一紧~
最佳答案
44 
累计签到:532 天
连续签到:1 天
wei_Y 发表于 2017-3-7 13:59:21 | 显示全部楼层
CSS玩的好6.
最佳答案
137 
累计签到:660 天
连续签到:188 天
不二如是  楼主| 发表于 2017-3-7 14:08:23 | 显示全部楼层


更6的是撸铁~
最佳答案
44 
累计签到:532 天
连续签到:1 天
wei_Y 发表于 2017-3-7 14:10:46 | 显示全部楼层

感受到了你的洪荒之力。
最佳答案
0 
累计签到:718 天
连续签到:1 天
会魔法的魔法 发表于 2017-4-20 16:10:51 | 显示全部楼层
真是有趣
最佳答案
0 
累计签到:703 天
连续签到:1 天
aswyamato1989 发表于 2017-8-6 11:26:33 | 显示全部楼层
交作业!
064.jpg
最佳答案
0 
累计签到:6 天
连续签到:1 天
林子军 发表于 2018-2-8 15:32:48 | 显示全部楼层
不二那个1。jpg和2。jpg怎么翻页的 我不懂..
最佳答案
0 
累计签到:6 天
连续签到:1 天
林子军 发表于 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>
这是代码

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-5-25 22:41

快速回复 返回顶部 返回列表