移动Web【字体图标、平面转换[位移,旋转,转换原点,多重转换]、渐变】

最新推荐文章于 2024-08-08 16:10:15 发布
最新推荐文章于 2024-08-08 16:10:15 发布
阅读量680 收藏 5
点赞数 1
分类专栏： web前端 文章标签： 前端 平面 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52896752/article/details/128507686
版权

文章目录

一、字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果
在这里插入图片描述

1.1 图标库

  • Iconfont：https://www.iconfont.cn/在这里插入图片描述

1.2 下载字体包：

  • 登录 → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地在这里插入图片描述

1.3 使用字体图标：

  • Unicode编码在这里插入图片描述

  • 类名在这里插入图片描述

使用字体图标 - Unicode编码：

  • 引入样式表：iconfont.css

  • 复制粘贴图标对应的Unicode编码在这里插入图片描述

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

1.4 使用字体图标 – 类名：

  • 引入字体图标样式表在这里插入图片描述

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

    • iconfont类：基本样式，包含字体的使用等
    • icon-xxx：图标对应的类名在这里插入图片描述

1.5 案例：淘宝购物车

  • 布局标签

    • 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;
        }
                
        .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>

1.6 上传矢量图：

  • 思考：如果图标库没有项目所需的图标怎么办？

  • 答：IconFont网站上传矢量图生成字体图标

      1. 与设计师沟通，得到SVG矢量图
      1. IconFont网站上传图标，下载使用

  • 上传 → 上传SVG图标

  • 浏览本地图标 → 去除颜色提交

  • 加入购物车 → 下载使用在这里插入图片描述

二、平面转换

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

  • 平面转换
    • 改变盒子在平面内的形态（位移、旋转、缩放）
    • 2D转换
  • 平面转换属性
    • transform在这里插入图片描述

2.1 位移

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

2.1 位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果在这里插入图片描述

  • 核心代码在这里插入图片描述

  • 原理

    • 位移取值为百分比数值，参照盒子自身尺寸计算移动距离

2.3 案例

在这里插入图片描述

  • 右侧盒子背景图
    • background-position: right;在这里插入图片描述
<!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>

2.4 旋转

  • 语法
    • transform: rotate(角度);
      注意：角度单位是deg
  • 技巧：取值正负均可
    • 取值为正, 则顺时针旋转
    • 取值为负, 则逆时针旋转
    <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>

2.5 转换原点

  • 语法

    • 默认圆点是盒子中心点在这里插入图片描述

    • transform-origin: 原点水平位置 原点垂直位置;

  • 取值
    • 方位名词（left、top、right、bottom、center）
    • 像素单位数值
    • 百分比（参照盒子自身尺寸计算）
    <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>

2.6 多重转换

  • 多重转换技巧在这里插入图片描述
  • 多重转换原理
    • 旋转会改变网页元素的坐标轴向
    • 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
      多重转换在这里插入图片描述
    <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);
        }
    </style>
</head>

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

2.7 缩放

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

  • 思考: 改变元素的width或height属性能实现吗？
  • 语法
    • transform: scale(x轴缩放倍数, y轴缩放倍数);
  • 技巧
    • 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
    • transform: scale(缩放倍数);
    • scale值大于1表示放大, scale值小于1表示缩小
    <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>

2.8 案例

在这里插入图片描述

  • 播放按钮
    • 布局
      • ::after
    • 样式
      • 居中
    • 效果
      • 缩放
      • 透明度（opacity）
<!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;
        }

        .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 .5s;
        }

        /* lihover的时候,  谁变小pic::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>

三、渐变

3.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 {
            position: relative;
        }
        
        .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;
        }

        .box .mask {
            position: absolute;
            left: 0;
            top: 0;

            /* display: none; */
            opacity: 0;
            width: 300px;
            height: 212px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.6)
            );
            transition: all .5s;
        }

        .box:hover .mask {
            opacity: 1;
            /* display: block; */
        }
    </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>

3.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>
    <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></i>
                        </p>
                    </div>

                    <!-- 添加渐变背景 -->
                    <div class="mask"></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></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></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></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>
tuanliang
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动Web笔记框架—CSS高级功能—字体图标—平面转换（平移、绝对定位、旋转、缩放、渐变）—高级实例（渐变+平移+缩放）
小琳爱分享的博客
07-24 729
移动Web笔记框架—CSS高级功能—字体图标—平面转换（平移、绝对定位、旋转、缩放、渐变）—高级实例（渐变+平移+缩放）
移动web(字体图标引入方式,位移,旋转,缩放,渐变色,倾斜)
luzixi的博客
07-18 305
移动web(字体图标引入方式,位移,旋转,缩放,渐变色,倾斜)案例
在网页中怎样使文字旋转?
【孟子E章】
02-16 4514
怎样使文字旋转作者：http://lucky.myrice.comE-mail：amxh@21cn.com　　IE5.5的新功能：旋转文字，看一下你就明白了。用法如下：获取书写方式： object.style.writingMode 设置书写方式： object.style.writingMode = sFlowDir 其中 sFlowDir 是lr-tb或者tb-rl
移动web变形,旋转,缩放,渐变
大鹏的博客
01-24 836
* 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。/* 正确写法语法 各个属性值之间 使用空格隔开 */移动的时候可以写百分比，如果使用的百分比，移动的是盒子。如果需要移动，也需要旋转，则一定先写移动，后写旋转,/* 旋转会改变网页元素的坐标轴方向 *//* 1.1 设置大盒子基本样式 *//* 1.3 设置多重转换效果 *//* 1.2 设置过渡效果 *//* 以中心点往四周缩放 */如果是正度数，则是顺时针旋转。旋转可以让盒子旋转角度。/* 旋转中心点 */
html竖排文字旋转,网页中常见的文字排列方向（倒向、竖向和旋转）
weixin_39691748的博客
06-04 932
网页中常见的文字排列方向(倒向、竖向和旋转) - www.webdm.cn1.文字逆时针转90度人之初 性本善2.中文竖向排列，从右往左读：网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！3.文字倒写竖排var oNum = 0;function showText(){var strText = '文字还可以倒着竖向排？';var oDiv = document.all[...
【开发小技巧】019—如何使用HTML和CSS实现鼠标悬停时文本的旋转？
web前端开发
07-05 234
来源 | web前端端开发（ID：web_qdkf）鼠标悬停在文字上时，文字会出现旋转效果。这种效果实现的原理是，将每个文字或者单词的每个字母在任一轴（最好是Y轴）一起旋转。每个文字或者...
04-CSS3-渐变色、2D转换、3D转换
记录java学习日常~
05-21 1002
CSS渐变色（Gradient）是指在元素背景中使用两种或多种不同的颜色进行过渡，超过两个颜色可以形成更为细腻的渐变效果。常见的CSS渐变色有线性渐变和径向渐变。 线性渐变从一个颜色到另一个颜色沿着一条直线渐变，实现代码如下： 其中，direction参数指定了线性渐变的方向，可以是to top、to bottom、to right、to left、to top left等等值；color-stop表示颜色变化节点，可以设置百分比值或距离值。以下CSS代码定义了从左上到右下的渐变色背景： 径向
点击按钮，实现 渐变动画 旋转动画 缩放动画 平移动画
hnswzy的博客
06-18 271
android:text="渐变动画"
web实现环形旋转、圆形、弧形、querySelectorAll、querySelector、clientWidth、sin、cos、PI
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
03-06 613
web实现环形旋转、圆形、弧形、querySelectorAll、querySelector、clientWidth、sin、cos、PI
web前端基础——rotate实现旋转效果
NGUP_LEE的博客
03-08 3544
使用rotate实现元素旋转效果 语法：transform:rotate(j角度) 角度的单位是deg，角度可以正值可以负值，正值顺时针，负值逆时针 注意：测试旋转必须要有过渡的属性 样例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
CSS实现span里面的字体旋转
热门推荐
奋斗的蜗牛
08-08 3万+
CSS实现span里面的字体旋转：     主要是用到了CSS3 2D 转换方法 transform:rotate .icon-over { width:45px; height:45px; line-height:45px; text-align:center; border:1px solid #EF784B; color: #E
css 实现字体旋转
asd386322349的博客
09-18 986
1 用 css 实现字体的旋转 2 p { 3 width: 60px; 4 height: 60px; 5 line-height: 47px; 6 font-size: 20px; 7 font-weight: bold; 8 transform:...
web前端经典教程之酷炫旋转
yijiu1990的博客
01-03 1539
让大型互联网商城专题页出彩的经典动画之一，特别适合营造大气的氛围。 课程的设置总共分为基础篇、梦幻紫色篇、同心旋转篇、佛光普照篇、局部旋转篇，知识点比较成体系，不像空中楼阁一样，就拿这期旋转来说，从基础篇基本的原地旋转，讲到那种能改变旋转方向的旋转，从前两种单一元素的旋转讲到同心的多元素旋转，又从前三种圆满的圆形元素旋转讲到间隙元素的旋转，最后又从前面这些中心点明显的旋转，拓展到中心点不在本身的...
css3 字体旋转
cms专家
06-12 1万+
#mycon { font-weight: bold; font-size: 150px; transform: rotateX(10deg); -webkit-transform: rotateX(10deg); /* Safari and Chrome */ -webkit-transform: rotateY(120deg); /* Safari and Chrome */ }
好程序员web前端技术之CSS3过渡
weixin_34050005的博客
05-08 113
好程序员web前端技术之CSS3过渡，css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值transition-property：检索或设置对象中的参与过渡的属性transition-duration：检索或设置对象过渡的持续时间transition-delay：检索或设置...
ASP.NET Core Web API 使用Autofac框架
最新发布
鲤籽鲲的博客
08-08 661
ASP.NET Core Web API 使用Autofac框架
CSS进阶：字体图标与平面转换
1. **概念**：平面转换主要包括位移、旋转和缩放，通过`transform`属性实现。 2. **位移**：使用`transform: translate(x, y);`来改变元素位置，其中`x`和`y`可以是像素值、百分比或其他长度单位。例如，`translate...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值