什么是Css Sprite？

什么是Css Sprite？相信搞前端的大多数都听过Css Sprite这么一个神奇的名字，有些人知道它是做什么的，但是有些人不知道它为什么叫Css Sprite，今天我就带领大家来重新认识一下Css Sprite： (鼠标点击可以互动)1. 什么是Css SpriteCss Sprite乍一听可...

2022/11/3 8:49:00 阅读:86次

Css Sprite和雪碧之间有什么关系？

Css Sprite和雪碧之间有什么关系？大家看到Css Sprite这三个字一定会很好奇，它到底和雪碧之间有什么说不清道不明的联系呢？1. 这些图片看起来也不像雪碧啊？难道是这样：雪碧里面有很多的气泡，这些气泡均匀的分布在各处，而Css Sprite也是一些小图片均匀分布在各处，所以叫Css Sp...

2022/11/3 8:49:00 阅读:77次

为什么要使用Css Sprite？

为什么要使用Css Sprite？1. Css Sprite的起因图标原来是怎样的就让它怎样好啦？为什么要多此一举把它们集合到一张图里去呢？其实，这和网页的加载请求有关，一般来说一个网站里并不仅仅只有一两个小图标，假如某个网站的首页一共有十个小图标，那么加载这个网页的时候你的电脑就会发送十个请求。每...

2022/11/3 8:49:00 阅读:83次

Css Sprite过时了吗？

Css Sprite过时了吗？1. 当前形式目前网上有一些言论说Css Sprite已经过时了，理由一般主要为以下几个观点：在 HTTP2 的场景下Css Sprite便失去了意义；一些简单的图标直接用 CSS 或者 SVG 就可以搞定；图片不能灵活设置样式；一张图崩了整个网页的图标就都崩了；图标位...

2022/11/3 8:49:00 阅读:83次

JPG 格式图片

1. 前言本节简单介绍一下Css Sprite涉及到图片的格式以及图片的排列等，尤其是图片的排列将决定你的开发难易度，如果可以的话尽可能将图片制作成推荐的格式。2. 简介xxx.jpg 应该是目前最常见的一种图片格式了，它属于有损压缩格式。jpg 能够将图像压缩在很小的储存空间，一定程度上会造成图像...

2022/11/3 8:49:00 阅读:87次

PNG 格式图片

1. PNG 格式图片PNG 图片属于无损压缩格式，也就是说它会比 JPG 图片更大，而且相比于 JPG，它最大的优势在于可以保存图像的透明通道。换句话说就是图片可以拥有透明、半透明背景。这就极大的方便了广大开发者，我们把同样一张图用分别用 JPG 和 PNG 两种格式放在桌面上给大家展示一下两者间...

2022/11/3 8:49:00 阅读:111次

SVG 格式图片

1. SVGSVG 是一种可缩放的矢量图形，缩放就是缩小和放大，无论放大多少倍都不会失真，这就很适合用来做响应式和自适应网站的图标，因为在移动端的时候需要图形小一点，PC 端的时候稍微大一点。并且放大多倍的时候也不会出现明显的锯齿状。这是它明显优于 JPG 及 PNG 的地方。接下来我们将这个圆形放...

2022/11/3 8:49:00 阅读:86次

Css Sprite：矩形图

1. 矩形图这也是最常见的一种形式，顾名思义，整张大图是一个长方或正方形的：这种图片的好处就是一目了然，一打开便可以看到排列整齐的图标，然后找到你想要的图标来进行定位：但是这种矩形图在做动画的时候却不太方便，所以又引申出了另一种图形：条形图。2. 正方形图大家可能觉得矩形不就是长方形嘛，那正方形呢？...

2022/11/3 8:49:00 阅读:77次

Css Sprite：条形图

1. Css Sprite：条形图条形图严格的来说也是一种矩形图，只不过这个矩形非常长，故称为条形图。图标少的时候到还好，但是图标如果特别多的话，就不太适合放在一行里了，那么为什么还会有条形图这个概念呢？答案要从动画开始说起：众所周知，定义一个动画最简单的方式就是只定义开始时的状态和结束时的状态，中...

2022/11/3 8:49:00 阅读:86次

背景图片

1. 开场白本节将开始带领大家入门Css Sprite的用法啦，Css Sprite涉及到背景图片定位及尺寸等 CSS 技术，如果此方面基础扎实的同学可以跳过此章节。2. 背景图片那么到底应该如何控制Css Sprite只显示自己想要的那部分呢？答案就是用背景这个 CSS 属性。首先我们来用背景图属...

2022/11/3 8:49:00 阅读:89次

背景图定位

1. 背景图定位上一小节的代码运行过后看似好像没什么问题，那么我们来给它加上个边框试试：加上边框后发现它其实是有点歪了，偏左上角一点，这是因为background-image属性默认是定位在元素的左上角的。2. 来看一下定义背景图位置的语法怎么写：background-position: 你想要的位...

2022/11/3 8:49:00 阅读:85次

动态变更背景图位置

1. 模仿百度效果百度的网站是每当鼠标放在相机图标那个位置的时候，相机就会切换到蓝色：我们来模仿一下这个效果：890运行结果： 可以看到，只要改变一下背景图的位置，就可以切换到另一个不同的图标，只要位置控制得当，一张Css Sprite就可以显示出各式各样不同的图标，是不是很神奇呢？2. 更...

2022/11/3 8:49:00 阅读:85次

Css Sprite尺寸不吻合时怎么办？

1. 当有一个不吻合页面元素的尺寸时有时候图片并不都是这么完美的适合你所需要的场景，比如美工给了一套比较大的Css Sprite：实际上你并不需要这么大的图标，比如你需要图标的地方大概是55px * 50px：892运行结果：可以看出来此时由于图标远比盒子大，所以只显示出了一个角，正所谓小荷才露尖尖...

2022/11/3 8:49:00 阅读:129次

过渡动画和帧动画的区别

1. 开场白上一章我们已经了解了Css Sprite需要的基本CSS语法，那么这一章节我们将带领大家体验一下动画的语法，以及不同动画种类之间的区别。动画通常分为两种形式：一种是过渡动画、另一种是帧动画。2. 过渡动画之前我们曾经说过，Css Sprite在帧动画这一领域独领风骚，那么接下来我们就来分...

2022/11/3 8:49:00 阅读:91次

适合过渡动画的场景

1. 适合过渡动画的场景最典型的一个例子就是当鼠标移入时进行一些动画效果：899运行结果：  ?...

2022/11/3 8:49:00 阅读:79次

适合用帧动画的场景

1. 适合用帧动画的场景有时候想要的动画并不是缩小、放大或者变个颜色之类的这么简单，比如我们需要一个复杂的形变加上复杂的运动轨迹，此时过渡动画就有些相形见绌了。虽然 Canvas 或 SVG 能够实现复杂逻辑的动画效果，但是毕竟不是人人都会这种技术。而且有时候开发时间有限，没有时间用代码来绘制一个炫...

2022/11/3 8:49:00 阅读:114次

帧动画和过渡动画的优缺点

它们两个各自都有各自的优缺点，可以说谁也取代不了谁。1. 帧动画的优点适合复杂图形的变换，类似于电影院的播放模式；几乎可以表现任何内容，无论 3D 还是复杂轨迹急停等效果。2. 帧动画的缺点高度依赖效果图，如果没有一个好的素材，就没办法出现好的效果；难度不在程序员，在于美工那里，所以无论编程技术多好...

2022/11/3 8:49:00 阅读:138次

CSS 动画的定义

1. 开场白入门了动画以后，就来看看应该如何在网页中写出一个动画吧！万丈高楼平地起，学会了基础语法就可以充分发挥自己的想象力，做出各种千奇百怪的动画效果啦！2. 动画的定义如果学过一些编程语言的同学会知道，有一个词叫做变量，这个变量通常是需要事先定义好才能够去使用。CSS 动画也是同理，需要先定义，...

2022/11/3 8:49:00 阅读:90次

CSS 动画的调用

1. 调用动画定义好动画之后就需要在想要的位置去调用啦，先来学习一下动画调用的语法：animation: name duration timing-function delay iteration-count direction fill-mode;当然写的时候可绝对不是这么写的啊，只有冒号前面的a...

2022/11/3 8:49:00 阅读:129次

帧动画函数steps()的解析

看完上一章的小伙伴们一定会有许多疑问，我明明定义了7帧：红橙黄绿青蓝紫。为什么最后一帧紫色就是出不来呢？或者说必须做一些特殊处理才会出来呢？steps()和step-end分别代表什么含义呢？为什么一个带括号一个不带括号呢？接下来我们将一一为大家揭晓答案。1 steps()step的英文原意是迈步，...

2022/11/3 8:49:00 阅读:145次

动画实例项目结构

经过了前几章的学习，相信同学们大都已经掌握了动画的常见用法，那么本章我们将带领大家用一个实战项目来巩固之前所学的知识，先瞅一眼我们将会完成一个什么样的动画效果： 1. 项目结构首先我们新建一个文件夹，代表我们此次的项目，这个文件夹只要符合操作系统的叫什么名字都可以。在这里我们为这个项目起名为...

2022/11/3 8:49:00 阅读:105次

定义动画

1. 定义动画想要运行一个动画，就要先去定义一个动画 —— 鲁迅。那么我们就先来看看矩形图要怎么定义动画：/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100v...

2022/11/3 8:49:00 阅读:108次

调用动画

1. 调用动画定义好了就可以去调用了，来看一下怎么调用：/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align...

2022/11/3 8:49:00 阅读:71次

连接两个Css Sprite的动画

这节课我们把案例放在最前面，供大家直接观看效果。这么做的原因一方面是考虑到有些同学可能前面都没看完，直接就翻到最后一节看看写的是什么。另一方面是本节课案例较为复杂，防止大家看的晕了就不想继续往下看了，所以先把例子直接放在前面： 1. 定义条形Css Sprite动画/* 清除浏览器默认边距...

2022/11/3 8:49:00 阅读:126次