移动Web(1)字体图标,平面转换,旋转,转换原点

编程语言 2022-04-04 19:03:20 阅读次数: 0

字体图标

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

在这里插入图片描述
字体图标展示的是图标本质是字体，处理简单的，颜色单一的图片的
目标：使用字体图标技巧实现网页中简洁的图标效果
简介的图标效果
字体图标的优点：
Ø 灵活性：灵活地修改样式，例如：尺寸、颜色等
Ø 轻量级：体积小、渲染快、降低服务器请求次数
Ø 兼容性：几乎兼容所有主流浏览器
Ø 使用方便：

  1. 下载字体包
  2. 使用字体图标
    灵活性：灵活的修改样式，例如尺寸，颜色等等
    图标库
    l Iconfont：https://www.iconfont.cn/在这里插入图片描述
    Iconfont
    下载字体包：
    l 登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地
    在这里插入图片描述
    在这里插入图片描述
    使用字体图标 - Unicode编码：
    l 引入样式表：iconfont.css
    l 复制粘贴图标对应的Unicode编码
    l 设置文字字体
    引入样式表iconfont.css复制粘贴图标对应的Unicode编码，设置文字字体
    在这里插入图片描述
    link rel=“stylesheet” href="./iconfont.css"
    span class=“iconfont icon-xxx”
    案例：淘宝购物车
    l 布局标签
    Ø li > span * 3 l 字体图标
    Ø 引入字体图标样式表
    Ø 购物车和箭头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>
        /* .iconfont {
    
    
            font-size: 60px;
        } */

        i {
    
    
            font-size: 60px;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-favorites-fill"></i>
</body>
</html>

iconfont icon-favorites-fill

<!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;
        }
                
        .orange {
    
    
            color: #f40;
        }
    </style>
</head>

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

</html>

.nav{width:200px;margin:50px auto;font-size:12px;}
上传矢量图：
l 思考：如果图标库没有项目所需的图标怎么办？
l 答：IconFont网站上传矢量图生成字体图标
Ø 1. 与设计师沟通，得到SVG矢量图
Ø 2. IconFont网站上传图标，下载使用
上传矢量图：
l 上传 → 上传SVG图标
l 浏览本地图标 → 去除颜色提交
l 加入购物车 → 下载使用
在这里插入图片描述

平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果
l 平面转换
Ø 改变盒子在平面内的形态（位移、旋转、缩放）
Ø 2D转换
l 平面转换属性
Ø transform
改变盒子再平面内的形态，位移，旋转，缩放
2D旋转
在这里插入图片描述
l 语法
Ø transform: translate(水平移动距离, 垂直移动距离);
l 取值（正负均可）
Ø 像素单位数值
Ø 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
l 技巧
Ø translate()如果只给出一个值, 表示x轴方向移动距离
Ø 单独设置某个方向的移动距离：translateX() & translateY()

transform:translate(水平，垂直）
像素单位数值，百分比参照物为盒子自身尺寸
translateX(),translate(Y);
在这里插入图片描述
在这里插入图片描述
position:absolute;
letf:50%;
top:50%;
transform:translate(-50%,-50%）；
位移取值为百分比数值，参照盒子自身尺寸计算移动距离

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

在这里插入图片描述
l 右侧盒子背景图
Ø background-position: right;
l 右侧盒子背景图
Ø left：向左侧移动自身宽度
Ø right：向右侧移动自身宽度
在这里插入图片描述

旋转

目标：使用rotate实现元素旋转效果
transform:rotate(角度）
rotate(角度)deg
语法
Ø transform: rotate(角度);
注意：角度单位是deg
l 技巧：取值正负均可
Ø 取值为正, 则顺时针旋转
Ø 取值为负, 则逆时针旋转

转换原点

目标：使用transform-origin属性改变转换原点
transform-origin
改变转换远点
l 语法
Ø 默认圆点是盒子中心点
Ø transform-origin: 原点水平位置 原点垂直位置;
transform-origin远点水平位置，原点垂直位置
l 取值
Ø 方位名词（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>
        .father {
    
    
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
    
    
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
    
        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
    
    
            /* transform: translate(100px, 50px); */

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

            /* transform: translate(-100%, 50%); */

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

            transform: translateY(100px);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></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>
    <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: 203px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></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>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: 600px;
            background-image: url(./images/fm.jpg);
            transition: all .5s;
        }

        .box::after {
    
    
            background-position: right 0;
        }

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

        .box:hover::after {
    
    
            transform: translateX(100%);
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

.

多重转换

目标：使用transform复合属性实现多形态转换
在这里插入图片描述
l 多重转换原理
Ø 旋转会改变网页元素的坐标轴向
Ø 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
旋转会改变网页元素的坐标轴向，先写旋转，则后面的转换效果以旋转后的轴向为准，在这里插入图片描述

<!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(-360deg); */
        }

        
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</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>
        img {
    
    
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
            transform-origin: left bottom;
        }
        
        img:hover {
    
    
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

缩放

目标：使用scale改变元素的尺寸
l 思考: 改变元素的width或height属性能实现吗？
l 语法
Ø transform: scale(x轴缩放倍数, y轴缩放倍数);
l 技巧
Ø 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
Ø transform: scale(缩放倍数);
Ø scale值大于1表示放大, scale值小于1表示缩小
l 播放按钮
Ø 布局
Ø ::after
Ø 样式
Ø 居中 Ø 效果
Ø 缩放
Ø 透明度（opacity）
布局::after,样式居中，效果：缩放，透明度opacity

渐变背景

目标：使用background-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果
l 一般用于设置盒子的背景
渐变是多个颜色逐渐变化的视觉效果，渐变是多个颜色逐渐变化的视觉效果
background-image:linear-gradient :linear-gradientlinear-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>多重转换</title>
    <style>
        .box {
    
    
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        
        img {
    
    
            width: 200px;
            transition: all 8s;
        }
        
        .box:hover img {
    
    
            /* 边走边转 */
            transform: translate(600px) rotate(360deg);

            /* 旋转可以改变坐标轴向 */
            /* transform: rotate(360deg) translate(600px); */
            
            /* 层叠性 */
            /* transform: translate(600px);
            transform: rotate(360deg); */
        }
    </style>
</head>

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

</html>

。box:hover imgtransform:translate(600px) rotate(360deg);

<!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 {
    
    
            /* width: 150%; */

            transform: scale(1.2);
            transform: scale(0.8);
        }
    </style>
</head>

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

</html>

margin:100px auto;
background-color:pink;
.box img{width:100%;transition:all 0.5s;}
.box:hover img{transform:scale(.12);
transorem:scale(0.8);

猜你喜欢

转载自blog.csdn.net/weixin_43428283/article/details/123603345
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022