Web爱心代码（web心形代码）

本篇文章给大家谈谈Web爱心代码，以及web心形代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vs2015如何运行html爱心代码啊
• 2、爱心代码制作好后怎么弄成链接呢
• 3、html5网页底部会跳动的小爱心，有大神有源码吗？

vs2015如何运行html爱心代码啊

vs2015运行html爱心代码方法。

1、建立相应文件夹，打开VS软件，新建空白html5模板。

2、开始写爱心的代码（html5+css）。

3、制作图形需要用到四个基础图形（也就是四个块），一个大的正方形（为主块），在大的正方形里面建立三个小正方形（前两个正方形需要将其修改为圆形）。

4、写让爱心动起来的JavaScript代码。

5、在浏览器上执行代码，就可以得到一颗会跳动的爱心。

爱心代码制作好后怎么弄成链接呢

将爱心代码代入文档里就可以弄成链接了。

1、拿到有html代码的文档。

2、本地创建一个txt文件。

3、把步骤1的代码粘贴到txt文件。

4、txt文件修改后缀为html。

5、双击步骤4的html，浏览器就会显示动态爱心。

html5网页底部会跳动的小爱心，有大神有源码吗？

在下研究了一下源代码，渗透到了服务器找了一下：

并强行爆破了一下

最终发现，这是引入了Font Awesome图标，并启用css3动画所制成的

原理为：

用Font Awesome引入一个心形，并用css设置为红色，再用css3关键帧动画使其放大缩小

这是从官网瓢来的源代码：（请确认已引入Font Awesome）

i class="fa fa-heart" style="font-size:48px;color:red;animation:iconAnimate 5s;"/i

css3代码如下

@keyframes iconAnimate {

0%, 100% {

transform: scale(1);

}

10%, 30% {

transform: scale(0.9);

}

20%, 40%, 60%, 80% {

transform: scale(1.1);

}

50%, 70% {

transform: scale(1.1);

}

}

Web爱心代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于web心形代码、Web爱心代码的信息别忘了在本站进行查找喔。