【前端学习笔记】移动web-黑马程序员学习笔记

张张张张张高高

已于 2022-07-18 14:59:15 修改

阅读量2.6k

点赞数 4

文章标签：前端学习 web

于 2022-07-09 17:10:25 首次发布

本文链接：https://blog.csdn.net/qq_45699150/article/details/125290552

版权

移动web-黑马程序员学习笔记

1 字体图标

作用：使用字体图标技巧实现网页中简洁的图标效果
展示的是图标，本质上是字体，处理简单的颜色单一的图片。
每个网站的标题栏图标：网站网址+/favicon.ico
素材库： Iconfont：https://www.iconfont.cn/
使用字体图标 - 类名

引入字体图标样式表

    <link rel="stylesheet" href="./iconfont/iconfont.css">

调用图标对应的类名，必须调用2个类名

<body>
    <i class="iconfont icon-favorites-fill"></i>
</body>

如果想要的图标没有，可以问设计师要svg格式的图，上传后再下载即可。

2 平面转换

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

.father:hover .son {
   
    transform: translate(100px, 50px);

    /* 百分比: 盒子自身尺寸的百分比 */
    transform: translate(100%, 50%);

    /* 只给出一个值表示x轴移动距离 */
    transform: translate(100px);

    transform: translateY(100px);
}

2.1 绝对定位元素居中：

步骤：

设置父级和子级宽高，设置子绝父相；
设置子级位置left:50%;top:50%;，子级左上角在父级中心点。
微调位置,使子级中心点在父级中心：transform: translate(-50%, -50%);

.father {
   
    position: relative;
    width: 500px;
    height: 300px;
    border: 1px solid #000;
}
        
.son {
   
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 203px;
    height: 100px;
    background-color: pink;          
}

2.2 双开门效果

向左侧移动盒子自身宽度大小
向右侧移动盒子自身宽度大小

<head>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
 /*背景盒子设置，采用背景图*/      
        .box {
     
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('./images/bg.jpg');
            /* 关键细节1：超出父级的隐藏 */
            overflow: hidden;
        }
        
        .box::before,
        .box::after {
     
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            /*关键细节2：设置转换时间*/
            transition: all .5s;
        }

        .box::after {
     
            /*关键细节3：要背景的右半部分*/
            background-position: right 0;
        }

        /* 鼠标移入的时候的位置改变的效果 */
        .box:hover::before {
     
            transform: translate(-100%);
        }

        .box:hover::after {
     
            transform: translateX(100%);
        }

    </style>
</head>
<body>
    <div class="box">
    </div>
</body>

2.3 旋转效果

必须有过渡属性，旋转才能生效

img {
   
    width: 250px;
    /* 旋转效果必须设置过渡 */
    transition: all 2s;
} 
img:hover

最低0.47元/天解锁文章