会跳动的爱心代码-简单易学的HTML网页（速成）

会跳动的爱心代码，崭新的告白方式。

还在为“如何表白？”而发愁吗？还在担心语言生硬，表达不出你的爱意吗？还在为缺乏创意的表白方式而苦思冥想吗？

当当当！爱心代码为你带来不一样的体验，极其简单的代码，无需安装其他东西，只需要你打开文本文档，复制代码即可写出一个爱心网页。废话不多说，开始展示：

如图所示：

首先，我们准备一个文件格式为html的文件，如 love.html ，再把下面代码写入文件。

<!DOCTYPE HHTML>
<html>
<head><title>Heart To Lover</title><link rel="stylesheet" type="text/css" href="heart.css">
</head>
<body>
<div class="heart"></div>
</body>
</html>

代码解析：这里的HTML文件非常简洁，在head处引用了一个叫“heart.css”的CSS文件，CSS文件负责网页的修饰。在body中加入的一个类，叫“heart”。

最后，再准备最后一个CSS文件（即在刚才的HTML文件中被引用的文件）。

body{margin: 0;padding: 0;min-height: 100vh;display:flex;align-items: center;justify-content: center;background-color: rgba(5, 1, 26, 0.913);
}.heart{height: 8em;width: 8em;background: #da0a0a;position: relative;transform: rotate(-45deg);box-shadow: -10px 10px 90px #b30435;animation: heart 0.6s linear infinite;
}
@keyframes heart{0%{transform: rotate(-45deg) scale(1.07);}80%{transform: rotate(-45deg) scale(1.0);}100%{transform: rotate(-45deg) scale(1.08);}
}
.heart:before{content: '';position: absolute;height: 8em;width: 8em;background-color:#da0a0a;top: -50%;border-radius: 5em;box-shadow: -10px -10px 90px #f10648eb;
}.heart::after{content: '';position: absolute;height: 8em;width: 8em;background-color: #da0a0a;right: -50%;border-radius: 5em;box-shadow: 10px 10px 90px #f10648eb;
}

文件中的诸多参数，大家可以自己去一个个理解测试，这里就不多阐述啦~

准备好这两个文件后，选择刚才的HTML文件，用浏览器的方式打开它，就可以获得一颗会跳动的爱心代码啦！

新人入住，请大家多多关照！我努力会把在代码之旅里更加有趣的小玩意共享给大家！

会跳动的爱心代码-简单易学的HTML网页（速成）相关推荐

python爱心代码简单教程
python爱心代码简单教程操作方法 1 将以上代码保存为.py文件,假设保存的文件名为 love.py (不会保存?先保存为txt文本,然后将后缀改为.py) 2 在终端(cmd命令窗口)输入pyt ...
跳动的爱心代码--李峋爱心代码（完整源码）
本文章分为两部分: 第一部分为实现效果展示,第二部分是实现跳动爱心源码. 关注微信公众号: 先取个名字吧跳动的爱心效果展示关注微信公众号(先取个名字吧)获取完整源码,回复爱心代码. 实现步骤 1. ...
跳动的爱心代码，点燃我温暖你爱心代码
如果能好好被爱,谁不想待在一个人身边一年有一年创建一个文本,代码粘贴进去,后缀改为html,浏览器打开即可 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HT ...
html代码简单的保护环境网页代码学生环保主题网页制作代码简单的垃圾分类网页制作作业简单的环境保护网页制作源码
【Python】《点燃我，温暖你》，快来Get李峋同款爱心代码
前言 hello,大家好最近有个剧挺火的就是那个程序员的剧,叫<点燃我,温暖你> 最近听说很火呀,那作为程序员,Python中的战斗机的小编,能不给大家安排一波! 怎么说呢,用这个表白 ...
Python超简单实现跳动爱心代码/opencv/几十行代码/新手也能学会
Python超简单实现跳动爱心代码/opencv/几十行代码/新手也能学会 1.OpenCV逐帧处理视频获得坐标像素点从网上寻找带有此同款爱心视频,原视频出处--<点燃我,温暖你>,截取 ...
跳动爱心代码-李峋爱心代码（手把手教学）
电视剧点燃我,温暖你打火机与公主裙李洵爱心跳动效果. 获取完整代码,公众号「先取个名字吧」回复爱心代码. 本文分为两种方式讲解如何运行代码,第一种方式比较简单推荐新手(完全不懂编程的),第二种 ...
一个《跳动的爱心》代码，纯HTML+JS，双击直接运行
HTML+JS实现的一个跳动的爱心.集合了web动画库GSAP JS.OBJ 文件加载器OBJLoader.WebGL第三方库Three.js等.效果非常棒! 目录实际效果: 目录结构: HTML代 ...
情人节用python实现跳动爱心代码，表白神器
嗨害大家好鸭! 最近好像有个剧很火~ 里面是: 跳动的!!! 爱心代码!!! 简直表白利器啊!!! 用python来给大家整个福利~ 效果预览

会跳动的爱心代码-简单易学的HTML网页（速成）

会跳动的爱心代码-简单易学的HTML网页（速成）相关推荐

最新文章

热门文章