favinavi - Online notes-CSS-page2

纯css+svg实现，鼠标移上去心脏会有节律地跳动，适合用来做点赞按钮参考，或者学习css动画技巧。

by: fanshome  visibility 1825
2023-05-21 12:19 (UTC)

非常真实的抖动效果，鼠标移上去还有叮当声哦...

点“演示”按钮体验一下。

by: fanshome  visibility 2782
2023-05-25 08:52 (UTC)

Loading图标，又称“加载中”图标，以往是用gif格式动图来实现。但是gif有一个比较明显的问题，不易调整大小，然后图片一般比较粗糙，颗粒感严重。

现在流行纯css的loading效果，比如不断转圈式、不断跳动式，网上有很多。这里不多做介绍，搜索一下会有很多。

给大家介绍一款动态横条式彩虹loading效果，类似谷歌风格，又超越谷歌的单一颜色Loading Bar，既充分利用了容器顶部的“无用”空间，又不失醒目，用户体验比较好，干扰的感觉最小，同时又感觉酷炫、美观。点击本页红色的“演示”按钮看看吧。

css代码参考自：https://codepen.io/lister/pen/mdrrYJQ

这不是进度条，进度条一般是逐渐填满的形式，有另外的实现方式。

by: fanshome  visibility 2052
2023-05-20 08:35 (UTC)

使用css: linear-gradient来实现线性颜色渐变背景，效果见下图：
[img]

点击“演示”按钮可以查看效果。

by: fanshome  visibility 1739
2023-05-20 13:50 (UTC)

在很久很久以前，没有智能手机的时代，写网站只要考虑PC显示屏幕，基本上任何页面元素都只要固定的宽度和高度，比较好处理。

为了提高页面的加载速度，讲究点的方法是：
假如某个页面有多个小图片（比如二十个小图标）需要显示，可以把这二十个小图片合并到一张大图，然后通过背景图片切片的方法（background-position:）来显示不同的小图片，从而极大地提高页面加载速度。

当今时代，适配大大小小各类屏幕成了某种必需，最好能适配超过分辨率的pc大屏幕、普通笔记本电脑、pad、手机等等。虽然网速比从前提高了很多，但是，尽量减少网页图片使用数量依然是提高网页加载速度的必要手段。

有些时候，我们需要为同一类型、同样大小的链接配上不同的图片，此时，假如能够只使用一张图片来解决问题就更好了。例如，某些场合要用户选择不同的浏览器来进行下一步，假设用到以下这一张图片中的5种浏览器：

[img]

需求是：图片能自动适配不同屏幕宽度，使用背景图片方式来分割出5个链接，缩放窗口大小时，图片自动跟着缩放，同时宽高比不变，即保持图片不变形；与此同时，对应的5个链接也要随着背景图片的缩放而同比例缩放。

那么要怎么实现呢？请看以下CSS代码，任何用到宽度、高度的地方都使用百分比，保证缩放比例不变形。

by: fanshome  visibility 1907
2023-06-03 06:09 (UTC)

有时候会发现现成的图标很美观，但是和一般习惯不同（或者纯粹不符合个人喜好），比如“分享”图标，一般是一个箭头，但是箭头方向感觉和习惯的相反，这时就需要来个水平镜像。
与其化精力重新画图或寻找合适的图标都太麻烦，不如用css的transform来实现镜像。
正好favinavi的logo非常适合来说明镜像效果，请点击“演示”按钮查看效果。
favinavi.com的logo: [img]

by: fanshome  visibility 3446
2023-05-25 17:06 (UTC)

有时候页面需要在某个元素上设置一个醒目的标志，比如“审核中”、“热卖中”、“HOT”等等，此时本样式比较合适。
先上图看最终效果。
[img]

by: demo  visibility 1890
2023-05-20 13:49 (UTC)

同时实现水平和垂直方向双居中的方法网上有很多种，本人倾向于采用其中最简洁有效的方法来实现，具有比较好的通用性。
具体实现的css代码如下：

by: fanshome  visibility 1770
2023-06-24 16:41 (UTC)

纯CSS3，不使用图片。先看下最终实现的效果图：
[img]
这里以指向右侧的尖形小箭头为例，其它方向请自行修改。

by: fanshome  visibility 2039
2023-05-29 15:01 (UTC)