css
前端-DK
14年从事前端,多多指教
展开
-
CSS被设计为一种“宽容“的语言,却让更多人认为它不是编程
每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性:人们对CSS有一些强烈的情愫。— Dave Rupert (@davatron5000) [September 18, 2017]事实确实如此,CSS不同于传统的编程,且具有缺陷,同任何标准化编程语言相比,使用起来都更为困难。这是由于CSS被设计为一种描绘界面的方...原创 2019-04-28 21:57:54 · 184 阅读 · 0 评论 -
巧妙运用clip-path,实现CSS形状变换
CSS3的“clip-path”,这个“clip-path”看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,随着浏览器对于CSS3的支持度大幅提升,自然而然的就可以用它来做些与众不同的变化。运用clip-path超强的网站最先看到这个属性的应用,是从这个网站看到的:species-in-pieces.com...原创 2019-04-28 21:58:16 · 934 阅读 · 0 评论 -
超级简单CSS项目,悬停过渡动画三部曲
CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子,可能只是几行代码,但是添加到Web应用程序中,却会让它增色不少。如下是我们将在本教程中构建的代码项目设置在这个项目中,我们将把过渡效果应用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。HTML结构相当简单:<div class='box'> <p>...原创 2019-04-28 21:59:32 · 595 阅读 · 0 评论 -
纯CSS Material Design风格按钮
其实Material Design的扁平化icon按钮,这类型的按钮往往只利用几何色块的变化,就能抓住使用者的眼光,并且从几何形状中明白按钮的含意,这也是Material Design非常强调的设计理念和精髓。这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS...原创 2019-04-28 22:01:23 · 759 阅读 · 0 评论 -
强大的CSS3/JS:帧动画的多种实现方式与性能对比
Web动画形式首先我们来了解一下Web有哪些动画形式1\. CSS3动画 Transform(变形) Transition(过渡) Animation(动画)2\. JS动画(操作DOM、修改CSS属性值)3\. Canvas动画4\. SVG动画5\. 以Three.js为首的3D动画以上各种动画形式都可以制作出一种类型的动画,那就是帧动画,也叫序列帧动...原创 2019-04-30 21:51:17 · 921 阅读 · 0 评论 -
强大的CSS :实现仿 Windows10 鼠标照亮边框效果
安装最新 Windows 10 update 之后,注意到系统 UI 里有一个很棒的细节效果,在开始菜单的磁贴里或者 UWP 风格的设置界面中,元素的高亮边框是可以感知鼠标的,边框的高亮部分会跟随鼠标的移动而移动。顿时灵机一动,这个效果用 CSS 可否实现?分析拿桌面日历中的效果为例,鼠标移动时附近的边框也渐变性可见。这个效果不就是探照灯效果嘛!这个完全可以用 CSS 中的 mask 蒙版配...原创 2019-04-30 21:58:42 · 1694 阅读 · 2 评论 -
强大的CSS:模拟下雪效果动画制作教程
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。1.前言由于公司产品的活动,需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas(还有gif),对比下css3和canvas的优缺点:动画自由度:canvas胜;复杂度:canvas胜;兼容性:canvas胜;性能:css3胜(requestAn...原创 2019-04-30 21:57:54 · 978 阅读 · 1 评论 -
强大的CSS:颜色、背景和剪切
颜色CSS 中可以改变文字的颜色还有元素的背景颜色。可以用颜色关键字来定义颜色,如red,但是这些颜色关键字并不常用。transparenttransparent可以让文字或背景变的完全透明的颜色,它就像rgba(0,0,0,0)的缩写。currentColorcurrentColor代表原始的color属性的计算值。比如当前元素color为红色,背景色设置为currentColor,那...原创 2019-04-30 21:49:54 · 382 阅读 · 0 评论 -
CSS中cursor 鼠标指针光标样式
在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状。在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找。常用cursor光标url 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。default 默认光标(通常是一个箭头)auto 默认。浏览器设置的光标。crossh...原创 2019-07-10 13:18:40 · 488 阅读 · 0 评论