CSS学习笔记
CSS基础知识和进阶技术
(专栏配图图源https://tw.123rf.com/profile_dxinerz?mediapopup=45612328)©Farrukh Maqbool
Vrainy
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS 正向过渡与反向过渡
前言在CSS中,可以使用transition来实现过渡效果。可以看到,这里实现的过渡效果,在变换和复原的过程中,过渡效果是相同的。但如果需要这两个过程的过渡效果不同时该怎么办。本文简单讨论一下正向过渡和反向过渡的设置。(变换时的过渡效果称为正向过渡,复原时的过渡效果称为反向过渡)正向过渡将transition属性设置在触发事件对应的伪类中,可只设置正向过渡。如下图所示,hover事件触发时,是有过渡效果的;而当复原时,没有过渡效果,是直接复原的。 正向过渡 **CSS代码**.原创 2020-06-06 12:41:06 · 2332 阅读 · 1 评论 -
CSS 精灵图的使用
前言在浏览网页时,我们可能会发现,大多数的带图标的超链接,并非是如我们所想——用<a>包裹<img>来实现的,而是给<a>设置背景图。在这张背景图中,不光有当前超链接对应的图片,还有其他超链接的图片,它们共同组成了这张大的的背景图。这样的背景图我们称之为精灵图。淘宝中带图标的超链接图标超链接对应的精灵图精灵图的使用使用精灵图的原因使用精灵图可以减少向服务器请求图片的次数以及相应产生的资源。每次请求图片资源,都会花费一定的请求时间,这和图片大小无关,减少原创 2020-05-24 22:44:19 · 494 阅读 · 0 评论 -
CSS 浮动元素对块级元素和行内元素的影响
我们可能听说过,float元素是脱离了文档流的元素,其他元素将无视它的存在。但当我们实际应用中,实际效果并不完全是这样的。原创 2020-04-23 22:03:10 · 4480 阅读 · 4 评论
分享