欢迎各位萌新（and 隐藏的dalao）戳进这里啦，在前端入门我们首先从HTML和CSS开始，什么是HTML和CSS呢？
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。
层叠样式表（英语：Cascading Style Sheets，简写 CSS），一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。
基础教程请戳：
大家先在这里了解HTML和CSS的基础语法以及我们接下来要使用的一些基本标签如<a>、<div>、<span>等和CSS的选择器即可。
在编写代码之前，你需要有一个编辑器。我们推荐VS Code、Sublime Text、Atom。在编辑器里，你可以编写你的html和css代码。下载地址：VS Code、Sublime Text，atom
本教程中，我们教大家用HTML和CSS实现一个酷炫的button。
首先来看看我想实现的效果吧
finish.gif
那接下来我们就来学习如何一步一步实现这个效果吧。
首先写好HTML的基础部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ghost Button</title>
<!-- 我是注释：我们建议你将HTML和CSS分离，然后像这样将CSS文件在此处引入。-->
<link rel="stylesheet" href="./style.css">
<!-- 当然你也可以使用<style>标签把CSS代码放在这里。-->
</head>
<body>
<!-- 我们的Ghost Button就是写在这里啦 -->
</body>
</html>
接下来我们来写button：
<div>
MuxiStudio
<span> > </span>
</div>
这样就会出现“ MuxiStudio › ”这行字。使用<a>可以把这行字变成链接，这样你点击这个button就能跳转到我们的官网了。
<div>
<a href="http://muxistudio.com/">
MuxiStudio
<span> › </span>
</a>
</div>
接下来就是重头戏，我要用CSS魔法给button增加酷炫的效果。使用类选择器，我在CSS里面就可以给它们绑定样式。
先在HTML中绑定好类名（class的命名你可以随意）。
<div class="button">
<a href="http://muxistudio.com/">
MuxiStudio
<span class="shift"> › </span>
</a>
</div>
👇是CSS部分
用类选择器(基本语法是.加上class类名）给button设置边框、宽度、字体等属性，里面添加它的属性（基本语法是 属性名:值;）
.button {
position: relative;
border: 2px solid #2e2e2e; /* 边框属性，分别为边框粗细 实虚 颜色 */
padding: 20px 15px; /* 上下内边距 左右内边距 */
text-align: center; /* 内容水平居中 */
}
为了美观（酷炫），我又加了一些别的属性
.button {
position: relative;
border: 2px solid #2e2e2e;
text-align: center;
padding: 20px 15px;
text-transform: uppercase; /* 小写字母转换成大写 */
letter-spacing: 4px; /* 增加字符间距 */
cursor: pointer; /* 光标呈现为指示链接的指针（一只手） */
}
CSS里面可以多个class设置同样的样式，这里对<a>和<body>我用了元素选择器，给所有<a>和<body>设置了属性，所以这里同时使用了类选择器设置.button和元素选择器设置<a>，我们这样写：
body {
background: #000000;
}
.button a {
color: #969696; /* 内容颜色 */
font-family: 'Varela Round'; /* 字体 */
text-decoration: none; /* 否则会有难看的链接下划线 */
width: 200px; /* 宽度 */
height: 100px; /* 高度 */
}
接下来我要实现光标移到button的时候出现动画效果,使用伪类选择器:hover。
.button:hover {
border-color: #ffffff;
}
.button:hover a {
color: #ffffff;
}
.button:hover .shift {
padding-left: 10px;
}
光标移到上面的时候，边框和文字都会变成白色(#ffffff)，文字会出现有10px的内边距。
现在你得到了这个：
相信到这里你已经基本掌握书写HTML和CSS的正确语法，接下来实现漂亮的白光划过的动画。
其实这是一个白色的矩形，给这个矩形添加相关的动画，让他从button划过。
同样，先在HTML里面写上标签,类名我定为"mask"。
<div class="button">
<a href="muxistudio.com">
MuxiStudio
<span class="shift"> › </span>
</a>
<div class="mask"></div>
</div>
CSS里面设置mask的属性
.mask {
background: rgba(255,255,255,0.5); /* 透明色 */
position: absolute;
width: 200px;
height: 100px;
}
下面重点介绍一下CSS动画的两个属性transform和transition，在这个动画里面我们主要使用了transform 3D效果，关于基础的transform 2D知识可以戳这里。
transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)。
在这里我们用到的值有：
rotate3d(x,y,z,angle) 定义 3D 旋转。
scale3d(x,y,z) 定义 3D 缩放转换。
translate3d(x,y,z)定义 3D 转换。
CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。
transition 属性是一个简写属性，用于设置四个过渡属性：
-
transition-property指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。 -
transition-duration指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。 -
transition-timing-function指定一个函数，定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。 -
transition-delay指定延迟，即属性开始变化时与过渡开始发生时之间的时长。
语法是transition: <property> <duration> <timing-function> <delay>;，默认值：all 0 ease 0，请始终设置transition-duration属性，否则时长为 0，就不会产生过渡效果。
给.mask设置transform属性，
.mask {
transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
}
.mask从一个水平的矩形变倾斜、旋转。
在光标移过button的时候希望他发生动画，所以再设置一个hover时的位置变换。
.button:hover .mask {
background: #ffffff;
transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}
用transition属性设置过渡的效果。
.mask {
transition: all 1.1s ease;
}
顺便给刚才的button也加上过渡
.button .shift {
transition: all 1.1s ease;
}
.button {
transition: border 1s ease, color .6s ease, background 3s ease;
}
然后.mask超过button的部分设置为不可见，在.button添加overflow: hidden;属性。这样我们就得到一个漂亮的Ghost Button。
为了兼容更多的浏览器（比如Chrome、Safari），transform和transition属性要多加带有一行-webkit-前缀，例如
.button {
-webkit-transition: border 1s ease, color .6s ease, background 3s ease;
transition: border 1s ease, color .6s ease, background 3s ease;
}
最后我做了一点美化，让button放置在页面的中央，设置了button的最大宽度max-width: 270px;（防止拉伸浏览器的时候效果不够），并且将transition属性中的ease值换成了贝塞尔曲线cubic-bezier(0.19,1,.22,1)就得到了文章开头的效果。
我们希望你们能实现的效果是：将这个button放置在页面的正中央，并且设置页面的背景色为渐变效果。
test.gif
当然，期待屏幕前的你们能实现更好玩更好看的效果，对此教程有任何疑惑都可以向我们提问。
请将你的代码传到GitHub，GitHub地址放入报名表中。
使用Windows系统的同学需要下载git bash自行安装git
网友评论