特效、动画、服务器字体、Less_less 字体渐变-CSDN博客

本文链接：https://blog.csdn.net/m0_62697897/article/details/126980483

1.特效

2.动画

3.服务器字体

4.Less

5.具体案例：去哪儿旅游网

1.特效

（1）阴影（shadow）

<1>盒模型阴影：box-shadow：横向偏移量纵向偏移量模糊距离阴影颜色

<2>文本阴影：text-shadow：横向偏移量纵向偏移量模糊距离阴影颜色

注意：模糊距离不能为负

代码：

<!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>静夜思</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html{
            font-size: 62.5%;
        }
        p{
            height: 100px;
            width: 500px;
            line-height: 100px;
            text-align: center;
            margin: 0 auto;
            font-size: 7rem;
        }
        p:nth-of-type(1){
            background-color: #d5d2c2;
            color: transparent;
            /* 文本描边 */
            -webkit-text-stroke: 1px black;
        }
        p:nth-of-type(2){
            background-color: #454545;
            color: #333;
            text-shadow: -1px -1px 0 #cecece,
                          1px  1px 0  #5c5c5c;
        }
        p:nth-of-type(3){
            background-color: black;
            color: white;
            text-shadow: -5px -5px 8px #cd12c8, /* 左上角 */
                          5px -5px 8px #cd12c8, /* 右上角 */
                          -5px 5px 8px #cd12c8, /*左下角 */
                          5px 5px 8px #cd12c8; /* 右下角 */
        }
        p:nth-of-type(4){
            background-color: #ccc;
            color: #fff;
            text-shadow: 0 1px 0 #eee,
                         0 2px 0 #bcbcbc,
                         0 3px 0 #aaa,
                         0 4px 0 #999,
                         0 5px 0 #787878,
                         0 6px 0 #666;
        }
        p:nth-of-type(5){
            background-color: #eee;
            color: rgba(255, 255, 255, 0);
            text-shadow: 0 0 10px hotpink;
        }
    </style>
</head>
<body>
    <p>静夜思</p>
    <p>床前明月光</p>
    <p>疑是地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>
</body>
</html>

运行结果：

（2）渐变（gradient）：background-image

<1>线性渐变：linear-gradient(方向，颜色，颜色····);

沿着某个方向进行颜色的变化，定义方向或者角度

<2>径向渐变：radial-gradient(方向，颜色，颜色····);

以某个点为中心点向四周进行颜色的辐射，定义辐射点的圆心（需要两个值）

代码：

<!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>gradient</title>
    <style>
        div{
            width: 500px;
            height: 200px;
            background-color: tomato;
            margin-bottom: 100px;
            /* linear-gradient():线性页面(默认渐变效果：从上到下) 
                   -webkit:识别标志  left(从左边来)=to right(到右边去) */
            /* background-image: -webkit-linear-gradient(left,cyan 20%,gold 50%,
                     tomato,hotpink,skyblue); */
            /* background-image: -moz-linear-gradient(left,cyan,gold);*/
            /* background-image: linear-gradient(left,cyan 20%,gold 50%,
                     tomato,hotpink,skyblue);  */
        }
        div:nth-of-type(1){
            background-image: -webkit-linear-gradient(left,cyan 20%,gold 50%,
                     tomato,hotpink,skyblue);
            background-image: linear-gradient(left,cyan 20%,gold 50%,
                     tomato,hotpink,skyblue); 
        }

        /* 静态页面 */
        div:nth-of-type(2){
            /* background-image: -webkit-radial-gradient(left top,hotpink,skyblue,gold,orange,tomato); */
            /* background-image: radial-gradient(left top,hotpink,skyblue,gold,orange,tomato); */
            width: 200px;
            /* 镜像界面的形状 */
            background-image: radial-gradient(red,yellow);
        }
        .ch{
            background-image: -webkit-radial-gradient(center bottom,white 40%,purple,deepskyblue,
                     cyan,greenyellow,gold,orange,tomato,white 60%);
            background-image: radial-gradient(center bottom,white 40%,purple,deepskyblue,
                     cyan,greenyellow,gold,orange,tomato,white 60%);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class="ch"></div>
</body>
</html>

运行结果：

（3）过渡（transition）

transition: 属性名过渡时间过度延迟时间过度速率

代码：

<!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>过渡transition</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: cyan;
            /* 过渡 1s为鼠标移入延迟1s */
            transition: .3s 1s;
        }
        div:hover{
            cursor: pointer;
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果：