CSS进阶学习第一天-字体图标及平移转换

最新推荐文章于 2023-05-22 19:49:17 发布

知识分子李云龙

最新推荐文章于 2023-05-22 19:49:17 发布

阅读量328

点赞数

分类专栏： CSS3 文章标签： css3 前端

本文链接：https://blog.csdn.net/A_Liyulong/article/details/124223927

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1，字体图标

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

1.1字体图标展示的是图标，本质还是字体

灵活性：灵活的修改样式

轻量级：体积小，渲染快，降低服务齐请距次数

兼容性：几乎兼容所有浏览器

使用方便：下载字体包；使用字体包。

1.2下载字体之后，使用字体图标

1.引入字体图标样式表

<link rel="stylesheet" href="../../课堂练习0317/iconfont/iconfont.css">

2.引入类名，定义css

<style>
  .icon-gouwuchexuanzhong {
            color: orange;
        }
</style>

......

<span class="iconfont icon-gouwuchexuanzhong"></span>
<span>购物车</span>
<span class="iconfont icon-arrow-down"></span>

2，平面转换

改变盒子的平面内的形态（位移，旋转，缩放）

注意：所有的动态变化在css中一定要给实现动态元素的标签添加过渡属性。（transition：对应属性值数字+s）

2.1平移

transform：translate（水平位移，垂直位移）

使用transform实现元素位移效果

<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(-100px, 50px);

            /* 百分比参考自身宽高计算结果 */
            transform: translate(-100%, 50%);
            transform: translate(-100%, 0);

            /* 技巧 */
            /* 水平方向 */
            transform: translate(50px);
            /* Y : 垂直方向 */
            transform: translateY(100px);
            /* X：水平方向 */
            transform: translateX(-50px);   //显示结果：由于css层叠性，最后鼠标移入，粉色子盒子向左移动50px
        }
    </style>
......
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

2.2旋转

1.transform：rotate（角度+deg）

正值角度是顺时针，复制是逆时针。

<style>
        img {
            width: 250px;
            transition: all 2s;
        }
        
        img:hover {
            transform: rotate(360deg);
            transform: rotate(-360deg);
        }
    </style>
......
<body>
    <img src="./images/rotate.png" alt="">
</body>

显示结果：鼠标移入，图片逆时针旋转360度。

2.transform-origin：（方向，上下）也可以是数字+px选点。

选择旋转点位置,转换谁的原点就加在什么标签上

<style>
img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            
            /* 转换原点位置，默认img的中心 */
            /* 不光能改变选中的原点，还能改变位移和缩放的原点 */
            /* 空间转换改变原点也是用这个属性 */
            transform-origin: right bottom;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>

2.3 缩放

trangform：scale（数字）

属性值：1不变；大于1放大；小于1缩小；等于0消失。

<style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            
            /* 转换原点位置，默认img的中心 */
            /* 不光能改变选中的原点，还能改变位移和缩放的原点 */
            /* 空间转换改变原点也是用这个属性 */
            transform-origin: right bottom;
        }
        
        img:hover {
            transform: rotate(360deg) scale(0);
        }
    </style>
......
<body>
    <img src="./images/rotate.png" alt="">
</body>

显示结果：图片旋转360度过程中不断缩小直至完成360度旋转，图片大小变为零。

2.4多重转换（transform可以是复合属性）

transform：translate（）rotate（）；（旋转会改变坐标轴向）

那个属性在前就可以引导后面的属性跟着前面的属性走（先位移带着旋转就是直线行驶，先旋转在位移就是放大螺旋）

 <style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        
        img {
            width: 200px;
            transition: all 8s;
        }
        
        .box:hover img {
            /* 边走边转 */
            transform: translateX(600px)  rotate(720deg) scale(0);

            /* 旋转会改变坐标的轴向 */
            /* transform: rotate(720deg) translate(600px); */

        }
    </style>
......

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

transform：缩放，定位会产生属性名层叠性，后面的覆盖前面的属性，需要在每个缩放前面写复合属性的定位。

3，渐变（background-image：linear-gradient（颜色1，颜色2，颜色3）

3.1多个颜色逐渐变化的视觉效果。

background-image：linear-gradient（transparent，rbga（0，0，0，0.5）

transparent 颜色透明

<style>
        .box {
            width: 300px;
            height: 200px;
            background-color: pink;
            /* background-image: linear-gradient(
                pink,
                green,
                orange
            ); */

            /* 透明 到 半透明的渐变 */
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,0.5)
            );
        }
    </style>
......
<body>
    <div class="box"></div>
</body>

4,案列

没有定位就没有层级

mask一般用于遮罩层。图片上加深文字部分显示颜色（一般用透明渐变）

知识分子李云龙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS进阶学习第一天-字体图标及平移转换

1，字体图标目标：使用字体图标技巧实现网页中的简洁图标的效果1.1字体图标展示的是图标，本质还是字体灵活性：灵活的修改样式轻量级：体积小，渲染快，降低服务齐请距次数兼容性：几乎兼容所有浏览器使用方便：下载字体包；使用字体包。1.2下载字体之后，使用字体图标1.引入字体图标样式表<link rel="stylesheet" href="../../课堂练习0317/iconfont/iconfont.css">2.引入类名，定义css<style> .ico
复制链接

扫一扫