鱼C论坛

 找回密码
 立即注册
查看: 993|回复: 10

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

[复制链接]
最佳答案
197 
发表于 2017-3-6 15:59:06 | 显示全部楼层 |阅读模式

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

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

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

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

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

其实呢?!

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

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

Snip20170306_676.png


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

评分

参与人数 2荣誉 +9 鱼币 +9 贡献 +6 收起 理由
睦ちゃん她爹 + 4 + 4 + 3 鱼C有你更精彩^_^
alltolove + 5 + 5 + 3 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

最佳答案
54 
发表于 2017-3-6 18:32:14 | 显示全部楼层
哈哈,我的头像终于显示正常了
最佳答案
197 
 楼主| 发表于 2017-3-6 21:23:16 | 显示全部楼层
alltolove 发表于 2017-3-6 18:32
哈哈,我的头像终于显示正常了

每次看到香蕉,都是一紧~
最佳答案
45 
发表于 2017-3-7 13:59:21 | 显示全部楼层
CSS玩的好6.
最佳答案
197 
 楼主| 发表于 2017-3-7 14:08:23 | 显示全部楼层


更6的是撸铁~
最佳答案
45 
发表于 2017-3-7 14:10:46 | 显示全部楼层

感受到了你的洪荒之力。
最佳答案
0 
发表于 2017-4-20 16:10:51 | 显示全部楼层
真是有趣
最佳答案
0 
发表于 2017-8-6 11:26:33 | 显示全部楼层
交作业!
064.jpg
最佳答案
0 
发表于 2018-2-8 15:32:48 | 显示全部楼层
不二那个1。jpg和2。jpg怎么翻页的 我不懂..
最佳答案
0 
发表于 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>
这是代码
最佳答案
3 
发表于 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>
64.gif
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

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

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

GMT+8, 2018-8-19 08:19

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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