HTML5 第二天

一、rotate

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

使用步骤：

  1. 给元素添加转换属性 transform

  2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{

      transform: rotate(0deg);

}
二、三角
  • 代码演示
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            position: relative;

            width: 249px;

            height: 35px;

            border: 1px solid #000;

        }

        div::after {

            content: "";

            position: absolute;

            top: 8px;

            right: 15px;

            width: 10px;

            height: 10px;

            border-right: 1px solid #000;

            border-bottom: 1px solid #000;

            transform: rotate(45deg);

            transition: all 0.2s;

        }

        /* 鼠标经过div  里面的三角旋转 */

        div:hover::after {

            transform: rotate(225deg);

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>
二、设置元素旋转中心点(transform-origin)
  1. transform-origin 基础语法
transform-origin: x y;
  1. 重要知识点

  • 注意后面的参数 x 和 y 用空格隔开

  • x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center

  • 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

三、旋转中心案例
  • 代码演示
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            background-color: pink;

            margin: 100px auto;

            transition: all 1s;

            /* 1.可以跟方位名词 */

            /* transform-origin: left bottom; */

            /* 2. 默认的是 50%  50%  等价于 center  center */

            /* 3. 可以是px 像素 */

            transform-origin: 50px 50px;

        }

        div:hover {

            transform: rotate(360deg);

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>
四、2D 转换之 scale
  1. scale 的作用
  • 用来控制元素的放大与缩小
  1. 语法
transform: scale(x, y)
  1. 知识要点

  • 注意，x 与 y 之间使用逗号进行分隔

  • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大

  • transform: scale(2, 2): 宽和高都放大了二倍

  • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

  • transform:scale(0.5, 0.5): 缩小

  • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

  1. 代码演示
   div:hover {

	   /* 注意，数字是倍数的含义，所以不需要加单位 */

	   /* transform: scale(2, 2) */

	   /* 实现等比缩放，同时修改宽与高 */

	   /* transform: scale(2) */

	   /* 小于 1 就等于缩放*/

	   transform: scale(0.5, 0.5)

   }
五、图片放大案例
  • 代码演示
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            overflow: hidden;

            float: left;

            margin: 10px;

        }

        div img {

            transition: all .4s;

        }

        div 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>

</html>
六、分页按钮案例
  • 代码演示
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        li {

            float: left;

            width: 30px;

            height: 30px;

            border: 1px solid pink;

            margin: 10px;

            text-align: center;

            line-height: 30px;

            list-style: none;

            border-radius: 50%;

            cursor: pointer;

            transition: all .4s;

        }

        li:hover {

            transform: scale(1.2);

        }

    </style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

    </ul>

</body>

</html>
七、 2D 转换综合写法以及顺序问题
  1. 知识要点

  • 同时使用多个转换，其格式为 transform: translate() rotate() scale()

  • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)

  • 但我们同时有位置或者其他属性的时候，要将位移放到最前面

  1. 代码演示
div:hover {

  transform: translate(200px, 0) rotate(360deg) scale(1.2)

}


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            background-color: pink;

            transition: all .5s;

        }

        div:hover {

            /* transform: rotate(180deg) translate(150px, 50px); */

            /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */

            transform: translate(150px, 50px) rotate(180deg) scale(1.2);

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>
八、 动画(animation)
  1. 什么是动画
  • 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现

    复杂的动画效果
  1. 动画的基本使用

  • 先定义动画

  • 在调用定义好的动画

  1. 语法格式(定义动画)
@keyframes 动画名称 {

    0% {

        width: 100px;

    }

    100% {

        width: 200px

    }

}


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        /* 我们想页面一打开，一个盒子就从左边走到右边 */

        /* 1. 定义动画 */

        @keyframes move {

            /* 开始状态 */

            0% {

                transform: translateX(0px);

            }

            /* 结束状态 */

            100% {

                transform: translateX(1000px);

            }

        }

        div {

            width: 200px;

            height: 200px;

            background-color: pink;

            /* 2. 调用动画 */

            /* 动画名称 */

            animation-name: move;

            /* 持续时间 */

            animation-duration: 2s;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>
  1. 语法格式(使用动画)
div {

    /* 调用动画 */

    animation-name: 动画名称;

    /* 持续时间 */

    animation-duration: 持续时间；

}
  1. 动画序列

  • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

  • 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果

  • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

  • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

  1. 代码演示
<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>
九、动画序列
  • 代码演示
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        /* from to 等价于  0% 和  100% */

        /* @keyframes move {

            from {

                transform: translate(0, 0);

            }

            to {

                transform: translate(1000px, 0);

            }

        } */

        /* 动画序列 */

        /* 1. 可以做多个状态的变化 keyframe 关键帧 */

        /* 2. 里面的百分比要是整数 */

        /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */

        @keyframes move {

            0% {

                transform: translate(0, 0);

            }

            25% {

                transform: translate(1000px, 0)

            }

            50% {

                transform: translate(1000px, 500px);

            }

            75% {

                transform: translate(0, 500px);

            }

            100% {

                transform: translate(0, 0);

            }

        }

        div {

            width: 100px;

            height: 100px;

            background-color: pink;

            animation-name: move;

            animation-duration: 10s;

        }

    </style>

</head>

<body>

    <div>

    </div>

</body>

</html>
十、动画常见属性
  1. 常见的属性

  1. 代码演示
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;

}
十一、 动画简写方式
  1. 动画简写方式
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */

animation: name duration timing-function delay iteration-count direction fill-mode
  1. 知识要点

  • 简写属性里面不包含 animation-paly-state

  • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用

  • 要想动画走回来，而不是直接调回来：animation-direction: alternate

  • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

  1. 代码演示
animation: move 2s linear 1s infinite alternate forwards;
十二、速度曲线细节
  1. 速度曲线细节
  • animation-timing-function: 规定动画的速度曲线，默认是ease

  1. 代码演示
div {

  width: 0px;

  height: 50px;

  line-height: 50px;

  white-space: nowrap;

  overflow: hidden;

  background-color: aquamarine;

  animation: move 4s steps(24) forwards;

}

@keyframes move {

  0% {

    width: 0px;

  }

  100% {

    width: 480px;

  }

}

十三、奔跑的熊大

  1. 代码演示
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            background-color: #ccc;

        }

        div {

            position: absolute;

            width: 200px;

            height: 100px;

            background: url(media/bear.png) no-repeat;

            /* 我们元素可以添加多个动画， 用逗号分隔 */

            animation: bear .4s steps(8) infinite, move 3s forwards;

        }

        @keyframes bear {

            0% {

                background-position: 0 0;

            }

            100% {

                background-position: -1600px 0;

            }

        }

        @keyframes move {

            0% {

                left: 0;

            }

            100% {

                left: 50%;

                /* margin-left: -100px; */

                transform: translateX(-50%);

            }

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

扫一扫下面的二维码，关注我们，获取更多精彩活动资讯，有好礼相送哦~

微信赞助 微信打赏 支付宝打赏

2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02的更多相关文章

  1. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03

    HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...

  2. 2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

    HTML5 第一天 一.什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一 ...

  3. 2021年1月-第02阶段-前端基础-HTML+CSS进阶-VS Code 软件

    软件安装 VSCode软件 能够安装 VS Code 能够熟练使用 VS Code 软件 能够安装 VS Code 最常用的插件 1. VS Code简介 1.1 VS Code 简介 Visual ...

  4. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)

    品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...

  5. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(四)

    1. 品优购项目(四) 1). 详情页 detail.html 常用单词 名称 说明 主体 de_container 面包屑导航 crumb_wrap 产品介绍 product_intro ( int ...

  6. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(三)

    品优购项目(三) 1. 首页制作 1). 楼层区 floor 注意这个floor 一个大盒子 包含, 不要给高度,内容有多少,算多少 2). 家用电器模块 这个模块 简单 不需要写样式 版心居中对齐 ...

  7. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(二)

    品优购项目(二) 1. 品优购首页布局 命名集合: 名称 说明 快捷导航栏 shortcut 头部 header 标志 logo 购物车 shopcar 搜索 search 热点词 hotwrods ...

  8. 02 前端基础之CSS

    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...

  9. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

随机推荐

  1. three+pixi 将二维和三维结合

    PIXI+THREE 使用 PIXI 和 THREE 将三维和二维渲染在同一个 canvas 下面 效果 思路 初始化 PIXI 的 Application, 作为 pixi 最重要的变量 const ...

  2. 腾讯与Intel就云游戏的探讨

    今天去参加了在腾讯北京总部的腾讯音视频技术 HUB 技术巡回大会,对其中的云游戏应用的探讨格外感兴趣.正巧最近元宇宙概念很火,这篇文章就大会中对云游戏的探讨进行总结和汇报. 讲述一下来自Intel的工 ...

  3. 【机器学习｜数学基础】Mathematics for Machine Learning系列之线性代数（1）：二阶与三阶行列式、全排列及其逆序数

    @ 目录 前言 二阶与三阶行列式 二阶行列式 三阶行列式 全排列及其逆序数 全排列 逆序数 结语 前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ...

  4. web、html概念快速入门

    1.C/S和B/S 总结,理论上如果硬件不考虑(带宽.(图像资源加载)显卡等),B/S可以完全替代C/S: 2.静态资源和动态资源 其中,访问时动态资源,服务器后台也会通过视图解析器转换成静态资源,因 ...

  5. Linux上项目部署在home目录中无法访问的问题

    在Linux上开发一个Web项目,使用nginx作为Web服务器.在nginx的配置文件中添加一个server,root路径写的是放在home目录中的项目目录的路径.打开浏览器访问,提示错误:403 ...

  6. 【PHP数据结构】图的概念和存储结构

    随着学习的深入,我们的知识也在不断的扩展丰富.树结构有没有让大家蒙圈呢?相信我,学完图以后你就会觉得二叉树简直是简单得没法说了.其实我们说所的树,也是图的一种特殊形式. 图的概念 还记得我们学习树的第 ...

  7. 一起学习PHP的runkit扩展如何使用

    这次又为大家带来一个好玩的扩展.我们知道,在 PHP 运行的时候,也就是部署完成后,我们是不能修改常量的值,也不能修改方法体内部的实现的.也就是说,我们编码完成后,将代码上传到服务器,这时候,我们想在 ...

  8. Docker系列（22）- DockerFile指令说明并构建自己的centos

    DockerFile常用指令 实战测试 DockerHub中99%镜像都是从这个基础镜像过来的FROM scratch,然后配置需要的软件和配置来进行构建 #创建一个自己的centos # 1.编写D ...

  9. jdbc 数据库连接 长时间空闲 断开连接 ApplicationContext.xml

    数据库连接 长时间空闲 断开连接solution: <property name="validationQuery" value="select 1"/& ...

  10. git 切换分支

      # 查看git源 git  remote -v git remote set-url origin http://mingzhanghui@xx.xx.xx.xx:8090/r/ENSO/weba ...