简介
本文主要介绍如何用css定制一个简单的按钮
组成部分
- html按钮代码
- 无操作时按钮样式
- 鼠标经过时按钮样式
- 鼠标点击时按钮样式
CSS
CSS设计规则BEM快速入门手册
关于BEM
BEM是Block Element Modifier缩写, BEM通过以下3个维度来进行CSS设计及命名的.
- Block 代码里大括号
- Element 大括号里的元素
- Modifier 标记上述2个的状态
目标
- BEM中特别以MindBEMding命名规则为基础
- 使用SCSS
- 通过基本的简单类来设计
- SCSS与HTML完美分离
CSS动画效果入门
简介
只用CSS3实现动画效果。
基本代码
- 定义一个动画对象
<div id="box"></div>
- 定义基本样式
#box{
width:100px;
height:100px;
background-color:blue;
}
通过以上代码定义一个蓝色四边形。
用p5.js制作烟花特效
前言
之前看过一篇文章，使用processing制作烟花特效。效果如下
网上调查了一圈了，发现processing是一个互动编程软件，java语言发展而来。而且动画效果是跑在processing专门的模拟器上。
不过好在也有对应的web扩展语言，有processing.js和p5.js。
processing.js在github上已经好几年没有人维护了，一些processing的特性支持不了。为此踩了不少坑，
本文就集中讲解如何用p5.js写烟花特效。
用HTML和CSS制作现流行的UI Placeholder
前言
最近在使用facebook, instagram等主流应用经常看到的，即加载内容时的UI placeholer.(骨架设计)
可以给用户一种页面加载速度提升的错觉。如果如图所示。
