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. Mysql索引最佳实践笔记0524

    #mysql5.7 innodb默认存储引擎 一.关于索引二.最佳实践三.避坑实践 一.关于索引 1.索引的作用 -提高查询效率 -数据分组.排序 -避免回表查询 -优化聚集查询 -用于多表join关 ...

  2. Git使用教程六

    冲突的产生与解决 案例:模拟产生冲突. ①同事在下班之后修改了线上仓库的代码 注意:此时我本地仓库的内容与线上不一致的. 2.第二天上班的时候,我没有做git pull操作,而是直接修改了本地的对应文 ...

  3. 【曹工杂谈】详解Maven插件调试方法

    前言 今年的更新频率简直是降至冰点了,一方面平时加班相对多一些了,下班只想玩手机:另一方面,好像进了大厂后,学习动力也很低了,总之就,很懒散,博客的话,今年都才只更新了不到5篇. 现在慢慢有一点状态, ...

  4. 【数据库上】 第四讲 E-R模型基础知识

    第四讲 E-R模型基础知识 一.数据库设计过程 数据库设计的关键阶段? 各个阶段设计的主要任务? 基础条件:清楚一个应用系统的功能需求与数据需求(直接与用户交互.数据流程图示例/UML类图等) 核心阶 ...

  5. C# 给PPT中的图表添加趋势线

    本文内容分享通过C#程序代码给PPT文档中的图表添加数据趋势线的方法. 支持趋势线的图表类型包括二维面积图.条形图.柱形图.柱形图.股价图.xy (散点图) 和气泡图中:不能向三维.堆积.雷达图.饼图 ...

  6. 【Azure 应用服务】Python flask 应用部署在Aure App Service中作为一个子项目时，解决遇见的404 Not Found问题

    问题描述 在成功的部署Python flask应用到App Service (Windows)后,如果需要把当前项目(如:hiflask)作为一个子项目(子站点),把web.config文件从wwwr ...

  7. docker日常使用指南

    docker日常使用指南 目录 docker日常使用指南 前言 1.基础知识 1.1 docker是什么 1.2 与虚拟机(VM)的区别 1.3 镜像与容器 2.安装 2.1 在线安装 2.2 离线安 ...

  8. 将JAVA API接口 改写成 Python

    AsinSeedApi 不写注释的程序员-加密 将JAVA API接口 改写成 Python JAVA import com.alibaba.fastjson.JSON; import com.ali ...

  9. Redis——set,hash与列表

    一.List列表 基于Linked List实现 元素是字符串类型 列表头尾增删快,中间增删慢,增删元素是常态 元素可以重复出现 最多包含2^32-1元素 列表的索引 从左至右,从0开始 从右至左,从 ...

  10. 论文解读（BYOL）《Bootstrap Your Own Latent A New Approach to Self-Supervised Learning》

    论文标题:Bootstrap Your Own Latent A New Approach to Self-Supervised Learning 论文方向:图像领域 论文来源:NIPS2020 论文 ...