HTML5CSS3_day02

最新推荐文章于 2023-06-14 20:54:09 发布
最新推荐文章于 2023-06-14 20:54:09 发布
阅读量117 收藏
点赞数
分类专栏： HTML5CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45583708/article/details/101199114
版权

day02 - 移动web开发_H5C3

1.1. 2D转换（变换）transform

2d转换是改变标签在2维平面上的位置和形状的一种技术，先来学习2维坐标系

1.1.1. 2维坐标系

2维坐标系其实就是指布局的时候的坐标系 如图

[外链图片转存失败(img-8SjAAyvz-1569209729771)(media/1524965494414.png)]

1.1.2. 2d移动 translate

2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似 定位

使用2d移动的步骤：

  1. 给元素添加 转换属性 transform
  2. 属性值为 translate(x,y) 如 transform:translate(50px,50px);
  div{
    transform: translate(50px,50px);
  }

[外链图片转存失败(img-7I7L4Mxc-1569209729774)(media/1524965782388.png)]

1.1.2.1. 小结
  1. translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
  2. translate类似定位，不会影响到其他元素的位置
  3. 对行内标签没有效果

1.1.3. 2d旋转 rotate

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

使用步骤：

  1. 给元素添加转换属性 transform
  2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度
div{
      transform: rotate(0deg);
}

在浏览器中手动修改 rotate

[外链图片转存失败(img-hbVRy78R-1569209729775)(media/4.gif)]

观察过后，2d旋转有以下特点

  1. 角度为正时 顺时针 负时 为逆时针
  2. 默认旋转的中心点是元素的中心点

1.1.4. 转换中心 transform-origin 了解

该属性可以修改元素旋转的时候的中心点

  1. transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
  2. transform-origin:top left; 左上角 和 transform-origin：0 0;相同
  3. transform-origin:50px 50px; 距离左上角 50px 50px 的位置
  4. transform-origin：0; 只写一个值的时候 第二个值默认为 50%;

1.1.5. 2d缩放 scale

缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小

步骤：

  1. 给元素添加转换属性 transform
  2. 转换的属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform:scale(2,3)
div{
    transform:scale(2,3);
}

[外链图片转存失败(img-TLYXOMsz-1569209729776)(media/1524966701225.png)]

1.1.5.1. 小结
  1. transform:scale(1,1) 放大一倍 相对于没有放大
  2. transform:scale(2,2) 宽和高都放大了2倍
  3. transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
  4. transform:scale(0.5,0.5) 缩小
  5. transform:scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解

2.1. 动画 animation

初学者容易对 动画 和 过渡 傻傻分不清楚

过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px

动画 可以设置变化的次数 甚至是无数次

2.1.1. 步骤

  1. 在css中定义动画函数
  2. 给目标元素调用动画函数

[外链图片转存失败(img-G9Q1hiSk-1569209729781)(media/1524985595597.png)]

    /* 1 声明动画函数 */

    @keyframes ani_div {
      0%{
        width: 100px;
        background-color: red;
      }
      50%{
        width: 150px;
        background-color: green;
      }
      100%{
        width: 300px;
        height: 300px;
        background-color: yellow;
      }
    }

    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* 2 调用动画 */
      animation-name: ani_div;
      /* 持续时间 */
      animation-duration: 2s;
    }

2.1.2. 语法1

  1. 动画名

    设置要使用的动画名 animation-name:xxx;

  2. 持续时间

    设置动画播放的持续时间 animation-duration:3s

  3. 速度曲线

    和设置过渡的速度曲线一样 animation-timing-function:linear;

    • linear： 匀速
    • ease： 慢-快-慢 默认值
    • ease-in： 慢-快。
    • ease-out： 快-慢。
    • ease-in-out： 慢-快-慢。

  4. 延迟时间

    animation-delay: 0s;

  5. 循环次数

    设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环

  6. 循环方向

    animation-direction

    如在动画中定义了 0%：红色 100%：黑色 那么 当属性值为

    1. normal 默认值 红 -> 黑
    2. reverse 反向运行 黑 -> 红
    3. alternate 正-反-正… 红 -> 黑 -> 红…
    4. alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
    5. 以上与循环次数有关

  7. 动画等待或者结束的状态

    animation-fill-mode 设置动画在等待或者结束的时候的状态

    • forwards：动画结束后，元素样式停留在 100% 的样式
    • backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式
    • both： 同时设置了 forwards和backwards两个属性值

  8. 暂停和播放

    animation-play-state 控制 播放 还是 暂停

    running 播放 paused 暂停

2.1.3. 复合写法

animation: name duration timing-function delay iteration-count direction fill-mode;

2.1.4. 多个动画写法

用逗号分隔

animation:
name duration timing-function delay iteration-count direction fill-mode，
animation: name duration timing-function delay iteration-count direction fill-mode;

2.1.5. 动画结束事件animationend

元素在动画结束之后，会自动触发的事件 animationend

    var div = document.querySelector("div");
    div.addEventListener("animationend", function () {
      console.log("div的动画结束之后，触发");
    })

2.2.1 动画库animate.css

封装了常见的有意思的小动画 发疯似的建议看官网来学习使用

官网

中文

2.3.1. 使用步骤

  1. 引入css文件

    <head>
  <link rel="stylesheet" href="animate.min.css">
</head>

  2. 给元素添加对应的class

    <h1 class="animated infinite bounce">快来看看我</h1>

    简单解读：

    animated 必须添加的class

    infinite 无限播放

    bounce 弹跳动画的效果，可以查官网自己选择喜欢的

2.3.2. css3兼容处理

css3涉及到较多的新属性，某些低版本（如ie8以及以下）的浏览器对css3的支持程度不够，因此需要做以下处理

添加对应的浏览器的前缀 常见前缀如下

  • 谷歌 -webkit
  • 火狐 -moz
  • IE -ms

如对 border-radius 进行兼容性处理

      -webkit-border-radius: 30px 10px;
      -moz-border-radius: 30px 10px;
      -ms-border-radius: 30px 10px;
	  // border-radius 一定要放在最后
      border-radius: 30px 10px;

应的浏览器的前缀 常见前缀如下

  • 谷歌 -webkit
  • 火狐 -moz
  • IE -ms

如对 border-radius 进行兼容性处理

      -webkit-border-radius: 30px 10px;
      -moz-border-radius: 30px 10px;
      -ms-border-radius: 30px 10px;
	  // border-radius 一定要放在最后
      border-radius: 30px 10px;

如果发现添加前缀也解决不了兼容性问题，那么就不要使用该css3属性

碼德浮樂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3笔记-2D转换
weixin_49455047的博客
11-22 332
CSS3笔记-2D转换
day10-HTML5&CSS3提高.pdf
10-11
HTML5与CSS3是现代网页开发的基石，它们带来了许多增强功能和改进，使得网页设计更加丰富和动态。HTML5的新特性主要集中在增强网页的语义化、多媒体支持以及表单元素的扩展。 语义化标签是HTML5的一大亮点，它们...
css中的“ transform: translate(-50%, -50%)； “的意思
最新发布
qq_45207162的博客
06-14 5585
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
CSS 动画 过渡
jasonjkj的博客
09-18 602
CSS 3 高级 1.转换（3D ，2D） 转换的简介，转换即变形 1.转换属性 transform:none(默认值) /‘transform-function(转换函数)’    空格来分割多个转换函数（transform-function()） 2.转换原点（默认中心点） 属性:transform-origin: 取值:按照元素左上点为(0,0)  可以给px 或者百分比或者关
CSS3记录 -transform(-50%,-50%)为什么会跟定位一起使用,会有居中的作用!
ChangAnbaba的博客
07-23 988
这是一次记录，一年前就已经学到transform，也知道transform(-50%,-50%)跟定位一起使用的时候可以有居中的效果。至于为什么会居中，那时候就懒了，想丢给以后。今天自己琢磨了一会才发现我脑子没转过来！ 蓝色阴影还没有top：50%，left：50%。 为了更直观看出变化，又写多了一个div transform:translate(-50%,-50%) 意思：移动自己宽高的一半的距离，" - " 代表反方向。 不亲手试下，靠自己想还真有点懵，思维不如人，那就做记录！ ...
HTML5CSS3_day01.md
01-15
### HTML5与CSS3知识点详解 #### 一、HTML5概览 - **HTML5**是一种标记语言，代表HyperText Markup Language（超文本标记语言）的第5个主要版本，标志着该标准的一次重大更新。它引入了一系列新的特性和功能，以...
day05_html_js_css_
09-29
在"day05_html_js_css_"这个主题中，我们主要关注如何利用这些技术实现动态和富有吸引力的动画效果，并将这些效果应用于实际生活中的各种场景。 HTML（HyperText Markup Language）是网页的基础，它定义了网页的...
HTML678day_htmlCSS_前端基础_
10-01
从"HTML678day_htmlCSS_前端基础_"这个标题来看，我们可以推测这是一系列关于HTML和CSS的三天密集学习资料，特别针对前端开发的基础技能提升。 在前端开发中，HTML（HyperText Markup Language）是构建网页结构的...
animate.css在Vue中的使用
weixin_46435234的博客
08-04 1469
# Vue集成第三方动画库 animate.css官网链接：https://animate.style/ 安装： npm install animate.css --save 在项目种引入 import "animate.css" 使用animate.css 给transition标签添加上固定的name属性 按需求添加上 enter-active-class="官网上自己找动画值" =》进入动画的过程 leave-acitve-
animate.css一款简洁的css动画库
qq_33460264的博客
07-16 480
官网：https://animate.style/ 演示：https://www.dowebok.com/demo/2014/98/
animate.css官网
weixin_30668887的博客
04-27 1936
https://daneden.github.io/animate.css/ 转载于:https://www.cnblogs.com/answercard/p/6775036.html
css3 动画工具 Animate.css
web修理工
04-19 849
Animate.css官网:https://animate.style/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini
animate.css的使用
HEGH的博客
11-21 2094
animate.css的最新版本是3.5.2，引入animate.css很容易，有以下几种方法 1、从官网下载 https://raw.github.com/daneden/animate.css/master/animate.css 2、通过npm安装 $ npm install animate.css 　　3、使用在线cdn https://unpkg.com/animate.css@3.5....
安装使用Animate动画库【Animate.css下载安装教程】
qq_22841387的博客
06-04 2737
在官网中选择你所需要的的样式，这里我选择的是 点击右侧的复制按钮 一定记得加上不然会没有效果的！！
CSS动画库——animate.css的使用
weixin_30608131的博客
08-12 194
Animate.css是一款强大的CSS3动画库 官网地址：https://daneden.github.io/animate.css/ 使用方法如下所示： （1）下载animate.css 下载地址：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css 下载完成后，可以保存在项目需要引...
css3-- transform: translate(-50%,-50%);
yueliangyefan的博客
06-27 7594
代码： position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 ...
CSS transform: translate(-50%,-50%)导致的像素模糊问题解决办法
pacholy的博客
09-24 1541
最近写项目遇到一个问题，我写了一个弹窗，因为宽度高度是动态的，不是固定的，所以有时候里面的像素会模糊，导致展示出来的效果是糊的 原因：像素是基数的时候，用这个方法就会糊掉，偶数的时候不会 解决方案如下： <div class="tire"> <div class="tanchuang"> 弹窗内容区域 </div> </div> ...
HTML5与CSS3：前端开发的革新与标准演变
HTML5和CSS3是现代Web开发中的核心技术，它们分别代表了网页结构语言和样式表语言的最新进展。2010年7月20日，在WebRebuild.org/W3Cday的活动上，主题演讲者谢子斌（ZiBin）针对这两者进行了深入探讨。 首先，他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值