HTML5+CSS3

作者: Grandperhaps | 来源:发表于2020-09-23 22:26 被阅读0次

html5+css3实现日食动画过程
前端学习路线
HTML5+CSS3 loading 效果收集
电子商务网站开发与建设
学习网站
前端学习资料收集
html5+css3实现日食动画过程源码
html5学习路线(粗略)
前端学习路线
CSS使用——使用bootstrap3作出漂亮的网页 part1

HTML5部分

1. H5新增语义化标签

header --- 头部标签
nav --- 导航标签
article --- 内容标签
section --- 块级标签
aside --- 侧边栏标签
footer --- 尾部标签
yuyibq.png

注意

语义化标签主要针对搜索引擎
新标签可以使用一次或者多次
在 IE9 浏览器中，需要把语义化标签都转换为块级元素
语义化标签，在移动端支持比较友好

2. 多媒体音频标签

音频 -- audio
视频 -- video

audio

audio 目前支持三种格式

audio.png

audio 的参数

audiocanshu.png

代码演示

<body>
  <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>

video

支持的格式

vedio.png
video 参数

videocanshu.png
代码演示

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

注意

多媒体标签在不同浏览器下情况不同，存在兼容性问题
谷歌浏览器把音频和视频标签的自动播放都禁止了
谷歌浏览器中视频添加 muted 标签可以自己播放

3. 新增input标签

h5input.png
新增表单属性

newinput.png

CSS3部分

4. 属性选择器

attrcanshu.png

5. 结构伪类选择器

jiegouweilei.png
nth-child 详解

注意：本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字，就是选中第几个
常见的关键字有 even 偶数、odd 奇数
常见的公式如下(如果 n 是公式，则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略

nthchildcanshu.png

nth-child 和 nt-of-type 的区别

nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nt-of-type 选择指定类型的元素

6. 伪元素选择器

weiyuansu.png
注意事项

before 和 after 必须有 content 属性
before 在内容前面，after 在内容后面
before 和 after 创建的是一个元素，但是属于行内元素
创建出来的元素在 Dom 中查找不到，所以称为伪元素
伪元素和标签选择器一样，权重为 1

7. CSS2D转换

rotate(旋转)

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

给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{
      transform: rotate(0deg);
}

设置元素旋转中心点(transform-origin)

transform-origin: x y;

注意

注意后面的参数 x 和 y 用空格隔开
x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

2D转换之 scale

1.scale的作用

用来控制元素的放大与缩小

transform: scale(x, y)
注意

注意，x 与 y 之间使用逗号进行分隔
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
transform: scale(2, 2): 宽和高都放大了二倍
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
transform:scale(0.5, 0.5): 缩小
scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

2D转换综合写法以及顺序问题

要点

同时使用多个转换，其格式为 transform: translate() rotate() scale()
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
但我们同时有位置或者其他属性的时候，要将位移放到最前面

8. 动画(animation)

1.动画的基本使用

先定义动画
在调用定义好的动画

定义动画

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

语法格式

div {
    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间；
}

动画常见属性

animationcanshu.png
代码演示

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;
}

动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

要点

简写属性里面不包含 animation-paly-state
暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
要想动画走回来，而不是直接调回来：animation-direction: alternate
盒子动画结束后，停在结束位置：animation-fill-mode: forwards

速度曲线细节

animation-timing-function: 规定动画的速度曲线，默认是ease
steps.png

9. 3D转换

三维坐标系

x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值
y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值
z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值
3D转换知识要点
3D位移：translate3d(x, y, z)
3D 旋转：rotate3d(x, y, z)
透视：perspctive
3D呈现 transfrom-style

3D移动 translate3d

3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

透视 `perspective`

如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)
+透视的单位是像素

透视需要写在被视察元素的父盒子上面

3D旋转rotate

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴或者自定义轴进行旋转

语法

transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角

左手准则

左手的手拇指指向 x 轴的正方向
其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

rotate3d

transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度
x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
- transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
- transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg