前端学习之css media查询、自定义字体、过度动画、css变换、动画、渐变、多列、字体图标

2024-04-18 18:12:33

 media查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>media查询</title>
    <!-- 
        media查询：
            根据设备类型不同：比如说打印机、屏幕不同而产生不一样效果
            格式：
            @media
     -->
     <style>
        /* 屏幕显示的内容 */
        @media screen {
            .font-tye{
                font-size: 200px;
            }
        }
        /* 打印机显示的内容 */
        @media print{
            .font-tye{
                font-size: 300px;
            }
        }



        /* 不同设备显示相同样式，下列代码是屏幕和打印机显示相同样式 */
        /* @media print{
            .font-tye{
                font-size: 300px;
            }
        } */


        /* 所有设备显示的背景颜色 */
        /* @media all{
            .font-tye{
                background-color: aqua;
            }
        } */

        /* 
        >900显示蓝色
        >600 <900红色
        <600黄色
             */
        @media only screen and (min-width:900px){
            body{
                background-color: blue;
            }
        }
        @media only screen and (min-width:600px)
        and (max-width:900px){
            body{
                background-color: red;
            }
        } 
        @media only screen and (max-width:600px){
            body{
                background-color: rgb(206, 239, 22);
            }
        }
     </style>
</head>
<body>
    <p class="font-tye">测试文字</p>
</body>
</html>

结果

屏幕

打印机

 自定义字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义字体</title>
    <style>
        /* 自定义字体 */
        @font-face {
            /* 自定义字体名字 */
            font-family:myFontStyle ;
            /* 字体路径 */
            src: url(./汉仪霹雳体简.ttf);
        }
        .font-style-my{
            font-size: 120px;
            font-family: myFontStyle;
        }
    </style>
</head>
<body>
    <div>
        <p class="font-style-my">测试文字</p>
    </div>
</body>
</html>

 结果

过度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <!-- 
        过度提供样式变换的过程
        1、时间
     -->
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* 变换时间1s */
            transition: 1s;
            /* 操作属性,这个是宽变化1秒完成，高的变化还是瞬间 */
            transition-property: width;
            /* 时间曲线,变化时间的快慢ease-in变得慢ease变得快 */
            transition-timing-function: ease-in;
            /* 延时演示一秒后变化 */
            transition-delay: 1s;
        }
        div:hover{
            width: 200px;
            height: 200px;
            background-color: brown;
        }
    </style>
</head>

<body>

    <div class="box"></div>
</body> 
</html>

结果

变换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css变换</title>
    <!-- 
        css变换
            前提
                1.加过度
                2.触发
            变换效果
                平移
                旋转
                缩放
                倾斜

     -->
     <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px chartreuse solid;
            text-align: center;
            transition: 1s;
        }
        .b:hover{
            /* 平移,横向平移100px,竖向平移200px */
            transform: translate(100px,200px);
        }
        .c:hover{
            /* 旋转 */
            
            transform: rotate(360deg)
        }
        .d:hover{
            /* 平移,旋转 */
            transform: translate(500px,0px) rotate(360deg)
       
        }
        .e:hover{
            /* 缩放 */
            transform: scale(0.5)
        }
        .f:hover{
            /* 倾斜 */
            transform: skew(30deg,40deg);
        }






     </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
    <div class="f">f</div>
</body>
</html>

结果

 

 动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <!-- 
        一个样式到另外一个样式的过程
     -->
     <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* infinite 一直变且不用触发,可以加数字限定播放次数,下面例子就是播放三次 */
            /* alternate 播放的下一周期是逆周期还是正常周期*/
            animation: myFrame 2s infinite alternate;
        }
        /* 创建动画将背景颜色由蓝变紫色 */
        /* @keyframes myFrame{
            from{
                background-color: aqua;
                transform: translate(200px,200px) rotate(360deg);
            }
            to{
                background-color: blueviolet;
            }
        } */
        /* 通过%的动画变换 */
        @keyframes myFrame{
            0%{
                background-color: aqua;
            }
            25%{
                background-color: black;
            }
            50%{
                background-color: blue;
            }
            100%{
                background-color: brown;
            }
        }
     </style>
</head>
<body>
    <div></div>
</body>
</html>

 结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        .a{
            height: 100px;
            background-color: brown;
            /* 后一个会覆盖前一个 */
            /* 线性渐变,从上到下 */
            /* background-image: linear-gradient(red,yellow,blue); */
            /* 从左到右, */
            background-image: linear-gradient( to right,red,yellow,blue);
            /* 从右到左 */
            background-image: linear-gradient( to left,red,yellow,blue);
            /* 从上到下 */
            background-image: linear-gradient( to top,red,yellow,blue);
            /* 对角 */
            background-image: linear-gradient( to right bottom,red,yellow,blue);
            /* 带角度 */
            background-image: linear-gradient( 176deg,red,yellow,blue);
            
            
        }
        .b{
            /* 径向渐变 */
            height: 200px;
            background-image: radial-gradient(red,yellow,blue);
        }
    </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>

</body>
</html>

结果

（只呈现带角度和径向渐变结果） 

 多列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列</title>
    <style>
        div{
            column-count: 10;
            /* 间隔的宽度 */
            column-gap: 500px;
            /* 间隔的样式 */
            column-rule-style: dotted;
        }
    </style>
</head>
<body>
    <!-- 将文本按列拍好 -->
     <div>
        超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

        您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
        
        在本教程中，您将学习如何使用 HTML 来创建站点。
        
        HTML 很容易学习！相信您能很快学会它！
        超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
        
        您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
        
        在本教程中，您将学习如何使用 HTML 来创建站点。
        
        HTML 很容易学习！相信您能很快学会它！
        超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
        
        您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
        
        在本教程中，您将学习如何使用 HTML 来创建站点。
        
        HTML 很容易学习！相信您能很快学会它！
        超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
        
        您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
        
        在本教程中，您将学习如何使用 HTML 来创建站点。
        
        HTML 很容易学习！相信您能很快学会它！
     </div>
</body>
</html>

结果

 字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体图标</title>
</head>
<body>
    <a href="http://www.baidu.com"><img src="./滑冰.svg" alt="" width="20px" height="20px">百度一下你就知道</a>

</body>
</html>

结果

（图标的源文件需要下载）

不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

上一篇：vscode的一些技巧


下一篇：GPT国内怎么用