分类 CSS 中的文章

利用CSS3 font-feature-settings特性减除字体动画震颤

在做GithubProfile项目的时候,使用了数字动画展示的效果,如My GithubProfile页面中的 commits,stars 以及 followers 数字。实际使用中,由于数字字体不等宽,造成在数字增长动画时很明显的震颤,体验非常不好。 这里我最终使用了 CSS 的font-feature-settings的属性来解决了这……

阅读全文

[前端回顾] - CSS盒模型

当浏览器渲染 HTML 文档时,它将每一个元素依据 CSS 盒模型呈现为一个方形的盒子,每个盒子由 4 个区域组成,分别是content, padding, border以及margin。 content区,包含了真实的元素内容,如文本、图像等等。 padding和margin则分别为内外边距区,border为边界,夹在p……

阅读全文

一份纯CSS实现的loading动画

预览 代码 使用了 CSS 的 keyframes 自定义关键帧动画 <!DOCTYPE html> <html lang="en"> <head> <title>Loading</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div#preload { margin: auto; position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 9999999 } div#preload>img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%) } div#preload .cssload-loader { position: absolute; left: 0; right: 0; margin: auto; width: 62px; height: 62px; top: 50%; margin-top: -31px; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; perspective: 780px } div#preload .cssload-inner { position: absolute; width: 100%; height: 100%; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% } div#preload .cssload-inner.cssload-one { left: 0; top: 0; animation: cssload-rotate-one 1.15s linear infinite; -o-animation:……

阅读全文