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. Ubuntu下安装Python3（与旧Python2版本共存）

    官网下载Python3的源码 进行配置,在源码目录运行如下命令. ./configure --prefix=/usr/local/python3 --enable-shared 进行编译,在源码目录运 ...

  2. netty系列之:搭建自己的下载文件服务器

    目录 简介 文件的content-type 客户端缓存文件 其他HTTP中常用的处理 文件内容展示处理 文件传输进度 总结 简介 上一篇文章我们学习了如何在netty中搭建一个HTTP服务器,讨论了如 ...

  3. SpringMVC-源码-图解

  4. 记一次线上问题 → 对 MySQL 的 ON UPDATE CURRENT_TIMESTAMP 的片面认知

    开心一刻 老婆痛经,躺在沙发上,两岁的女儿看着她问道 女儿:妈妈,你怎么了 老婆:妈妈肚子痛 女儿:哦,妈妈你头疼 老婆:不是头疼,妈妈是肚子疼 女儿用她的不锈钢饭碗砸向老婆的额头,说道:妈妈,你哪里 ...

  5. JDK1.8源码(二)——java.lang.Integer类

    一.初识 1.介绍 int 是Java八大基本数据类型之一,占据 4 个字节,范围是 -2^31~2^31 - 1,即 -2147483648~2147483647.而 Integer 是 int 包 ...

  6. 五分钟搞懂MySQL索引下推

    大家好,我是老三,今天分享一个小知识点--索引下推. 如果你在面试中,听到MySQL5.6"."索引优化" 之类的词语,你就要立马get到,这个问的是"索引下推 ...

  7. Docker（40）- docker 实战三之安装 ES+Kibana

    背景 参考了狂神老师的 Docker 教程,非常棒! https://www.bilibili.com/video/BV1og4y1q7M4?p=16 es 前言 es 暴露的端口很多 es 十分耗内 ...

  8. 缓存一致性？get💡

    大家好,我是老三,今天又是被算法致郁的一天,写篇文章缓一缓. 这篇文章,我们来看看缓存一致性问题. 缓存一致性 我接下来会巴巴说一堆缓存一致性,但是-- 作为一名暴躁老哥,我先把结论撂这了! 缓存和数 ...

  9. Alibaba《Java开发手册》之Java代码规范笔记

    前言 一种工具被发明出来,那么针对这种工具的各种使用规则.条条框框就随之而来.无规矩不成方圆,无制度则无国家,无风格不成代码!治国有国法.排兵布阵有章法.那么写代码也有它界内通用的不成俗的约定.最近刚 ...

  10. 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转

    在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...