zhi宝库-知识的收集和分享纯 CSS 滚动进度条效果
8鑫神 发布于 2019-01-11
结论先行，如何使用 CSS 实现下述滚动条效果？ 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类...
阅读(68)评论(0)赞 (0)
标签：css
关于HTML5存储和CSS的一些技巧
8鑫神 发布于 2018-11-21
HTML5存储 cookies 大小限制4K 发送在http请求头中 子域名能读取主域名的cookies 本地存储 localStorage sessionStorage 大小限制5M（注意超出限制处理，超过时setItem会抛出异常） 可以存储数组、json、图片（canvas...
阅读(115)评论(0)赞 (0)
CSS 阴影技巧与细节
28鑫神 发布于 2018-11-09
关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。 最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖到...
阅读(181)评论(0)赞 (0)
CSS+JS实现流星雨动画
1鑫神 发布于 2018-11-01
1、效果图 完整效果，请移步 codepen-流星雨案例 2、源码 HTML <body> <div class="container"> <div id="mask"></div> <div id="sky"><...
阅读(123)评论(0)赞 (0)
SVG 实现复杂线条动画
13鑫神 发布于 2018-10-26
在上一篇文章中，我们初步实现了一些利用基本图形就能完成的线条动画： SVG 线条动画入门 当然，事物都是朝着熵增焓减的方向发展的，复杂线条也肯定比有序线条要多。 很多时候，我们无法人工去画出一些十分复杂动画的线条，这个时候，就要借助前端好帮手 PS 和 AI，而本文就是介绍如何导...
阅读(184)评论(0)赞 (0)
SVG 线条动画入门
8鑫神 发布于 2018-10-26
通常我们说的 Web 动画，包含了三大类。 CSS3 动画 javascript 动画（canvas） html 动画（SVG） 个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。 ...
阅读(153)评论(0)赞 (0)
conic-gradient 圆锥渐变
19鑫神 发布于 2018-10-26
conic-gradient 是个什么？说到 conic-gradient ，就不得不提的它的另外两个兄弟： linear-gradient : 线性渐变 radial-gradient : 径向渐变 说这两个应该还是有很多人了解并且使用过的。CSS3 新增的线性渐变及径向渐变给...
阅读(129)评论(0)赞 (0)
CSS shapes(CSS图形)
23鑫神 发布于 2018-10-26
CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能： clip-path shape-outside shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，...
阅读(112)评论(0)赞 (0)
纯 CSS 实现波浪效果！
13鑫神 发布于 2018-10-26
一直以来，使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。 当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实现的波浪...
阅读(98)评论(0)赞 (0)
CSS 动画技巧与细节
16鑫神 发布于 2018-10-26
正负旋转相消 嗯。名字起的很奇怪，好像数学概念一样。 （写完文章才发现这里应该叫正反旋转相消，图都截完了，大家心里清楚就好） 在动画中，旋转是非常常用的属性， ? 1 2 3 { transform: rotate(90deg); } 那旋转有一些什么高级点的技...
阅读(129)评论(0)赞 (0)
