移动web(字体图标引入方式,位移,旋转,缩放,渐变色,倾斜)

最新推荐文章于 2024-06-03 15:20:11 发布

衔钰

最新推荐文章于 2024-06-03 15:20:11 发布

阅读量293

点赞数 1

分类专栏： css基础知识文章标签：前端 html 青少年编程 vscode

本文链接：https://blog.csdn.net/luzixi/article/details/125859437

版权

css基础知识专栏收录该内容

7 篇文章 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>
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<style>
    i::after{
        content: '\e63f';
    }
</style>
<body>
    <i class="iconfont"></i>
</body>
</html>

//或者如下方式
<i class="iconfont">&#xe63f;</i>

//或者如下方式
<style>
    .red{
        color: red;
    }
</style>
<body>
    <i class="iconfont icon-gouwuchekong red"></i>
    购物车
    <em class="iconfont icon-arrow-down "></em>
   
</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="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">
</head>
<body>
    <i class="iconfont icon-a-4-shenzhi"></i>
</body>
</html>

三. js引入方式:

不得不提js引入方式很复杂,但是可以引入带有两种以及以上颜色的字体图标.

我还不会,略过,后期补上

二.位移

transform:translate(x,y);

注意:移动的盒子

当x轴为0时,是可以省略的

x轴正向为右,y轴正向为下

再此提一下 margin和位移的区别:

/* margin移动盒子会影响下面的元素

transform:translate不会影响其他的元素

margin的100%是浏览器的距离

transform:translate(100%)是自己原来位置的大小 */

三.旋转

transform: rotate(1turn);

/* 旋转rotate角度 */

/* 360deg=1turn */

<style>
    .box{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: pink;
        transition: all 3s;
    }
    .box:hover{
        /* 旋转rotate角度 */
        /* 360deg=1turn */
        transform: rotate(9999turn);
    }
    .box img{
        width: 100%;
        height: 100%;
    }
</style>
<body>
    <div class="box">
        <img src="./images/p4-tx3.png" alt="">
    </div>
</body>

多重旋转

<!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>
</head>
<style>
    .box{
        width: 1200px;
        height: 303px;
        border: 1px solid #000;
    }
    .box img{
        transition: all 2s;
    }
    .box img:hover{
        /* 位移 旋转 */
        transform: translate(800px,0) rotate(360deg);
    }
</style>
<body>
    <div class="box">
        <img src="../images/tyre1.png">
    </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>
</head>
<style>
    .box{
        width: 400px;
        height: 400px;
        background-color: pink;
        margin: 200px auto;
        transition: all 1s;
        /* 改变旋转中心transform-origin水平方向 垂直方向 */
        transform: rotate(right bottom);
    }
    .box:hover{
        transform: rotate(8turn);
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>