【前端】07 - HTML5 和 CSS3

作者: itlu | 来源:发表于2020-10-19 13:12 被阅读0次

前言
FrontEnd - Bear Cambridge
（近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适
前端工具链学习笔记
HTML5+CSS3+Vue.JS+React.JS+Node.
Hello前端-专注于前端开发
程序员学习攻略：前端基础与核心内容
程序员学习攻略：前端基础与核心内容
【前端】07 - HTML5 和 CSS3
学习前端需要掌握什么基础？

1 2D 转换之 translate

1.1 移动盒子的三种方式

定位；
盒子外边距；
2d转换移动；

1.1.1 案例 translate 中单位是px

<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 移动盒子的位置的方式：1. 定位  2. 盒子的外边距 3. 2d转换移动 */
        div:first-child {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是在轴上移动位置 y 就是在y轴上移动位置 中间使用逗号分隔 */
            transform: translate(100px, 100px);
        }

        div:last-child {
            width: 200px;
            height: 200px;
            transform: translateX(100px);
            background-color: purple;
        }

        div:nth-child(2) {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translateY(100px);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

1.1.2 案例 translate中单位是百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在translate中给百分比单位</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* translate 里面的参数是可以使用百分比的 移动的距离是盒子自身宽度或者高度的百分比 */
            /* 这里的 50% 是移动宽高的 50% 各 50px  */
            transform: translate(50%,50%);
        }
    </style>
</head>
<body>
      <div></div>
</body>
</html>

1.1.3 案例让子盒子在父盒子中居中（使用外边距）

  <head>
    <meta charset="UTF-8">
    <title>让子盒子在父盒子中居中（translate的方式）</title>

    <style>
         .parent {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 50px;
            margin-top: -25px;
            margin-left: -25px;
            background-color: pink;
        }
    </style>
</head>
<body>

<div class="parent">
    <div class="son"></div>
</div>
</body>

1.1.4 案例让子盒子在父盒子中居中（使用外边距）

只需将上面案例其中的 margin-top: -25px; margin-left: -25px; 替换为 transform: translate(50%,50%);即可实现居中效果。

1.2 rotate

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

1.2.1 使用步骤：

给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转 30度 ，逆时针使用的是负值。

div{
      transform: rotate(0deg);
}

1.2.2 案例（2D转换是旋转实现三角图标效果）

     div {
            position: relative;
            width: 200px;
            height: 25px;
            border: 1px solid #ccc;
        }

        div::after {
            position: absolute;
            content: "";
            width: 6px;
            height: 6px;
            top: 6px;
            right: 10px;
            border-right: 1px solid #000000;
            border-bottom: 1px solid #000000;
            /* 让三角形顺时针旋转 45 度 */
            transform: rotate(45deg);
            transition: all 0.3s linear;
        }

        /* 当鼠标经过时旋转 */
        div:hover::after {
            transform: rotate(225deg);
        }

  <div></div>

1.2.3 案例旋转中心切换

<head>
    <meta charset="UTF-8">
    <title>旋转中心案例</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            /* 过渡写在本身上 */
            transition: all 1s;
            /* 设置旋转中心 可以是 百分比 方位名词 px  */
            /*transform-origin: 50% 50%; !*  50% 50% 为 center  center*!*/
            /*transform-origin: right top;*/
            transform-origin: 20px 20px;
        }
        /* 鼠标经过时旋转 */
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

1.2.4 案例鼠标接触旋转

  <head>
    <meta charset="UTF-8">
    <title>图像顺时针旋转</title>

    <style>
        img {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 150px;
            /* deg */
            border: 1px solid #ccc;
            border-radius: 50%;
            /* 过渡写在本身上 ，谁做过渡给谁加 */
            transition: all 30s;
            cursor: pointer;
        }

        img:hover {
            top: 50px;
            left: 50px;
            /* 逆时针使用负数 */
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<img src="../media/pic.jpg" alt="">
</body>

1.3 `2D` 转换之 `scale`

1.3.1 `scale` 的作用：

用来控制元素的放大与缩小

1.3.2 语法

  transform: scale(x, y)

1.3.3 知识要点

注意，x 与 y 之间使用逗号进行分隔。
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大。
transform: scale(2, 2): 宽和高都放大了二倍。
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致。
transform:scale(0.5, 0.5): 缩小。
scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子。

1.3.4 鼠标经过图片放大

  <head>
    <meta charset="UTF-8">
    <title>鼠标经过图片放大</title>

    <style>
        div {
            float: left;
            /* 超出盒子的部分进行隐藏 */
            overflow: hidden;
            margin: 10px;
        }

        img {
            /* 谁做过渡给谁加 */
            transition: all .3s;
        }

        img:hover {
            transform: scale(1.1);
        }
    </style>

</head>
<body>

  <div><a href="#"><img src="../media/scale.jpg" alt=""></a></div>
  <div><a href="#"><img src="../media/scale.jpg" alt=""></a></div>
  <div><a href="#"><img src="../media/scale.jpg" alt=""></a></div>

</body>

鼠标经过放大图片结果

1.3.5 2D转换之缩放scale分页按钮

    <head>
    <meta charset="UTF-8">
    <title>2D转换之缩放scale分页按钮</title>

    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            list-style: none;
            text-align: center;
            border-radius: 50%;
            margin-left: 5px;
            cursor: pointer;
            transition: all .1s;
        }

        li:hover {
            transform:scale(1.2);
        }
    </style>

</head>
<body>
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
  </ul>
</body>

分页按钮鼠标经过时放大

1.4 `2D` 转换综合写法以及顺序问题

1.4.1 知识要点

同时使用多个转换，其格式为 transform: translate() rotate() scale()
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
但我们同时有位置或者其他属性的时候，要将位移放到最前面

2. 动画(animation)

2.1 什么是动画

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

2.2 动画的基本使用

先定义动画
在调用定义好的动画

2.3 语法格式(定义动画)

  @keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

2.4 语法格式(使用动画)

div {
    /* 调用动画 */
   animation-name: 动画名称;
    /* 持续时间 */
   animation-duration: 持续时间；
  }

2.5 动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画。
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画。
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%。

2.6 代码演示

    <style>
    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      animation-name: move;
      animation-duration: 0.5s;
    }

    @keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
      }
    }
  </style>

3. 动画序列

    <head>
    <meta charset="UTF-8">
    <title>CSS3动画序列</title>

    <style>

        /*@keyframes move {

            !* 0% 和 100% 分别可以使用 from 和 to 替代 *!
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(500px , 0) scale(5);
            }
        }*/

        /* 实现动画序列 */
        /* 1. 可以做多个状态的变化 */
        /* 2. 里面的百分比需要使用整数 */
        /* 3. 里面的百分比就是总共时间的划分 */
        @keyframes move {

            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(1000px, 0) scale(1.5);
            }

            50% {
                transform: translate(1000px, 300px) scale(1.8);
            }

            75% {
                transform: translate(0, 300px) scale(2.2);
            }

            100% {
                transform: translate(0, 0) scale(2.5);
            }

        }

        div {
            width: 50px;
            height: 50px;
            background-color: pink;
            /* 动画名称 必须 */
            animation-name: move;
            /* 持续时间 必须 */
            animation-duration: 20s;
            /* 动画运动的速度曲线 */
            animation-timing-function: linear;
            animation-delay: 1s;
            /* 重复次数 infinite无限的  */
            animation-iteration-count: infinite;
            /* 是否反方向播放 默认的是 normal alternate反方向播放  */
            animation-direction: alternate;
            /* 规定动画结束 后的状态 默认 backwards 回到起始状态   forwards 停留在结束状态 */
            /* animation-fill-mode: forwards; */
        }

        div:hover {
            /* 鼠标经过 div 让 div 停止动画 */
            animation-play-state: paused;
        }

    </style>

</head>
<body>
<div></div>
</body>

4. 动画常见属性

4.1 常见的属性

动画常见属性

4.2 代码演示

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;
}

div:hover {
  /* 规定动画是否暂停或者播放 */
  animation-play-state: paused;
}

5. 动画简写方式

5.1 动画简写方式

    /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
    animation: name duration timing-function delay iteration-count direction fill-mode

5.2 知识要点

简写属性里面不包含 animation-paly-state;
暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用;
要想动画走回来，而不是直接调回来：animation-direction: alternate;
盒子动画结束后，停在结束位置：animation-fill-mode: forwards ;

5.3 代码演示

  animation: move 2s linear 1s infinite alternate forwards;

6. 速度曲线细节

6.1 速度曲线细节

animation-timing-function: 规定动画的速度曲线，默认是ease。
steps

6.2 代码演示

    <head>
    <meta charset="UTF-8">
    <title>运动速度曲线步长</title>

    <style>
        div {
            width: 0;
            height: 30px;
            font-size: 20px;
            /* 强制文字一行内显示 */
            white-space: nowrap;
            overflow: hidden;
            background-color: pink;
            /* step 就是分几步 完成我们的动画有了step就不要再写 ease 或者 linear */
            animation: w 4s steps(10) infinite;
        }

        @keyframes w {
            0% {
                width: 0;
            }

            100% {
                width: 200px;
            }
        }
    </style>

</head>
<body>
<!-- 速度曲线细节 -->
<div>我在这儿等着你回来</div>
</body>

7. 案例：奔跑的熊大

奔跑的大熊

<head>
    <meta charset="UTF-8">
    <title>案例-奔跑的熊大</title>

    <style>

        body {
            background-color: #333;
        }

        .first {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(../media/bear.png) no-repeat;
            animation: bear .3s steps(8) infinite, move 8s linear forwards;
        }

        .second {
            top: 125px;
            animation: bear 1s steps(8) infinite, move 16s linear forwards;
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 80%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>

<div class="first"></div>
<div class="first second"></div>

</body>

前言
京东前端实习生面试经验：作为一个前端开发人员，CSS3和HTML5 必须熟练使用CSS3新特性：1、抛弃图片的视觉...
FrontEnd - Bear Cambridge
@(熊剑桥)[web前端|html5]工作经验：在公司从事web前端、html5开发相关工作。使用H5、css3、...
（近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适
作者 | Jeskson来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用，详细说明HTML5的新特...
前端工具链学习笔记
0.前端开发手册包含了各种各样的前端名词、工具的简单解释和参考资料 HTML5、CSS3和JavaScript可...
HTML5+CSS3+Vue.JS+React.JS+Node.
42套WEB前端HTML5，CSS3，VueJS，AngularJS，NodeJS，ReactJS，Bootstr...
Hello前端-专注于前端开发
Hello前端是一个专注于前端开发、用户体验设计、HTML5、CSS3、Javascript的前端开发独立博客，并...
程序员学习攻略：前端基础与核心内容
对于前端的学习和提高，我的基本思路是这样的。首先，前端的三个最基本的东西 HTML5、CSS3 和 JavaScr...
程序员学习攻略：前端基础与核心内容
对于前端的学习和提高，我的基本思路是这样的。首先，前端的三个最基本的东西 HTML5、CSS3 和 JavaScr...
【前端】07 - HTML5 和 CSS3
1 2D 转换之 translate 1.1 移动盒子的三种方式定位；盒子外边距； 2d转换移动； 1.1.1...
学习前端需要掌握什么基础？
学习前端需要掌握什么基础？前端基础包含HTML、CSS层叠样式表、JavaScript、HTML5、CSS3、jQ...

【前端】07 - HTML5 和 CSS3

1 2D 转换之 translate

1.1 移动盒子的三种方式

1.1.1 案例 translate 中单位是px

1.1.2 案例 translate中单位是百分比

1.1.3 案例 让子盒子在父盒子中居中（使用外边距）

1.1.4 案例 让子盒子在父盒子中居中（使用外边距）

1.2 rotate

1.2.1 使用步骤：

1.2.2 案例 （2D转换是旋转实现三角图标效果）

1.2.3 案例 旋转中心切换

1.2.4 案例 鼠标接触旋转

1.3 2D 转换之 scale

1.3.1 scale 的作用 ：

1.3.2 语法

1.3.3 知识要点

1.3.4 鼠标经过图片放大

1.3.5 2D转换之缩放scale分页按钮

1.4 2D 转换综合写法以及顺序问题

1.4.1 知识要点

2. 动画(animation)

2.1 什么是动画

2.2 动画的基本使用

2.3 语法格式(定义动画)

2.4 语法格式(使用动画)

2.5 动画序列

2.6 代码演示

3. 动画序列

4. 动画常见属性

4.1 常见的属性

4.2 代码演示

5. 动画简写方式

5.1 动画简写方式

5.2 知识要点

5.3 代码演示

6. 速度曲线细节

6.1 速度曲线细节

6.2 代码演示

7. 案例 ： 奔跑的熊大

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1.1.3 案例让子盒子在父盒子中居中（使用外边距）

1.1.4 案例让子盒子在父盒子中居中（使用外边距）

1.2.2 案例（2D转换是旋转实现三角图标效果）

1.2.3 案例旋转中心切换

1.2.4 案例鼠标接触旋转

1.3 `2D` 转换之 `scale`

1.3.1 `scale` 的作用：

1.4 `2D` 转换综合写法以及顺序问题

7. 案例：奔跑的熊大