html5网页特效-水墨动画

效果

• 鼠标触碰按钮，出现水墨风格动画
• 屏幕自适应
• 一份html文件，一份css文件，无javascript，上手程度：很简单

笔记

:root

这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同。

box-sizing

属性允许您以特定的方式定义匹配某个区域的特定元素。

content-box：在宽度和高度之外绘制元素的内边距和边框。
border-box：在宽度和高度之内绘制元素的内边距和边框。
inherit：从父元素继承
颜色渐变linear-gradient
背景漂亮的深蓝-浅蓝效果就是这个的作用。具体请看developer.mozilla.org/zh-CN/docs/…

• calc()

此CSS函数让你在声明CSS属性值时执行一些计算。它可以用在如下场合：、, 、、、或。

flex:

这是一种可以自动适应不同屏幕尺寸的布局界面。下面的justify-content和align-items规定了应用flex布局的子元素的排列方式

justify-content:设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。通俗一点就是左右方向。
align-