HTML5&CSS3_移动端day02


缺点

没写项目分析,选择器没有正确选择,小知识点没有自己写案例,导致知识点不牢固,综合项目不能独立完成。

HTML5&CSS3_移动端开发

空间转换在实际工作中不常用,动画更重要。

空间转换

190

z轴就是我们看向电脑的那一条线,指向我们的方向是正值。

空间转换和day01的平面转换一样,具有位移,旋转,缩放,属性也是transform,只是多了一个z轴。

空间位移

191

这里如果xyz一起写,就需要将transilate改为translate3d,rotate和scale同理

如果都分开写,不需要加3d

192

只书写以上代码,无法看到z轴的效果

193

因为屏幕是平面,所以无法观察到z轴的变化,只能通过近大远小和近清除远模糊来区分,所以需要用到透视属性perspective来实现,那么perspective需要加在哪里呢?

194

注意这里的属性添加给需要透视效果元素的父级,如下图需要给div的box透视效果,box的父级是body就给body加css,添加perspective属性

195

透视的原理

translatez设置负值为缩小,设置正值为放大,因为近大远小

transform:translatez(xpx),这里的x设置的越大,则变化越大,perspective()设置的越小,变化越大,与translate相反

如同时translatez(100px),perspective设置为10px则会让元素放大的超出游览器范围,设置为800-1200则在正常范围。为什么呢?

196

因为perspective设置的是视距,这是在在底层就设置好的,没有为什么,视距就是人的眼睛与屏幕的远近,设置的越小,通俗来说,你与屏幕靠的越近,东西自然越大。

其中transform: translateZ(100px);perspective: 1000px;这两句代码,表示视距是1000px,translatez(100px)即让屏幕中的物体向外z轴走100px,在2d屏幕中的效果自然是物体放大。

空间旋转

rotateZ和rotate效果一样,Z是绕着Z轴转,rotate是绕着中心点转,效果相同。

197

rotate3d,现实中根本不用,你只需要知道有这个写法即可。

198

立体呈现

199

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            /* 向我走近200px,这样本来被back的green覆盖的orange颜色就会到前面来
            而且在z轴有一个200px的距离,只是电脑是平面,我们看不到,但是在旋转的时候可以体现*/
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

3D导航

200

201

因为x轴旋转后改变了坐标轴的位置,即黄色面的xyz方向发生了改变,所以想把上图黄色面移动到长方体的最上面,需要translateZ,而不是translateY

空间缩放

几乎也不用,因为现在网站追求简洁美观,没有这么老土的花哨

202

动画

201

201

205

先定义动画,再使用动画。

206

如果是两个状态就用from和to,如果是多个状态,就使用百分比。

这里的百分比的意思是使用动画使用时长占比节点,如时间设置为10s,则10%就是在1s的时候什么状态,50%就是在5秒的时候什么状态。

默认状态,动画结束后,返回原状态,如果想反复重复动画,需要用到复合属性里的重复次数值。

动画的复合属性

207

动画名称和时长必须加否则无效,其他的可不写。

速度曲线

一般工作中不使用速度曲线,因为时间太短,一般看不出来区别,它的意思是动画变化的速度快慢,有匀速,减速,加速变化这些。

linear是线性匀速,steps(x)是分步动画,如steps(3)就是分三次完成最后的效果。

延迟时间

加秒数即可,但是两个时间值,第一个为动画时长,第二个为延迟时间,意思为延迟x秒后再出现动画。

重复次数

重复次数加数字即可,如果想一直重复动画,就写infinite,这是无穷的无限的意思

208

动画方向

如from{width:200px}to{width:600px}这里是单方向的,200px到600px后,立马回到200px,而加入alternate属性值后,可以让200px到600px,再从600px慢慢返回到200px

执行完毕的状态

一般不设置,执行完毕就会回到原来的样子,但我们可以人为设置执行完毕的状态,但是如果设置这个,就不能加入infinite和alternate去除,因为他们是冲突的,无限循环自然不会执行完毕,相互代替动画方向,自然也没有开始与结束的概率点。

有两个常用属性值,一个是backwards,状态停留在最初状态,是默认值,一个是forwards停留在结束状态。

animation属性拆分写法

了解即可,不用记。

210

211

其中有一个animation-play-state一般配合hover使用,让你鼠标移入,动画暂停,取值为paused

212

逐帧动画

动画有两种,一种是补间动画,工作中最常用,两个状态间非常平滑。

一种是逐帧动画,一般配合精灵图使用,下一帧代替上一帧。

213

214

215

这个动画只是在原地跑,如何让小人在跑的同时,在屏幕上移动呢,可以让小人的父级盒子移动即可。

使用多组动画可以实现

216

在animation里面的第一个动画后,加逗号隔开写第二个即可。

案例

走马灯

217

分析

1-遵循由外到内,由上到下,还有css先写浮动定位,再盒子,最后字体等样式书写顺序

2-将一个盒子,包含ul与li,li中放图片

3-因为li等有默认样式,所以需要清除

4-给图片设置大小,防止原图过大

5-给li浮动,让其排在一排,但是因为ul宽度不够,li还是会掉下去,所以给ul足够宽度

6-定义引用动画即可,注意最后要多复制几个图片,防止留白。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 去除默认的内外间距 */
        *{
            margin: 0px;
            padding: 0px;
        }
        /* 去除li的样式,如原有的小点,浮动让li排在一排 */
        li{
            list-style: none;
            float: left;
        }
        /* 确定img的宽度,高度会等比缩放 */
        img{
            width: 200px;
        }
        /* 盒子居中,再隐藏超出盒子范围的部分 */
        .box{
            margin: 20px auto;
            width: 600px;
            height: 112px;
            border: 5px solid black;
            overflow: hidden;
        }
        /* 给ul足够宽度,从而让确保li在一排 */
        .box ul{
            width: 2000px;
            animation: zmd 5s infinite linear;
        }
        @keyframes zmd{
            from{
                    transform: translateX(0px);
            }
            to{
                transform: translateX(-1400px);
            }
        }
        .box :hover{
            cursor: pointer;
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/1.jpg" alt="">
            </li>
            <li>
                <img src="./images/2.jpg" alt="">
            </li>
            <li>
                <img src="./images/3.jpg" alt="">
            </li>
            <li>
                <img src="./images/4.jpg" alt="">
            </li>
            <li>
                <img src="./images/5.jpg" alt="">
            </li>
            <li>
                <img src="./images/6.jpg" alt="">
            </li>
            <li>
                <img src="./images/7.jpg" alt="">
            </li>
            <!-- 复制前三张图标,防止留白,因为移动translateX后,后面没有元素,就会一片空白,需要填充
            现在直接复制,后续可以用js来复制 -->
            <li>
                <img src="./images/1.jpg" alt="">
            </li>
            <li>
                <img src="./images/2.jpg" alt="">
            </li>
            <li>
                <img src="./images/3.jpg" alt="">
            </li>
        </ul>
    </div>
</body>
</html>

全面出游案例

218

1-背景图片

219

注意,如果body想取屏幕大小的100%,只能再设置html的css取100%

重中之重,background-size可以连写,但是是按照positon/size的格式

如下:

body{
    background: url(../images/f1_1.jpg)  no-repeat center/cover;
    height: 100%;
}

实现分析

1-用大图做页面背景,然后其他子图片,都通过position定位上去,然后通过margin与定位的位置进行调节

从而让图片移动到它应该在的位置。

2-使用动画,实现图片的移动。

*{
    margin: 0px;
    padding: 0px;
}
html{
    height: 100%;
}
body{
    background: url(../images/f1_1.jpg)  no-repeat center/cover;
    height: 100%;
}
.cloud img{
    position: absolute;
    left: 50%;
}
/* 选择img的父级里面的第一个是img的元素 */
.cloud img:nth-child(1){
    margin-left: 250px;
    /* 不一定必须在写了position的css部分里面才能书写left,top这些属性值
    这里的img已经定位了,每个img都可以有不定位值 */
    top: 50px;
    animation: cloudmove 1s 0.3s infinite linear alternate;
}
.cloud img:nth-child(2){
    margin-left: -250px;
    top: 70px;
    animation: cloudmove 1s 0.5s infinite linear alternate;
}
.cloud img:nth-child(3){
    margin-left: -350px;
    animation: cloudmove 1s 0.3s infinite linear alternate;

}
@keyframes cloudmove{
    /* 不加from就是从当前位置 */
    to{
        transform: translateX(20px);
    }
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/myindex.css">
</head>
<body>
    <div class="cloud">
            <img src="./images/yun1.png" alt="">
            <img src="./images/yun2.png" alt="">
            <img src="./images/yun3.png" alt="">
    </div>
</body>
</html>

文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 周东奇 !
免责声明: 本站所发布的一切内容,包括但不限于IT技术资源,网络攻防教程及相应程序等文章仅限用于学习和研究目的:不得将上述内容用于商业或者非法用途,否则一切后果请用户自负。本站部分信息与工具来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如有侵权请邮件(jinnian770@gmail.com)与我们联系处理。
  目录