2.ZeptoQQ界面案例

QQ官网项目（二）

1.透视介绍

近大远小 ： http://www.w3school.com.cn/cssref/pr_perspective.asp

一旦在父标签设计透视，子标签就会有透视效果

2.第一屏

1.第一屏添加透视效果

2.第一屏的舞台中ul旋转动画

按照y轴旋转

   section.p1 .p1-main ul{
            animation: p1Cirlce 20s infinite alternate;
   }

   @keyframes  p1Cirlce{
            0%{transform:translateX(0px) translateY(0px) translateZ(0px)
            rotateX(0deg) rotateY(0deg) rotateZ(0deg)
            scaleX(1) scaleY(1) scaleZ(1) }

            100%{transform:translateX(0px) translateY(0px) translateZ(0px)
            rotateX(0deg) rotateY(360deg) rotateZ(0deg)
            scaleX(1) scaleY(1) scaleZ(1)}
    }

执行效果：

3.面向和背向效果

图片面向前，可见； 背向，不可见

backface-visibility

  • 设计标签背向时是否可见 ;
  • 如果在旋转元素不希望看到其背面时，该属性很有用。
  • 在3D效果下能显现
backface-visibility: visible|hidden;

1.父标签添加3D效果

transform-style

  • 属性规定如何在 3D 空间中呈现被嵌套的元素
  • 该属性必须与 transform 属性一同使用
  • 语法：
transform-style: flat|preserve-3d;

2.背向屏幕不显示

4后3张图片在y轴旋转180度

前面2张图片向前，后3张图片向后（ 在y轴旋转180度 ）

5在Z轴分层

父标签要添加3D效果

6.添加环绕动画

在Z轴添加环绕动画

/*环绕*/
section.p1 .p1-round{
    width: 680px;
    height: 680px;
    /*定位*/
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -340px;
    margin-top: -340px;
    /*添加动画*/
    animation: p1Round 5s infinite linear;

}

7.环绕在X轴旋转60度

圆环倒下效果

8.环绕在Y轴旋转-10度

圆环切斜效果

9.环绕放大

3第二屏

1.搭建布局

添加透视:

2.线条居中

/*线条*/
section.p2 .p2-bg span{
    height: 1px;
    width: 5000px;
    background-color: #c7e00e;
    /*定位*/
    position: absolute;
    top: 50%;
    left: 0;

    /*线条左边小右边大*/
    transform:translateX(0px) translateY(0px) translateZ(0px)
    rotateX(0deg) rotateY(-10deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);

    margin-left: -500px;
}

执行的效果：

3.光斑和光线

注意：nth-child( ) 选中的标签

执行效果：

4.内容布局

1.内容布局



执行的效果：

2.里面的li内容定位

!](http://upload-images.jianshu.io/upload_images/5793792-80dea0d8a6638f95.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

5.平移图片

section.p2 .p2-main ul li:nth-child(1){
    left: 80%;
}
section.p2 .p2-main ul li:nth-child(2){
    left: 60%;
}
section.p2 .p2-main ul li:nth-child(3){
    left: 50%;
}
section.p2 .p2-main ul li:nth-child(4){
    left: 30%;
}

执行效果：

6.标题布局

执行效果：

7.旋转动画

针对每一个li标签执行动画

8.落空类

1.界面一进来默认放大

image.png

2.删除放大的样式（落空类）

1.手动删除落空类
2.添加过渡效果
//all    :  默认属性
//1s     ：过渡时间
//linear :速度曲线
transition: all 1s linear;
3.js删除落空类

4第三屏

1.背景布局

section.p3 .p3-bg img{
    /*定位*/
    position: absolute;
    top: 50%;
    left: 50%;
}

section.p3 .p3-bg img:nth-child(1){
    margin-top: -555px;
    margin-left: -690px;

}
section.p3 .p3-bg img:nth-child(2){
    margin-top: -65px;
    margin-left: -65px;
}

执行效果：

2.内容布局800

执行的效果

3.分离内容中的li标签

在Y轴旋 + - 60 度

image.

4.li添加轨道

section.p3 .p3-main ul li{
    ....

    /*轨道*/
    border: 1px solid #5ec0ff;
    border-radius: 50%;
}

效果：

5.li实现公转

每一个 li 标签都沿着 Y 轴旋转360 度

section.p3 .p3-main ul li:nth-child(1){
    /*transform:translateX(0px) translateY(0px) translateZ(0px)*/
    /*rotateX(0deg) rotateY(-80deg) rotateZ(0deg)*/
    /*scaleX(1) scaleY(1) scaleZ(1);*/

    /*公转*/
    animation: p3Cirle1 20s infinite linear;
}

@keyframes p3Cirle1 {
    0%{transform:translateX(0px) translateY(0px) translateZ(0px)
    rotateX(0deg) rotateY(-60deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);}
    100%{transform:translateX(0px) translateY(0px) translateZ(0px)
    rotateX(0deg) rotateY(300deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);}
}


section.p3 .p3-main ul li:nth-child(2){
    /*transform:translateX(0px) translateY(0px) translateZ(0px)*/
    /*rotateX(0deg) rotateY(0deg) rotateZ(0deg)*/
    /*scaleX(1) scaleY(1) scaleZ(1);*/
    /*公转*/
    animation: p3Cirle2 20s infinite linear;
}

@keyframes p3Cirle2 {
    0%{transform:translateX(0px) translateY(0px) translateZ(0px)
                rotateX(0deg) rotateY(0deg) rotateZ(0deg)
                scaleX(1) scaleY(1) scaleZ(1);}
    100%{transform:translateX(0px) translateY(0px) translateZ(0px)
                rotateX(0deg) rotateY(360deg) rotateZ(0deg)
                scaleX(1) scaleY(1) scaleZ(1);}
}


section.p3 .p3-main ul li:nth-child(3){
    /*transform:translateX(0px) translateY(0px) translateZ(0px)*/
    /*rotateX(0deg) rotateY(80deg) rotateZ(0deg)*/
    /*scaleX(1) scaleY(1) scaleZ(1);*/
    /*公转*/
    animation: p3Cirle3 20s infinite linear;
}

@keyframes p3Cirle3 {
    0%{transform:translateX(0px) translateY(0px) translateZ(0px)
    rotateX(0deg) rotateY(60deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);}
    100%{transform:translateX(0px) translateY(0px) translateZ(0px)
    rotateX(0deg) rotateY(420deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);}
}

6.li实现倾斜

每个li 标签 在 X 轴旋转 75 度

7.img实现自转

section.p3 .p3-main ul li:nth-child(1) img{
    /*自转*/
    animation: p3Round 4s infinite linear;
}

section.p3 .p3-main ul li:nth-child(2) img{
    /*自转*/
    animation: p3Round 5s infinite linear;
}

section.p3 .p3-main ul li:nth-child(3) img{
    /*自转*/
    animation: p3Round 3s infinite linear;
}
@keyframes p3Round {
    0%{transform:translateX(0px) translateY(0px) translateZ(0px)
    rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);}
    100%{transform:translateX(0px) translateY(0px) translateZ(0px)
    rotateX(0deg) rotateY(0deg) rotateZ(360deg)
    scaleX(1) scaleY(1) scaleZ(1);}
}

8.实现标题

1.标题布局

效果：

2.标题旋转

标题沿着 Y 轴旋转 -40 度 ； 沿着 X 轴旋转 10 度

9.落空类

1.默认放大-拉远

2.落空类添加过渡效果am

5第四屏

1.背景布局

1.背景定位

效果：

2.光线定位

效果：

3.光线动画

2中间内容

1.布局定位

执行效果：

2.X轴旋转45度

ul在X轴旋转45度

效果：

3.在Z轴分层

1.加3D特效

ul 添加3D特效

transform-style

  • 属性规定如何在 3D 空间中呈现被嵌套的元素
  • 该属性必须与 transform 属性一同使用
  • 语法：
transform-style： preserve-3d
2.分层

li在Z轴分层 ， 父标签要添加3D效果

效果：

4.图片旋转

3.标签

效果：

4.标题

在x轴旋转30度， 放大1.2倍

5.落空类

标签从左边进来 ， 标题从右边进来， 中间内容落空

6第五屏

1.标签和标题布局

执行的效果：

2.中间内容

1.舞台ul布局

效果：

2.li 布局

效果：

3.li 添加背景

1.第一张图的背景

section.p5 .p5-main ul li:nth-child(1){
    width: 305px;
    height: 305px;

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    
    background: url("../images/page5_bubble_glow.png");
}

2.第二张图的背景

section.p5 .p5-main ul li:nth-child(2){
    width: 200px;
    height: 200px;

    position: absolute;
    left: 35%;
    top: 35%;
    margin-left: -150px;
    margin-top: -150px;

    background: url("../images/page5_bubble.png");
    background-size: cover;
}

执行效果：

3.第三张图的背景

section.p5 .p5-main ul li:nth-child(3){
    width: 250px;
    height: 250px;

    position: absolute;
    left: 25%;
    top: 90%;
    margin-left: -150px;
    margin-top: -150px;

    background: url("../images/page5_bubble.png");
    background-size: cover;
}

4.第四张图的背景

section.p5 .p5-main ul li:nth-child(4){
    width: 180px;
    height: 180px;

    position: absolute;
    left: 95%;
    top: 90%;
    margin-left: -150px;
    margin-top: -150px;

    background: url("../images/page5_bubble.png");
    background-size: cover;
}

5.第五张图的背景

section.p5 .p5-main ul li:nth-child(5){
    width: 120px;
    height: 120px;

    position: absolute;
    left: 75%;
    top: 45%;

    margin-top: -150px;

    background: url("../images/page5_bubble.png");
    background-size: cover;
}

6.第六张图的背景

section.p5 .p5-main ul li:nth-child(6){
    width: 90px;
    height: 90px;

    position: absolute;
    left: 90%;
    top: 55%;

    margin-top: -150px;

    background: url("../images/page5_bubble.png");
    background-size: cover;
}

执行的效果：

7.最后一张图片缩小

3.落空类

1.标签和标题落空

记住： 1. 要添加动画过渡类 ; 2. 标签和标题旋转坐标在右下角( 100% , 100% )

2.内容落空类

记住： 要给li标签添加动画过渡类

//x轴坐标(-1000,  0 )
.p5.current .p5-main ul li:nth-child(1){
    transform:translateX(-1000px) translateY(0px) translateZ(0px)
    rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);
}

//x轴坐标(-1000,-1000)
.p5.current .p5-main ul li:nth-child(2){
    transform:translateX(-1000px) translateY(-1000px) translateZ(0px)
    rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);
}

//x轴坐标(-1000,400)
.p5.current .p5-main ul li:nth-child(3){
    transform:translateX(-1000px) translateY(400px) translateZ(0px)
    rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);
}

//x轴坐标(1000, 900)
.p5.current .p5-main ul li:nth-child(4){
    transform:translateX(1000px) translateY(900px) translateZ(0px)
    rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);
}

//x轴坐标(1000, -1000)
.p5.current .p5-main ul li:nth-child(5){
    transform:translateX(1000px) translateY(-1000px) translateZ(0px)
    rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);
}

//x轴坐标(10000,-300)
.p5.current .p5-main ul li:nth-child(6){
    transform:translateX(1000px) translateY(-300px) translateZ(0px)
    rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    scaleX(1) scaleY(1) scaleZ(1);
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 196,099评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,473评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,229评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,570评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,427评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,335评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,737评论 3赞 386
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,392评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,693评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2赞 312
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,349评论 3赞 314
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,750评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1赞 251
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2赞 335

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,709评论 1赞 92
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,140评论 25赞 707
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,952评论 4赞 60
  • 「观影笔记」“真实”之“虚”
    「2017年9月1日，观影《楚门的世界》」 引言—— 影片故事主要是围绕着一个叫Truman 的人展开，他从出生就...
    芮灵翾阅读 638评论 0赞 0
  • 女生月薪多少，才不会被男朋友嫌弃？
    1 我的粉丝和我讲了她的爱情故事：前任发信息给她了，她没理。因为当初就是前任不要她的呀，哪怕她那么爱他，对他那么好...
    小太阳下的乌龟阅读 6,446评论 8赞 10