【css总结--持续更新中】

王猫粮

已于 2023-06-27 14:33:58 修改

阅读量547

点赞数

文章标签：数学建模 python 算法

于 2023-06-26 23:03:03 首次发布

本文链接：https://blog.csdn.net/m0_70684059/article/details/131405956

版权

线性渐变

background : linear - gradient (to left，red ,green )

1．支持多颜色渐变

2．支持方向， to left ,,,,, to bottom right ,,,,,

3．支持角度的写法90deg

径向渐变

径向渐变不同于线性渐变，线性渐变是从"一个方向"向"另一个方向"的颜色渐变，而径向渐变是从"一个点"向四周的颜色渐变语法：

background : radial - gradient ( center , shape , size , start - color ,..., last - color );

说明： center ：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape ：渐变的形状， ellipse 表示椭圆形， cicle 表示圆形。默认为 ellipse ，如果元素形状为正方形的元素，则 ellipse 和 circle 显示一样。 size ：渐变的大小，即渐变到哪里停止，它有四个值。 closest - side ：最近边；

farthest - side ：最远边； closest - corner ：最近角； farthest - corner ：最远角

重复渐变

div ( background : repeating - linear - gradient ( red , yellow 10%, green 20%);)

说明：10％的位置为 yellow ,20％的位置为 green ，然后按照这20％向下重复

transition

transition 取值： all 5s linear 3s

含义：css3的 transition 允许 css 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值

all =====＝单一属性： transition - property ：检索或设置对象中的参与过渡的属性

5s=====＝单一属性： transition - duration ：检索或设置对象过渡的持续时间

35=====＝单一属性： transition - delay ：检索或设置对象延迟过渡的时间

linear ===＝单一属性： transition - timing - function ：检索或设置对象中过渡的动画类型

简写：

ransition : all ／具体属性值运动时间 s / ms 延迟时间 s / ms 动画类型

动画类型：linear匀速、ease逐渐慢下来、ease-in加速、ease-out减速、ease-in-out先加速后减速

贝塞尔曲线cubic-bezier()

animation

animation 和 transition 的区别

相同点：

都是随着时间改变元素的属性值。

不同点：

transition 需要触发一个事件（ hover 事件或 click 事件等）才会随时间改变其 css 属性；

而 animation 在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素 css 的属性值，从而达到一种动画的效果，css3的 animation 就需要明确的动画属性值。

animation: cat1 10s linear 1s(延迟) infinite(无限次)

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 50px auto;  
        animation: cat1 10s linear infinite;
        /* animation: cat1 10s linear 1s(延迟) infinite(无限次); */
    }
    /* 第一种 */
    /* @keyframes cat{
        from{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        to{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    } */
    /* 第二种 */
    @keyframes cat1{
        0%{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        20%{width: 200px;
            height: 200px;
            background-color: yellow;

        }
        40%{width: 300px;
            height: 300px;
            background-color: green;

        }
        60%{width: 400px;
            height: 400px;
            background-color: blue;

        }
        80%{width: 500px;
            height: 500px;
            background-color: red;

        }
        100%{
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    }
</style>
<body>
    <div></div>
</body>

Animation动画库

https://animate.style [animation动画库网址]

https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css [引入animation动画库]

translate ()

将元素向指定的方向移动，类似于 position 中的 relative .

水平移动：向右移动 translate ( tx ,0）和向左移动 translate (- tx ,0);

垂直移动：向上移动 translate (0,- ty ）和向下移动 translate (0, ty );

对角移动：右下角移动 translate ( tx , ty )、右上角移动 translate ( tx ,- ty )、左上角移动 translate (- tx ,- ty ）和左下角移动 translate (- tx , ty )。

translateX ()：水平方向移动一个对象。对像只向 X 轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。

translateY ()：纵轴方向移动一个对象。对象只向 Y

轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。

transform : translate (-100px,0）实际上等于 transform : translateX (-100px); transform : translate (0,-100px）实际上等于 transform : translateY (-100px).

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 20px auto;
        transition: all 0.5s linear;
        
    }
    div:hover{
        transform: translateY(100px);
    }
</style>
<body>
    <div></div>
</body>

scale ()

让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。缩放 scale (）函数和 translate (）函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。例如，

scale (1,1）元素不会有任何变化，而 scale (2,2）让元素沿 X 轴和 Y 轴放大两倍。

scaleX ()：相当于 scale ( sx ,1)。表示元素只在 X 轴（水平方向）缩放元素，其默认值是1。

scaleY() ：相当于 scale (1.sy)。表示元素只在 Y 轴（纵横方向）缩放元素，其默认值是1。

<style>
    div{
        width: 200px;
        height: 200px;
        border: 5px solid pink;
        margin: 20px auto;
        overflow: hidden;   
    }
    img{
        transition: all 1s linear;
        width: 100%;
    }
    div:hover img{
        transform: scale(1.5);
    }
</style>
<body>
    <div>
        <img src="../image/big.png" alt="">
    </div>
</body>

rotate ()

旋转 rotate (）函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

rotateX (）方法，元素围绕其 X 轴以给定的度数进行旋转

rotateY (）方法，元素围绕其 Y 轴以给定的度数进行旋转

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 50px auto;  
        transition: all 2s linear;
    }
    div:hover{
        transform:rotate(45deg);
    }
</style>
<body>
    <div></div>
</body>

skew (）

函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾斜。

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度30°

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 50px auto;  
        transition: all 2s linear;
    }
    div:hover{
        transform:skewx(45deg);
    }
</style>
<body>
    <div></div>
</body>