本次代码主要学习于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 标签下进行样式设置,这样既简洁又便于以后的维护。
效果图如下: