CSS3 高级（字体图标-转换-动画）

最新推荐文章于 2026-03-28 02:18:39 发布
原创 最新推荐文章于 2026-03-28 02:18:39 发布 · 1k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#java #servlet #前端

目录

一、字体图标

        1、字体图标

        2、字体图标的优点：

        3、图标库：

二、平面转换

        1、位移

        2、位移绝对居中

        3、旋转

        4、转换圆点

        5、 缩放

三、渐变

        1、渐变背景

四、空间转换

        1、空间位移

        2、 透视

        3、空间旋转

         4、立体呈现

         5、空间缩放

五、动画

         1、实现步骤

         2、动画属性

一、字体图标

        1、字体图标

         字体图标 展示的是图标 ， 本质是字体。
         处理简单的、颜色单一的图片

        2、字体图标的优点：

  灵活性 ：灵活地修改样式，例如：尺寸、颜色等
  轻量级 ：体积小、渲染快、降低服务器请求次数
  兼容性 ：几乎兼容所有主流浏览器
  使用方便：
1. 下载字体包
2. 使用字体图标

        3、图标库：

二、平面转换

目标：使用 transform 属性实现元素的 位移 、 旋转 、 缩放 等效果
平面转换
         改变盒子在平面内的形态（位移、旋转、缩放）
         2D转换
平面转换属性
        transform

        1、位移

        2、位移绝对居中

        3、旋转

使用rotate实现元素旋转效果

        4、转换圆点

使用transform-origin属性改变转换原点

        5、 缩放

使用scale改变元素的尺寸

三、渐变

        1、渐变背景

使用background-image属性实现渐变背景效果

工作中 透明颜色：transparent  到半透明

        语法：

四、空间转换

        使用transform属性实现元素在空间内的位移、旋转、缩放等效果

        1、空间位移

         语法：

         取值（正负均可）

        像素单位数值
         百分比

        2、 透视

        使用 perspective属性实现透视效果

        3、空间旋转

 

 

         4、立体呈现

使用transform-style: preserve-3d呈现立体图形

         5、空间缩放

五、动画

使用animation添加动画效果
动画效果：实现 多个状态 间的变化过程，动画 过程可控 （重复播放、最终画面、是否暂停）

         1、实现步骤

         2、动画属性

 

例：

使用steps实现逐帧动画

 

 

能够使用animation属性给一个元素添加多个动画效果

 

 

icon-anim:图标切换或变形动画React Element
05-04
rc-icon-anim React IconAnim组件 浏览器支持 IE 9+ :check_mark: Chrome31.0+ :check_mark: Firefox 31.0+ :check_mark: Opera 30.0+ :check_mark: Safari 7.0以上 :check_mark: 发展 npm install npm start 例子 在线示例： http : //react-component.github.io/icon-anim/ 安装 用法 IconFontAnim import IconAnim from &#39;rc-icon-anim&#39; ; const IconFontAnim = IconAnim . IconFontAnim ; React . render ( < IconFontAnim xss=removed> , container ) ; 图标 import IconAnim from &#39;rc-ico
css3动态图标选项卡切换带动画效果
11-22
css3动态图标选项卡切换带动画效果
告别环境混乱：用Conda在AutoDL云服务器上高效管理多个PyTorch项目环境
最新发布
weixin_30919429的博客
03-28 693
本文详细介绍了如何在AutoDL云服务器上使用Conda高效管理多个PyTorch项目环境，避免环境冲突问题。通过SSH连接、镜像源优化、环境创建策略及开发工具集成等实用技巧，帮助开发者轻松隔离不同项目环境，提升AI开发效率。
css3小球环形转圈效果
一只程序媛
10-30 1981
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> body { margin: 0px; padding: 0px; } .warpbo...
CSS字体图标
weixin_45604020的博客
07-06 1689
展示的是图片，本质是字体。给网页添加颜色简单且单一的小图标。优点：可灵活修改图标大小和颜色，因为图标本质是字体，字体可以修改图标也可修改；体积小、渲染快，提升服务器请求速度；所有主流浏览器都可使用。精灵图颜色多样和结构复杂字体图标颜色单一结构简单。
CSS几种常见的文字动态效果
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-29 1万+
不啰嗦了,酷酷的字体，希望能够帮助到那个你！
三分钟带你掌握 CSS3 的新属性
热门推荐
官方推荐
06-29 3万+
1. css3简介 CSS 用于控制网页的样式和布局,CSS3 是最新的CSS标准,CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2,但是现在大部分浏览器也实现了css3的很多特性。 CSS3 被划分为模块。其中最重要的 CSS3 模块包括： 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 2. css3边框 2.1 边框圆角 Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。 Fir
前端H5新增标签和CSS3高级
weixin_44244332的博客
05-31 713
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
【整理+总结】pink老师前端三件套之CSS笔记（四）HTML和CSS补充知识
weixin_42771853的博客
12-20 3465
随着技术的发展进步，为适应不断增长的网页设计需求，HTML5和CSS3新增了一些特性。此文介绍CSS的一些高阶特性，以及HTML5和CSS3的新增特性
纯css字体流动动画
m0_74097396的博客
06-28 1782
最近做了个加载页面，其中有用到了这一个功能，本着好东西齐分享的原则，我撰写了这篇博客。补充：经过搜索，相关的内容已经显现冗余的态势，如果有快消需求的话，请转往高赞高浏览的博客，笔者的能力有限，还望谅解。
用css实现简单的文字动画
Anne_Aust的博客
05-09 1372
值为`normal`、`reverse`、`alternate`或`alternate-reverse`。值为速度函数名称，如`linear`、`ease-in`、`ease-out`等。值为整数、`infinite`或`none`。7. `animation-fill-mode`: 规定当动画不播放时（当动画完成之前，或者当动画已经结束时），要应用什么样的样式。值为时间，如`s`、`ms`等。值为时间，如`s`、`ms`等。1. `animation-name`: 规定动画的名称。
CSS - 字体图标
AlanDragonLee的博客
07-18 1019
字体图标的用法
CSS高级技巧：精灵图、字体图标、布局技巧
m0_73560798的博客
10-08 2847
字体图库的下载：推荐下载网站:●icomoon 宇库 http://icomoon.io（我下载的是这个）●阿里iconfont字库 http://www.iconfont.cn/
CSS进阶：字体图标的加载和使用（开发常用）
weixin_49555741的博客
03-24 1499
目录 1. 字体图标的产生 2. 字体图标的优点 3. 字体图标和精灵图的总结 4. 字体图标的下载 5. 字体图标的引入 6. 字体图标的追加 1. 字体图标的产生 字体图标的使用场景：主要用于在网页中通用、常用的一些小图标 字体图标iconfont可以解决精灵图的缺点问题，展示的是图标，本质属于字体 2. 字体图标的优点 轻量级：一个图标字体比图片小 灵活性：本质是文字，随意改变颜色、阴影、透明效果等 兼容性：几乎支持所有的浏览器使用 注意：字体图标不能代替精灵图技术，只是
CSS3字体和字体图标
HGYYR的博客
04-11 1380
css3的字体text-shadow和字体样式设置，以及字体图标的应用
css中如何使图标的旋转
zshsats博客
10-21 1万+
css中如何使图标的旋转 例如： 使用的是阿里的icon &lt;i class="iconfont icon-xiangshangjiantou icon-select"&gt;&lt;/i&gt; //icon-xiangshangjiantou 向上的箭头 实现其旋转向下： 使用css3的transform属性 旋转180度 如下，是无效的： .icon-select{ trans...
7种CSS3悬浮圆形过渡动画效果
ICode联盟
02-27 710
下载地址一款圆形覆盖的多种好看的效果，我们只需要准备正常的矩形图片，然后就可以在这款特效的样式下变成圆形图片。接着当我们鼠标移动到图片上时，就会呈现多种不同的效果了。注意，该特效是基于css3打造的，所以我们的浏览器必须支持css3才能看到效果。 dd: ...
`CSS`----图标`3D`环绕旋转，近大远小效果
weixin_46561899的博客
01-17 3177
`CSS`----图标`3D`环绕旋转，近大远小效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值