CSS变形与过渡效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53271010/article/details/126968118

变形

平移

transform: translateY(100px);

旋转 deg turn grad

transform: rotate(90deg);

transform: rotateX(90deg);

缩放

transform: scaleX(2);

transform: scale(.25);

倾斜

transform: skewX(60deg);

过渡 transition

过渡模仿iphone解锁

<!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, initial-scale=1.0">
    <title>模仿iphone解锁效果</title>
    <style>
         *{
        margin:0;
        padding: 0;
        list-style: none;
    }
    body{
        background-color: #000;
        overflow: hidden;
    }
    p{
        width: 500px;
        height: 100px;
        font-size: 80px;
        line-height: 100px;
        text-align: center;
        background-color: gray;
        margin: 100px;

        background-image: 
       -webkit-linear-gradient(135deg,transparent 10%,white 15%,transparent 20%);
       background-image: 
         linear-gradient(135deg,transparent 10%,white 15%,transparent 20%);
         /* 背景剪裁 */
        -webkit-background-clip: text;
        color: transparent;
        transition: 4s;

    }
    p:hover{
        background-position: 500px 0;

    }

    </style>
   
</head>
<body>
    <p>千山鸟飞绝</p>
</body>
</html>

过滤

模糊

filter: blur(10px);

亮度

filter：brightness(2)

对比度

filter: contrast(2);

阴影

filter: drop-shadow(5px 5px 5px tomato);

灰度

filter: grayscale(1);

色相转变

filter: hue-rotate(360deg);

反转

filter: invert(1);

透明度

filter: opacity(.25);

饱和度

filter: saturate(4.25);

褐色

filter: sepia(.5);

渐变

linear-gradlient、radial-gradlient

背景图：渐变（方向，颜色1百分比，颜色2百分比

谷歌：-webkit-

设置方向left=to right

left top

<!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, initial-scale=1.0">
    <title>gradlient</title>
    <style>
        /* linear-gradlient、radial-gradlient
        背景图：渐变（方向，颜色1百分比，颜色2百分比...)
         */
         div{
            width: 500px;
            height: 200px;
            background-color: tomato;
            margin-bottom: 100px;

         }
         div:nth-of-type(1){
           
            /* 谷歌：-webkit- */
            /* 设置方向left=to right
            left top */
            background-image: -webkit-linear-gradient(left,cyan 20%,gold 50%);
            /*  -moz- */
            /* background-image: -moz-linear-gradient(left,cyan,gold);
            background-image: linear-gradient(left,cyan,gold); */
         }
         div:nth-of-type(2){
            background-image: -webkit-radial-gradient(hotpink,red,gold,tomato);
         }
         .ch{
            background-image: -webkit-radial-gradient(
                center bottom,white 40%,purple,skyblue,cyan,green,gold,orange,red,white 60%

            );
            background-image: radial-gradient(
                center bottom,white 40%,purple,skyblue,cyan,green,gold,orange,red,white 60%
            );
         }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class="ch"></div>
    
</body>
</html>

box-shadow、text-shadow

阴影：横向偏移量纵向偏移量模糊距离阴影颜色