👨💻个人主页:@花无缺
欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 花无缺 原创收录于专栏 【HTML】
最近随着电视剧《点燃我温暖你》的火热播出,剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈,作为一个喜欢动手实践的我来说正是一个大好机会啊,于是我就把代码搬到了自己的网站上,源码我也放在了我的GitHub上,大家有需自取哦~💗
仓库地址:『https://github.com/he-weilai/love-code』
也欢迎大家star
Issues
fork
并pr
哦,一起来开发更多好看的样式或者动态效果吧!
网站效果:『https://huawuque404.com/love-code/love4.html』
后面有时间的话我会将各式各样的爱心代码更新在这个仓库里,如果大家感兴趣的话就来和我一起创造爱心吧~😍
今天周末了,大家都要好好吃饭,好好睡觉哦!🎉
拜拜!
GitHub进不去的话,源代码这也有一份,有点长:
<!DOCTYPE html>
<html>
<head>
<title> 爱心代码 </title>
<meta charset="utf-8">
<meta name="Author" content="花无缺">
<meta name="Keywords" content="爱心代码">
<meta name="Description" content="爱心代码">
<link rel="shortcut icon" href="../picture/爱心.png" type="image/x-icon">
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="pinkboard"></canvas>
<script>
var settings = {
particles: {
length: 500,
duration: 2,
velocity: 100,
effect: -0.75,
size: 30,
},
};
(function () {
var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (h, e) {
var d = new Date()