# html-css-demo

**Repository Path**: upupupy/html-css-demo

## Basic Information

- **Project Name**: html-css-demo
- **Description**: 学习过程中遇到不错的demo记录
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-18
- **Last Updated**: 2021-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HTML, CSS

## README

## 01-全屏播放视频

### video标签

> ```html
> <video>
>     <source src="video.mp4" type="video/mp4">
> </video>
> ```

> controls:是否显示浏览器自带的播放控件
>
> autoplay:自否自动播放
>
> loop:是否循环播放
>
> muted:是否静音播放

## 03-transform属性

> transform属性向元素应用2D,3D转换。该属性允许我们对元素进行旋转、缩放、移动、或倾斜。

![image-20210619091559262](C:\Users\upupup\AppData\Roaming\Typora\typora-user-images\image-20210619091559262.png)

> translate(x,y)  移动
>
> translate3d(x,y,z)
>
> scale(x,y)  缩放
>
> scale3d(x,y,z)
>
> rotate(x,y)  旋转
>
> rotate3d(x,y,z)
>
> transform-origin:更改一个元素的变形基点

### 13-透明文本效果

```
mix-blend-mode
// 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
mix-blend-mode: normal;          //正常
mix-blend-mode: multiply;        //正片叠底
mix-blend-mode: screen;          //滤色
mix-blend-mode: overlay;         //叠加
mix-blend-mode: darken;          //变暗
mix-blend-mode: lighten;         //变亮
mix-blend-mode: color-dodge;     //颜色减淡
mix-blend-mode: color-burn;      //颜色加深
mix-blend-mode: hard-light;      //强光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //饱和度
mix-blend-mode: color;           //颜色
mix-blend-mode: luminosity;      //亮度
mix-blend-mode: initial;         //初始
mix-blend-mode: inherit;         //继承
mix-blend-mode: unset;           //复原
其中，multiply属性可以将图片的白色背景变成透明。
```

### 14-灰度悬停效果

```javascript
// css3 filter(滤镜)属性
// filter属性定义了元素（通常是<img>）的可视效果（例如：模糊与饱和度）
// filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

none 默认值没有效果
blur(px) 给图像设置高斯模糊
brightness(%) 给图片应用一种线性乘法，使得其看起来更亮或更暗。0%全黑 100%无变化。
contrast(%) 调整图像对比度
drop-shadow(h-shadow v-shadow blur spread color) 给图像设置阴影效果
grayscale(%) 将图像转换为灰度图像
hue-rotate(deg) 给图像应用色相旋转
invert(%) 反转输入图像
opacity(%) 转换图像的透明程度
saturate(%) 转换图像的饱和度
sepia(%) 将图像转换为深褐色
url() url函数接受衣蛾XML文件
initial 设置属性为默认值
inherit 从父元素继承该属性  
```