前端 HTML/CSS （十四）

刺骨的言语ヽ痛彻心扉 2023-01-03 04:21 81阅读 0赞

### 目录 ###

*   *   *  前端 HTML/CSS （十四）
         *   *  关于渐变
             *  从PSD设计稿中获得渐变值
             *  SMACSS规范
             *  过渡
             *   *  定义过渡属性
             *  定义过渡属性的持续时间
             *  调整过渡的方式
             *  延迟过渡
             *  简写格式
             *  反向过渡
         *  变形
         *   *  2d变形方法

### 前端 HTML/CSS （十四） ###

#### 关于渐变 ####

`background-image: linear-gradient(90deg,yellow 0%,yellow 50%,transparent 50%),linear-gradient(75deg,red 0%,red 50%,transparent 50%);`

通过如上代码，可以分析出来。

1.  background-image中可以使用多个渐变效果。
2.  如果使用多个渐变效果，先写的将会压住后写的。

#### 从PSD设计稿中获得渐变值 ####

1.  选择移动工具  
    ![在这里插入图片描述][20210107112737187.png]
2.  选中自动选择、改为图层。  
    ![在这里插入图片描述][20210107112748940.png]
3.  在定位到的图层上面复制CSS  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]

#### SMACSS规范 ####

核心就是分类：分为五大类：分为5个文件：

1.  基础，都是单一的选择器，其中可以包括属性选择器、伪类选择器、子选择器、兄弟选择器。包含默认的一些样式。
    
        html,body,form,ul{ 
            margin:0;
            padding:0;
        }
2.  布局(layout)
    
     *  主要组件：对页面的真正的顶级的划分。比如header、sidebar、content、footer
     *  次要组件：登录表单、导航项。就是在HTML结构中主要组件中放置的内容。
    
    通常是ID或类选择器。
    
    误选
3.  模块
    
    模块（次要组件）位于布局组件的内部。
    
    避免ID和元素选择器。尽量使用类。
4.  状态
    
    关于交互性的东西放在里面。比如是隐藏还是显示。
    
    命名各种状态的时候都会用`is`，用的最多的是类选择器。
    
    `is-error`
5.  主题
    
    覆盖基本样式，默认连接的颜色，默认的边框、默认的字体。

分开之后容易惯例。分离的目的：重复出现的内容模式化。

属性书写的规则：按照盒子模型、边界、背景、文本、其他的顺序来写的。

1.  盒子模型包括盒子的任何属性display、float、position、left、right、bottom、top、width、height。
2.  边界：border相关的属性 border-radius。
3.  背景：background
4.  文本：font-family、font-size、letter-spacing
5.  其他的：不属于上述的内容都放到最后。

#### 过渡 ####

过渡是元素从一种样式\_\_逐渐\_\_改变为另外一种样式的效果。

步骤：

1.  指定要添加效果的CSS属性。
2.  指定效果持续的时间。

> display: none; 和 display: block; 是不能够过渡的。

##### 定义过渡属性 #####

只有在该属性中定义的属性才能以过渡的形式持续一段时间而不是瞬间变化。

格式：`transition-property`

*  all，过渡所有属性。
    
    属性能使用数值一般都支持过渡，不能转换为数值的一般不支持过渡。
 *  其他值的列表，以逗号分隔的属性的列表。
    
    `transition-property: width,height;`

#### 定义过渡属性的持续时间 ####

`transition-duration`用来定义从一个状态到另外一个状态要过多少时间。

默认的时候是0s，可以写s和ms，但是只能是正数。

*  如果你在定义时间的时候只写一个值，所有的要过渡的属性都可以声明为一个值。
    
        transition-property: width,height;
        transition-duration: 1s;
 *  如果想让transition-property属性中的每个值都持续不同的时间那就给它列表。
    
        transition-property: width,height;
        transition-duration: 1s,2s;

#### 调整过渡的方式 ####

正常情况下，进行过渡的样式是慢速开始，然后加入然后再慢下来。可以使用transition-timing-function来修改。

*  `ease`，默认值，慢速开始，然后加速，再慢下来。
 *  `linear`，整个过渡保持匀速。
 *  `ease-in`，慢速开始，然后加速。
 *  `ease-out`，快速开始，然后减速。
 *  `cubic-bezier()`，指定三次方的贝塞尔曲线。
    
    `https://cubic-bezier.com/#.11,-0.54,.95,1.63`

#### 延迟过渡 ####

当你触发过渡的时候与开始过渡之间引入一定的时间延迟。

`transition-delay`，默认是 0s，和`transition-duration`的值相同。

#### 简写格式 ####

`transition: property duration timing-function delay`

> transition 简写中，property 和 duration 这两个是必写值。

如果有多个属性那么现在我们要使用：

`transition: property1 duration1 timing-function1 delay1,property2 duration2 timing-function2 delay2`

简写属性的默认值：

*  `transition-delay: 0s`
 *  `transition-duration: 0s`
 *  `transition-property: all`
 *  `transition-timing-function: ease`

现在如果使用`transition: width,height 1s;`写法，只有height将会生效前面的将会忽略。

> 1s = 1000ms
> 
> s: 秒
> 
> ms: 毫秒

#### 反向过渡 ####

如果只在`#f:hover`里面上声明过渡，那么只在鼠标移入时才会触发，移出的时候瞬间变为原来的状态。

如果将所有的过渡都应用在默认状态上，由 hover 触发。这个时候当鼠标离开后，各个属性通过相同的时序方式反向回到默认状态。

### 变形 ###

在CSS3之前元素是矩形的，并且只能按着横轴和纵轴放置。CSS3之后加入了变形。

> 变形的盒子是不会影响布局的。

2D变形：只关注横轴和纵轴。

变形属性：`transform`

value的值：

*  `none`，默认值，没有变形。
 *  `transform-fun` 指的是一个一个的变形方法。

#### 2d变形方法 ####

*  `translatex()`，沿元素自身的x轴移动元素。
    
     *  px，像素
     *  em自身的字体大小。
     *  %，相对\_\_自身\_\_的宽度来计算。
 *  `translatey()`，沿着元素自身的y轴移动元素。
    
    transform的值可以是一系列的方法（多个方法）
    
    多个变形方法时，变形的方法一个接着一个，中间以空格进行区分。
    
    使用多个变形方法时，要正确设置，确保全部有效。否则一个出错都出错。
 *  `translate(x,y)`，指的是上面的两种translatex和translateY的简写方式。
    
    如果省略一个值，那么y的值就为0了。
    
    **当你不知道自身的宽度和高度的时候使用transform来进行水平、垂直居中是比较合适、方便的。**

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> #f{ position:relative; width:500px; height:500px; border:1px solid green; } #z{ position:absolute; top:50%; left:50%; width:50%; height:50%; border:1px solid red; transform:translateX(-50%) translateY(-50%); } </style>
    </head>
    
    <body>
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
    
    </html>

*  `scaleX()`，在x轴上进行缩放
 *  `scaley()`，在y轴上缩放。
    
    scalex和scaley只能是无单位的正数（包括小数），值的意思就是多少倍。
    
    经过变形的元素可以比变形之前大也可以比之前小，不过元素在页面上所占的空间与变形之前保持不变。
 *  `scale(x,y)`，在x轴和y轴上同时进行缩放。
    
    如果只在scale上使用一个值时该值将会同时应用在x轴和y轴上。
 *  `skewx()`，元素在水平方向扭曲变形，如果值为正数，元素的左上角和右下角会被`拉扯`，如果要是值为负数，元素的右上角和左下角会被`拉扯`  
    ![在这里插入图片描述][20210107113006517.png]

*  `skewy()`，元素在垂直方向扭曲变形，如果值为正数，元素的左上角和右下角会被`拉扯`，如果要是值为负数，元素的右上角和左下角会被`拉扯`  
    ![在这里插入图片描述][20210107113013974.png]

*  `rotatez()`，`rotate()`，沿着z轴旋转指定的角度。
 *  移动原点
    
    默认的时候变形都以元素的绝对中心作为变形的原点（旋转），transform-origin可以更改原点位置。
    
    最常用、主要就是旋转。

[20210107112737187.png]: /images/20221119/b2ef7addb0cc47dab20c14cd71d28a2b.png
[20210107112748940.png]: /images/20221119/faff13bfa070408ab7c1adf7547305de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221119/63d45614418c4315ba4b9656298d8c21.png
[20210107113006517.png]: /images/20221119/4110a68b5ad64428bcb2384877e1f682.png
[20210107113013974.png]: /images/20221119/4f0d589c71c14d41b3811f43a02c6703.png