Day01-css基础补充

纯纯不会写代码

已于 2022-09-29 20:28:04 修改

阅读量65

点赞数

分类专栏： web移动端文章标签： css 前端 html

于 2022-08-31 19:43:11 首次发布

本文链接：https://blog.csdn.net/weixin_45831040/article/details/126623712

版权

web移动端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Day01-css基础补充

一、字体图标
二、平面转换
三、渐变
- 1.1 目标：使用background-image属性实现渐变背景效果
四、综合案例

一、字体图标

1.1 目标：使用字体图标技巧实现网页中简洁的图标效果

在这里插入图片描述
字体图标
1.字体图标展示的是图标，本质是字体。
2.处理简单的、颜色单一的图片

字体图标的优点：
Ø 灵活性：灵活地修改样式，例如：尺寸、颜色等
Ø 轻量级：体积小、渲染快、降低服务器请求次数
Ø 兼容性：几乎兼容所有主流浏览器
使用方便：
1.下载字体包
2.使用字体图标

字体图标下载地址：图标库Iconfont

下载字体包步骤：
登录 → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

使用字体图标：
1.Unicode编码
在这里插入图片描述
2.类名

使用字体图标 - Unicode编码（课上未讲）：
1.引入样式表：iconfont.css
2.复制粘贴图标对应的Unicode编码

3.设置文字字体
在这里插入图片描述

<!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>Document</title>
    <link rel="stylesheet" href="./liuliu/iconfont.css">
    <style>
        span {
            font-family: 'iconfont';
        }
    </style>
</head>
<body>
    <span>&#xe79d;</span>
</body>
</html>

在这里插入图片描述
使用字体图标 – 类名：
1.引入字体图标样式表

2.调用图标对应的类名，必须调用2个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名

<!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>
    <!-- 1.引入样式表  2.调用类名 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .iconfont {
            font-size: 200px;
            color: red;
        }
    </style>
</head>
<body>
    <!-- iconfont 是固定 -->
    <span class="iconfont icon-favorites-fill"></span>
</body>
</html>

在这里插入图片描述

2.1 案例：淘宝购物车

布局标签
li > span * 3
字体图标
引入字体图标样式表
购物车和箭头span调用字体图标类名

<!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>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        .nav {
            width: 200px;
            margin: 50px auto;
            font-size: 12px;
        }

        /* .iconfont{} */

        .icon-cart-Empty-fill {
            color: orange;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-cart-Empty-fill"></span>
                    <span>购物车</span>
                    <span class="iconfont icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

在这里插入图片描述
思考：如果图标库没有项目所需的图标怎么办？
答：IconFont网站上传**矢量图（svg）**生成字体图标

3.1 上传矢量图

1.上传 → 上传SVG图标
2.浏览本地图标 → 去除颜色提交
3.加入购物车 → 下载使用
在这里插入图片描述

二、平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

1.1 目标：使用translate实现元素位移效果

语法
transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
像素单位数值
百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
技巧
1.translate()如果只给出一个值, 表示x轴方向移动距离
2.单独设置某个方向的移动距离：translateX() & translateY()
在这里插入图片描述

2.1 目标：使用translate快速实现绝对定位的元素居中效果

方法一：
在这里插入图片描述
方法二：位移取值为百分比数值，参照盒子自身尺寸计算移动距离

<!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>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            position: absolute;
            left: 50%;
            top: 50%;

            /* 改变盒子的位置 */
            /* margin-left: -100px;
            margin-top: -50px; */
            
            /* 位移: 百分比参考盒子自身尺寸计算结果 */
            transform: translate(-50%,-50%);

            width: 200px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述

3.1 案例-双开门

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('./images/bg.jpg');
            /* 超出父级范围的隐藏 */
            overflow: hidden;
        }
        
        /* 左右相同的样式 */
        /* 伪元素:行内显示模式 */
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 100%;
            background-image: url(./images/fm.jpg);
            transition: all 0.5s;
        }

        /* 单独控制after 的背景图位置 */
        .box::after {
            background-position: right 0;
        }

        /* 鼠标移入box,before向左移动; */
        .box:hover::before {
            transform: translate(-100%);
        }
        /* 鼠标移入box,after向右移动 */
        .box:hover::after {
            transform: translateX(100%);
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 手写两个div; 用css伪元素before after -->
    </div>
</body>

</html>

在这里插入图片描述

4.1 目标：使用rotate实现元素旋转效果

语法
transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

<!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>
        img {
            width: 250px;
            transition: all 2s;
        }
        
        img:hover {
            transform: rotate(360deg);
            /* transform: rotate(-180deg); */
        }

        
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

在这里插入图片描述

5.1 目标：使用transform-origin属性改变转换原点

语法
默认圆点是盒子中心点
transform-origin: 原点水平位置原点垂直位置;
取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）

<!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>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            /* 添加给标签本身,不要加到hover */
            transform-origin: right bottom;
            /* transform-origin: left bottom; */
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

在这里插入图片描述

6.1 目标：使用transform复合属性实现多形态转换

多重转换技巧：
在这里插入图片描述
多重转换原理
1.旋转会改变网页元素的坐标轴向
2.先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

<!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>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        
        img {
            width: 200px;
            transition: all 8s;
        }
        
        .box:hover img {
            transform: translate(600px) rotate(720deg);
            /* 不行: 旋转会改变坐标轴向,先旋转改变了坐标轴向,位移方向会受影响 -- 多重转换如果涉及到旋转往最后书写 */
            /* transform: rotate(720deg) translate(600px); */
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/tyre1.png" alt="">
    </div>
</body>

</html>

在这里插入图片描述

7.1 目标：使用scale改变元素的尺寸

语法
transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
1.一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
2.transform: scale(缩放倍数);
3.scale值大于1表示放大, scale值小于1表示缩小

<!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>
        .box {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink;
            
        }

        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
           transform: scale(1.2);
           transform: scale(0.8);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/product.jpeg" alt="">
    </div>
</body>

</html>

在这里插入图片描述

8.1 案例–和平精英缩放

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        img {
            width: 100%;
        }

        .box {
            width: 249px;
            height: 210px;
            margin: 50px auto;
            /* 超出父级的隐藏 */
            overflow: hidden;
        }
        
        .box p {
            color: #3b3b3b;
            padding: 10px 10px 0 10px;
        }

        .box .pic {
           position: relative;
        }
        /*
         1. 播放按钮盒子,压在img标签的上面(定位) 
         2. hover的时候缩放效果
            默认: 看不见;特别大的
            hover: 看得见;小的:58
         */

         .box .pic::after {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -29px;
            margin-top: -29px; */
            /* transform: translate(-50%,-50%); */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);
            transform: translate(-50%,-50%) scale(5);
            opacity: 0;

            /* 过渡 */
            transition: all 0.5s;
         }

         /* 鼠标移入li,让after有变化 */
         .box li:hover .pic::after {
            opacity: 1;
            transform: translate(-50%,-50%) scale(1);
         }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="./images/party.jpeg" alt="">
                    <!-- 伪元素添加播放按钮 -->
                </div>
                <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
            </li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

三、渐变

1.1 目标：使用background-image属性实现渐变背景效果

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
在这里插入图片描述
语法

<!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>
        .box {
            width: 300px;
            height: 200px;
            background-color: pink;
            background-image: linear-gradient(pink,green,blue);

            /* 半透明渐变: 透明transparent-rgba() */
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,0.6)
            );
        }

        
        
    </style>
</head>

<body>

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


</body>

</html>

在这里插入图片描述

<!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>
        .box {
            position: relative;
            width: 300px;
            height: 212px;
        }
        
        .box img {
            width: 300px;
        }
        
        .box .title {
            position: absolute;
            left: 15px;
            bottom: 20px;
            z-index: 2;
            width: 260px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }

        /*
            1. 准备盒子,定位压在图片的上面
            2. hover效果:显示渐变背景 
         */
        .box .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 212px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,0.8)
            );
            opacity: 0;
            transition: all .5s;
        }

        /* 鼠标移入box,mask发生变化 */
        .box:hover .mask {
            opacity: 1;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="./images/product.jpeg" alt="">
        <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
        <!-- 渐变背景的盒子 -->
        <!-- mask--遮罩层 -->
        <div class="mask"></div>
    </div>
</body>

</html>

在这里插入图片描述

四、综合案例

<!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>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/demo.css">
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/product.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>产品</h4>
                        <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
                        <p>
                            <span>了解更多</span>
                            <i class="iconfont icon-arrow-right"></i>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei1.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>行业洞察</h4>
                        <h5>迈向智能世界2030</h5>
                        <p>
                            <span>了解更多</span>
                            <i class="iconfont icon-arrow-right"></i>
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei2.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>《ICT新视界》刊首语</h4>
                        <h5>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h5>
                        <p>
                            <span>了解更多</span>
                            <i class="iconfont icon-arrow-right"></i>
                        </p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    vertical-align: middle;
}

.box {
    width: 1110px;
    height: 247px;
    margin: 20px auto;
    /* background-color: pink; */
}

.box li {
    position: relative;
    float: left;
    width: 350px;
    height: 247px;
    margin-right: 30px;
    overflow: hidden;
}

.box li:last-child {
    margin-right: 0;
}

.box .txt {
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 350px;
    height: auto;
    padding: 20px 30px;
    z-index: 1;
    color: #fff;
    transition: transform .5s;
    /* transition: all .5s; */
}

.box .txt h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 2em;
    color: #fff;
}

.box .txt h5 {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 1.5em;
    color: #fff;
}

.box .txt p {
    color: #fff;
    font-size: 14px;
}

.box .txt p .iconfont {
    color: #c7000b;
    vertical-align: middle;
    font-size: 20px;
    font-weight: 700;
}

/*
    1. 字体图标: 引入样式表; 调用类名
    2. 渐变背景: 书写盒子控制位置;hover显示
    3.图片的缩放
    4.文字的位移
 */

 /* 渐变背景 */
 .box li a::after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 350px;
    height: 247px;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,0.7)
    );
    opacity: 0;
    transition: all,.5s;
 }

 .box li:hover a::after {
    opacity: 1;
 }

 /* 图片缩放 */
 .box li .pic img {
    transition: all 0.5s;
 }

 .box li:hover .pic img {
    transform: scale(1.2);
 }

 /* 文字效果: hover的时候 向上移动 Y -50px */
 .box li:hover .txt {
    transform: translateY(-50px);
 }