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. 如何实现LRU缓存

    大家好,我是程序员学长,今天我们来聊一聊LRU缓存问题. Tips: LRU在计算机软件中无处不在,希望大家一定要了解透彻. 问题描述 设计LRU(最近最少使用)缓存结构,该结构在构造时确定大小,假设 ...

  2. Shell脚本一键部署——源码编译安装MySQL及自动补全工具

    Shell脚本一键部署--源码编译安装MySQL及自动补全工具 编译安装MySQL 1.软件包 Mysql安装包 将安装包拖至/opt目录下,编辑一个脚本文件,将以下内容复制进去,然后source或者 ...

  3. 20210713考试-2021noip13

    这位巨佬的博客还是比我好多了 T1 工业题 考场: 暴力挺香的,不想正解了. 题解: $f(i,j)$ 只会得到 $f(i-1,j)$ 和 $f(i,j-1)$ 的贡献.每向右一步乘 $a$ ,向下一 ...

  4. system、 exec函数族、fork函数用法说明

    system(), exec函数族, fork函数用法说明 启动一个新线程的方式: system() 该函数经常用来在C程序中调用shell脚本或者命令行程序. 特点: 效率低下,首先需要创建一个sh ...

  5. NAT-T下的端口浮动

    1. IKE端口浮动 IPsec在隧道建立第一第二阶段主要进行加密方式.加密策略等信息的协商,这部分功能是通过IKE协议来实现的. IKE协议默认端口为500,但是如果IPsec隧道传输路径上存在NA ...

  6. CentOS 安装制定版本docker

    # 1) 配置镜像仓库 curl -o /etc/yum.repos.d/Docker-ce-Ali.repo https://mirrors.aliyun.com/docker-ce/linux/c ...

  7. VUE002. 动态使用webpack打包处理后的静态图片路径（{ img: require('xxx.png') }）

    案例摘要 需求是通过v-for循环渲染数组中数据,其中包括本地包的图片文件.话不多说直接上代码: <a-radio-group class="template-radio"& ...

  8. LVS＋keepalived集群

    一.Keepalived工具介绍专为LVS和HA设计的一款健康检查工具 支持故障自动切换(Failover) 支持节点健康状态检查(Health Checking) 官方网站:http://www.k ...

  9. 深入理解Linux文件系统与日志文件

    目录: 一.inode与block 二.inode内容 三.inode的号码 四.inode的大小 五.链接文件 六.inode节点耗尽故障处理 七.恢复EXT类型的文件编译安装extundelete ...

  10. 苹果ASA广告投放归因的接入

    前段时间,苹果终于在大陆区开放了应用商店的竞价广告.毫无疑问又开启了苹果应用导量的新玩法,各大厂商都紧跟脚步吃螃蟹.本篇讲解苹果广告中的归因部分. 苹果广告其实在海外已运行多年,而因为IDFA的政策变 ...