H5移动Web开发的学习第二天笔记

最新推荐文章于 2024-05-04 17:54:50 发布

Hulugei

最新推荐文章于 2024-05-04 17:54:50 发布

阅读量129

点赞数

文章标签：前端学习 servlet html5 css

本文链接：https://blog.csdn.net/Hulugei/article/details/126055766

版权

第一天

一、字体图标

下载字体图标

步骤：

使用字体图标

引入相关文件

复制相关文件到fonts文件夹里面。

2.引入cs

<link rel="stylesheet" href="./fonts/iconfont.css">

使用类名引入字体图标

如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

<span class="iconfont icon-daohangdizhi"></span>

使用unicode编码

<link rel="stylesheet" href="./fonts/iconfont.css">

html标签

<i class="infont">&#xe666</i>

使用伪元素字体图标

 i::after {
            content: '\e668';
        }
 span::before {
            content: '\e66f';
        }

html标签

<i class="iconfont"></i>
<span class="iconfont"></span>

二、变形 transform

位移 translate

translate可以让盒子沿着x轴y轴移动

语法

transform: translateX();
transform: translateY();
transform: translate();

translate 和 margin 的区别

translate 使用的百分比，移动的是自身的宽度，而margin 使用的则是父元素的宽度
margin 盒子移动会影响其他的盒子。把其他人挤走。而 translate 移动不会影响其他盒子。不脱标。

应用-盒子水平和垂直居中

.box {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
.box .son {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* top: 50%;
            margin-top: -50px;
            left: 50%;
            margin-left: -50px; */
            top: 50%;
            left: 50%;
            transform:                              translate(-50%,-50%);
        }

注意还有一种写法

/* .box .son {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: #f00;
        } */

开门大吉案例

<!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: 0;
            padding: 0;
        }
        .box {
            width: 1366px;
            height: 600px;
            margin: 50px auto;
            /* background-color: pink; */
            background-image: url(./images/bg.jpg);
            overflow: hidden;
        }
        .box>div {
             width: 50%;
             height: 100%;
             float: left;
             transition: all 0.5s;
        }
        .box .left {
            background: url(./images/fm.jpg) no-repeat left center;
            /* background-color: #f00; */
        }
        .box:hover .left {
            transform: translate(-100%);
        }
        .box .right {
            background: url(./images/fm.jpg) no-repeat right center;
            /* background-color: #0f0; */
        }
        .box:hover .right {
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

旋转 rotate

让盒子旋转角度

transform: rotate(45deg); /*rotate(turn)

正度数，顺时针旋转

负度数，逆时针旋转

是指中心点 transform-origin

设置旋转的中心点位置

transform-origin: right top;

多形态变形小技巧

如果需要移动，也需要旋转，一定要先移动，在旋转

 transform: translate(200px,200px) rotate(400turn);

缩放 scale

transform: scale(1.5)

它比这宽度和高度最大的优势：他是用中心点来进行缩放的，同样他不会影响其他的盒子。

倾斜

transform: skew(60deg)；

三、渐变

线性渐变

<!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>
        .box {
            width: 400px;
            height: 400px;
            /* 默认是垂直渐变色 */
            /* background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); */
            /* 通过方位名词调整 to就是从哪里开始*/
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
            /* 通过角度渐变 注意带单位deg*/
            background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        }
    </style>
</head>

<body>
    <!-- 线性渐变 -->

    <div class="box">

    </div>
</body>

</html>

第二天

一、空间转换 3D

3D坐标

3D比2D多了一个Z轴

3D位移

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
transform: translate3d(x, y, z);

透视

透视的作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

perspective: 800px;

透视注意事项

取值范围经常在800px~1200px之间。
给父元素添加
透视距离也是视距

3D旋转

加了透视后，旋转的效果更明显。

rotateX

类似单杠旋转

旋转中心在盒子正中间

 body {
     /* 父级添加透视 */
     perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateX(360deg);
}

效果：

rotateY

类似小兔子跳钢管舞

body {
    perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateY(360deg);
}

效果：

左手法则

大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向
大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

 transform-style: preserve-3d;

二、动画

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

1.定义

/* 1. 定义的动画 */
@keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}

或

 /* 1. 定义的动画 */
    @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

2.调用

img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

动画属性

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行

鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

多组动画

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

Hulugei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5移动Web开发的学习第二天笔记

H5移动Web开发的学习第二天笔记
复制链接

扫一扫