HTML5、CSS3进阶——字体图标、平面转换

1.<link rel="stylesheet" href="字体图标类">

在对应的标签直接调用iconfont 图标名

2.iconfont上传矢量图生成字体图标

（1）与设计师沟通，得到svg矢量图

（2）打开iconfont登录上传（小云彩），加入购物车，下载的时候选择添加项目

3.平面转换

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

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

2D转换

（1）位移：

+x右-x左-y上+y下

transform：translate（水平移动距离，垂直移动距离）

只给一个值表示水平方向移动距离；单独设置某个方向的移动距离translateX/Y。

谁变谁设置：transiton：all 0.5s//移动的元素和移动速度

像素单位数值或百分比（参考盒子子级自身的尺寸）

在一定情况下用translate快速实现绝对定位的居中，能有效避免开发维护。使用left和right各加50%再使用margin-left和margin-top来移动的话加的是数字+px有局限性，transform：translate（-50%，-50%）能更高效。

（2）通过位移的方法实现双开门：

关键代码：

    <div class="box"></div>
//body里面放一个div标签* {margin: 0;padding: 0;}
//清除默认样式表        .box {width: 1366px;height: 600px;margin: 0 auto;background: url('./images/bg.jpg');overflow: hidden;}
//设置盒子的尺寸，背景图，overflow用来用来隐藏盒子溢出部分        .box::before,.box::after {float: left;content: '';width: 50%;height: 600px;background-image: url(./images/fm.jpg);transition: all 0.5s;}
//设置两个为元素标签设置尺寸和背景图，过渡的时间，谁变加给谁.box::after {background-position: right 0;}
//右边的伪标签显示一张图片的右半部分/* 鼠标移入的时候的位置改变的效果 */.box:hover::before {transform: translate(-100%);}
哪个变哪个就加hover.box:hover::after {transform: translateX(100%);}

注意事项：可以直接用三个div加浮动的方式来实现，用伪类标签更快，想让谁hover就E：hover之后再找子级谁要变化，一层一层找到子级，伪类元素的content ' ' 必须要加,before和after创建出来的都是行内标签使用定位、display、或浮动让其显示。

（3）旋转：

正顺负逆

围绕几何图形的中心旋转：

用rotate实现元素的旋转效果；transform：rotate（角度）单位是deg。旋转的时候必须加过渡transition：all ?s; 属性实现旋转的过程，不然浏览器显示不了动态旋转。

固定原点旋转：

使用transform-origin属性改变转换的原点，是一个复合属性：原点的水平位置原点的垂直位置

取值：方位名词：right bottom或者其他center

（4）多重转换：

transform：translate（） rotate（）；//边走边转，不能先旋转再位移

原因：在旋转的过程中坐标轴的方向会发生改变，这样就导致位移的方向发生了改变。

注意：多重转换的时候必须要复合写，不能分开写，css有层叠性，会将上面的transform给覆盖了。

（5）图片的缩放：

transform：scale（x轴缩放的倍数，y轴缩放的倍数），一般情况下transform：scale（缩放的倍数）

注：直接从中心点出发的缩放，基础班学的将width：150%没有将图片从中心点放大。

opacity：0~1；设置透明度

注：使用transform时必须时刻注意其复合属性，避免被层叠影响。

HTML5、CSS3进阶——字体图标、平面转换相关推荐

CSS3 iconfont字体图标的使用（很详细）
CSS3 iconfont(字体图标) 首先来看看什么是字体图标,在哪里使用? 比如天猫的商品分类栏: 还有小米商城的底部栏: 所以字体图标的使用的是比较多的,而且是很方便更改它的大小以及颜色的,还可 ...
CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标作者:大漠日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
web前端基础 html5+css3（十二.2D转换，动画，3D转换）
一.2D转换 1.2D转换之移动translate (1)transform:translate(x,y); transform:translate(100px,100px); (2)transfor ...
HTML5+CSS3小实例：菜单栏图标悬停效果
HTML5+CSS3实现菜单栏图标悬停效果,紫色的tabbar标签栏,默认显示图标,鼠标悬停图标上移,显示文字,过程伴随细微动画,字体图标用的是font-awesome. 效果: 源码: <!D ...
HTML5+CSS3小实例：闪亮的玻璃图标悬浮效果
HTML5+CSS3实现闪亮的玻璃图标悬浮效果,光与玻璃的碰撞,好有质感的玻璃图标. 先看效果: 源代码: <!DOCTYPE html> <html><head> ...
CSS——字体图标、平面转换、缩放
一.字体图标字体图标主要用于网页中通用.常用的一些小图标: 精灵图的缺点:1.图片文件大: 2.图片放大和缩小会有失真的问题: 3.一旦图片制作完成想要更换非常复杂. 字体图标iconfont,展示 ...
移动WEB学习 - 字体图标、平面转换、渐变
一.字体图标目标:使用字体图标技巧实现网页中简介的图标效果字体图标的优点: 灵活性:灵活的修改样式,例如:尺寸.颜色等轻量级:体积小,渲染快.降低服务器请求次数兼容性:几乎兼容所有主流浏览器 ...
【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)气泡图标泡泡网页效果~手把手教学~初学者进阶必会~超简单 ~
b站视频演示效果: [前端实例代码]Html5+css3创建登录和注册表单!实现新拟态新拟物风格(Neumorphism)气泡图标泡泡网页效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（精灵图，字体图标，技巧）
一.基础班学习路线三.CSS高级技巧 1.精灵图为什么需要精灵图sprites 精灵图使用(原理) 精灵图使用(代码) 精灵图案例-拼出自己名字 2.字体图标字体图标产生和优点字体图标下载字 ...

HTML5、CSS3进阶——字体图标、平面转换

HTML5、CSS3进阶——字体图标、平面转换相关推荐

最新文章

热门文章