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. 存储系统管理(二)——Linux系统的swap分区、磁盘加密、磁盘阵列

    磁盘驱动器上的空间 , 用作当前未使用部分内存的溢出.这样 , 系统就能在主内存中留出空间用于储存当前正在处理的数据 , 并在系统面临主内存空间不足的风险时提供应急溢出. swap分区的建立: fdi ...

  2. MySQL主主互备不同步的解决方法

    MySQL主主互备不同步 首先在服务器上执行show slave satus;可以看到很多同步的参数: Master_Log_File: SLAVE中的I/O线程当前正在读取的主服务器二进制日志文件的 ...

  3. Windows下Rancher复制Pod内文件到本地

    Rancher 未提供直接获取 Pod 内文件的工具(如果有请评论告知下,蟹蟹),但提供了 Rancher 的 CLI 客户端,通过 CLI 可以调用 k8s 的 CLI (kubectl) 命令来操 ...

  4. Django的form组件——ModelForm实战

    模型: from django.db import models class Book(models.Model): book_name = models.CharField(max_length=3 ...

  5. Django项目从创建到运行

    环境: Windows Server 2008 R2 标准版 1.安装python运行环境(省略) 2.安装Django pip install Django==3.1.5 # 不写版本号也可以 3. ...

  6. Linux常用命令 - less命令详解

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 查看文 ...

  7. openswan一条隧道多保护子网配置

    Author       : Email         : vip_13031075266@163.com Date          : 2021.01.22 Copyright : 未经同意不得 ...

  8. Linux内核学习之工作队列

    Author       : Toney Email         : vip_13031075266@163.com Date          : 2020.12.02 Copyright : ...

  9. vue+element+echarts饼状图+可折叠列表

    html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...

  10. 通过HttpURLConnection下载图片到本地--下载附件

    一.背景说明 现在我做的系统中,需要有一个下载附件的功能,其实就是下载图片到本地中.相应的图片保存在多媒体系统中,我们只能拿到它的资源地址(url),而不是真实的文件. 这里记录的是下载单个图片.下篇 ...