标签:css

前端

纯 CSS 滚动进度条效果

8

鑫神 发布于 2019-01-11

结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发的过程中遇到的一个类...

阅读(68)评论(0)赞 (0)

前端

关于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)