王者荣耀“开始游戏”特效按钮实现

      本次代码主要学习于B站大佬的视频，线下自己操作了一遍，并做一些备注。

       代码实现的功能是“开始游戏”按钮的特效操作，当鼠标放到“开始游戏”按钮的时候会有放大效果。具体的实现是通过伪元素实现的。

     这一段代码的编写是为了说明一些“关键词”和内容描述。为浏览器提供一些说明，当用户搜索相关网页的时候，浏览器可以为用户匹配出这个网页。

    其中需要注意的是：

   1、<meta>标签是一个单标签。

   2、charset是文字设置，utf-8是万国码，当你不写这一条代码，并且后面的代码中有中文，浏览网页查看效果的时候就会出现乱码。

     这一段代码是有关背景图片的设置。

    其中需要注意的是：

     1、body的高度是由里面的元素撑开的，当你没有写height:100%的时候，查看网页效果的时候会发现body这部分的大小只有里面元素大小。但是只设置了body标签的height是看不来什么效果的，因为body是html下一个级别，同理，我们要设置html的height。

     2、 浏览器会默认设置属性（不同的浏览器设置不同），所以我们都要把这些默认设置给清除掉。（margin:0px;）默认属性有很多，我觉得我们只需要把我们不要的属性清除掉，如果想要全部清除，可以用通配符*进行设置。

     3、 我用的是搜狗浏览器查看效果，其中遇到一个问题，我在body标签下写了 overflow:hidden;，查看网页的时候还是会有的多出的部分展示出来，所以我在html标签下也加了 overflow:hidden; 。

     4、在这段代码中还有一个知识点就是 center/cover

center:中心展示，不管你浏览器怎么缩放，都在浏览器窗口的中心区域展示。

cover:此时会保持图像的纵横比，并将图像缩放成将完全覆盖背景区域的最小尺寸。背景图像的一些部分可能不会显示在背景定位区域内。

    这一段代码就是为“开始游戏”这一个按钮做的盒子，具体大小，位置视情况而定。

     为了做出一个放大的效果，就需要两个盒子，但是在这里我们可以用伪元素进行操作。

    其中需要注意的是：

   1、  伪元素默认display是inline，inline是文本，是没有高度的，而我们这次设置的是需要做出一个盒子，所以我们将display设置成block。

  2、伪元素中一定要写 content:" ";**伪元素的作用，如果不写，前面关于伪元素的设置都是不起作用的。

    这一段代码就是放大效果这一动画的实现。

    其中需要注意的是：

1、hover选择器的作用是：当只有鼠标放到相关链接时，才会有相应的样式出现。（hover可用于所有元素，不仅是链接）

2、animation：是动画效果设置标签，其中，infinite是无限操作的意思。

3、@keyframes:通过他可以创建一个动画，从一个样式变到另一个样式。

4、scale：放大，opacity：透明度。

     这一段代码的实现创建一个盒子。关于盒子的设置最好在head 标签下进行样式设置，这样既简洁又便于以后的维护。

效果图如下：